Презентація "Робота з шрифтом, PFont"

Про матеріал
Презентація уроку інформатики за модулем "Креативне програмування". Складений до план-конспекту "Робота з шрифтом, PFont", програма Processing мова програмування Java Script, має в своєму складі зразки коду для уроку. Опорою при складанні конспекту був підручник - Орлов Павел Анатольевич/ Программирование для дизайнеров : учеб. пособие / П.А. Орлов ; под ред. проф. В.М. Иванова — М. : АВАТАР, 2015. — 247 с.
Зміст слайдів
Номер слайду 1

Робота з шрифтом, PFont

Номер слайду 2

Робота з шрифтом, PFont. У Processing робота зі шрифтами віддана класу PFont. Processing працює з певним форматом шрифту (.vlw), тому, перш ніж реалізовувати свою програму, потрібно сформувати шрифт. Для того, щоб створити шрифт, можна вибрати в панелі задач Tools -> Create Font. Також необхідно вказати розмір букв, бажано із запасом, тобто. показувати більший розмір, ніж вам справді потрібно. Справа в тому, що Processing малює кожну букву вибраного вами шрифту в растрову картинку того розміру, який ви вибрали.

Номер слайду 3

Робота з шрифтом, PFont. Після того як ви сформували шрифт, він з'явиться у папці data вашого проекту. Об'єкт класу PFont рекомендується отримувати за допомогою методу load. Font(), який своїм аргументом набуває найменування файлу шрифту (з розширенням .vlw). Отримати список доступних шрифтів можна за допомогою методу list(). Ви можете створювати шрифти .vlw не тільки за допомогою інтерфейсу Processing. Існує метод create. Font(), який робить це на льоту: метод приймає аргументами найменування доступного шрифту, розмір, необхідність згладжування та масив символів конвертації, а результатом є об'єкт класу PFont та файл .vlw у папці data.

Номер слайду 4

Розглянемо базову роботу з текстом з прикладу коду. В ньому ми певним шрифтом малюємо слово у вікні нашої програми. PFont font; void setup (){size (600, 180);smooth ();background (0);no. Loop ();font = load. Font("Bauhaus93-48.vlw");text. Font(font , 48);fill (178, 7, 157); } void draw (){text("The world is here", 120, 100);}У другому рядку коду ми оголосили властивість font класу PFont. З цією властивістю ми зв'яжемо об'єкт класу PFont у 9-му рядку, який, у свою чергу, повертається методом load. Font(). Поки що нам не потрібна анімація, так що ми викликали метод no. Loop(), і значить, метод draw() спрацює лише один раз. Далі, в 10-му рядку ми встановлюємо поточний розмір шрифту (викликаємо метод text. Font()), так само як і поточний колір заливки у рядку 11. Заливка буде діяти навіть на літери. Відображення безпосередньо тексту відбувається за допомогою виклику методу text() у 16-му рядку. Метод приймає рядок для малювання та положення, де саме вона буде відмальована. Таким чином, ми змалювали рядок тексту. Якщо нам потрібно намалювати два рядки, необхідно або ще раз викликати метод text() з іншими значеннями аргументів, або використовувати символ перекладу рядка: \n.

Номер слайду 5

Завдання Зробити текст анімованим, щоб він постійно змінював колір.

Номер слайду 6

Ми будемо малювати два слова, причому різними кольорами та в різних місцях програми. Працюючи на контрастах, ми закрутимо нашу композицію так, щоб слова перекривали одне одного, ніби боролися і водночас зливалися в одному ритмі. PFont font;float rotate. Counter = 0; void setup (){size (600, 600);smooth ();background (0); font = load. Font("Bauhaus93-48. vlw");text. Font(font , 48);} 14. void draw (){15. translate(width/2, height /2);16. 17. push. Matrix ();18. rotate(rotate. Counter);19. fill (255);20. text("Black", mouse. X - width/2, mouse. Y - height/2);21. pop. Matrix ();22. 23. push. Matrix ();24. rotate(-rotate. Counter *1.5);25. fill (0);26. text("White", width/2 - mouse. X, height/2 - mouse. Y);27. pop. Matrix ();28. 29. rotate. Counter +=0.05;30. }

Номер слайду 7

Робота з шрифтом, PFont. Зважаючи на те, що клас PFont працює з растровим форматом (.vlw) шрифту, то у нас немає можливості дати букві, наприклад, обведення. Можлива робота і з кирилічним текстом (так само, як і робота з усіма шрифтами кодування utf8): для цього вам знадобиться під час створення шрифту зайти в підменю Characters... і вибрати All Characters. Тоді у файлі .vlw будуть сформовані кириличні символи (звичайно, вибраний вами шрифт має містити кириличні гліфи). До речі, сам редактор Processing (версія 2) не підтримує символи кирилиці і за замовчуванням вони відображаються прямокутними значками.

Номер слайду 8

Робота з шрифтом, PFont. У Processing існує низка методів роботи з об'єктами класу PFont. Методи покликані вирішувати такі завдання друкарні, як вирівнювання тексту – метод text. Align(), управління міжрядковим інтервалом – метод text. Leading(), управління розміром шрифту – метод text. Size(), отримання ширини символу – метод text. Width(). Метод text. Mode() з аргументом SHAPE використовується для формування векторних гліфів замість растрових зображень. Цей режим роботи зі шрифтом використовується для збереження вихідного результату у форматах pdf та dxf. У Processing версії 2 неможливо використовувати цей режим для відображення на екрані, проте розглянемо роботу з тестом із формату SVG, де ми можемо отримати доступ до векторного формату гліфу.

Номер слайду 9

Завдання На базі коду створіть програму, в якій використовуйте два різні шрифти. Використовуйте фільтри, тонування або режими змішування.

pptx
Додано
8 лютого 2022
Переглядів
378
Оцінка розробки
Відгуки відсутні
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку