План-конспект "Робота з шрифтом, PFont"

Урок ______. Робота з шрифтом, PFont

Формування компетентностей:

•              Предметна компетентність: навчити працювати зі шрифтами у Processing, сформувати уявлення про основні етапи роботи з шрифтами і текстом, з можливістю керування текстом методами програмування, синтаксис оператора присвоєння для використання шрифтів, продемонструвати різні методи роботи з шрифтами і текстом в Processing;

Ключові компетентності:

• Ініціативність і підприємливість: застосовувати творчий підхід підчас роботи у Processing, вміння аналізувати напрямок використання набути знань у майбутньому;
•              уміння вчитися впродовж життя:: виховувати інформаційну культуру, дбайливе ставлення до комп’ютерної техніки.

Тип уроку: Комбінований.

Обладнання та наочність: дошка, комп’ютери

Програмне забезпечення: Середовище програмування Processing, браузер.

Хід уроку

І. Організаційний етап

•                 привітання

•                 перевірка присутніх
•                 перевірка готовності учнів до уроку

ІІ. Актуалізація опорних знань

ІІІ. Мотивацій навчальної діяльності

Слово вчителя. На початку було слово... Робота з друкаркою, зі шрифтами та інтерактивними текстами містить у собі безліч цікавих можливостей. Багато цифрових художників активно використовують у своїх роботах текст. Інші, навпаки, включають інтерактивні шрифтові композиції до своїх творів.

Робота зі шрифтом на прикладному рівні пов'язана з рядом складнощів, наприклад, в області формату шрифту: у цьому форматі повинні зберігатися зображення букв і символів у векторній формі. Також не можна забувати і про друкарської традиції, яка передбачає такі властивості шрифту, як вирівнювання, інтерліньяж, міжлітерну відстані - все це створює додаткові складності в реалізації.

IV. Вивчення нового матеріалу

Пояснення вчителя

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

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

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

Розглянемо базову роботу з текстом з прикладу коду. В ньому ми певним шрифтом малюємо слово у вікні нашої програми.

У другому рядку коду ми оголосили властивість font класу PFont. З цією властивістю ми зв'яжемо об'єкт класу PFont у 9-му рядку, який, у свою чергу, повертається методом loadFont(). Поки що нам не потрібна анімація, так що ми викликали метод noLoop(), і значить, метод draw() спрацює лише один раз.

Далі, в 10-му рядку ми встановлюємо поточний розмір шрифту (викликаємо метод textFont()), так само як і поточний колір заливки у рядку 11. Заливка буде діяти навіть на літери.

1.  
2. PFont font;
3.  
4. void setup (){
5. size (600, 180);
6. smooth ();
7. background (0);
8. noLoop ();
9. font = loadFont("Bauhaus93 -48. vlw");
10. textFont(font , 48);
11. fill (178, 7, 157);
12.  
13. }
14.  
15. void draw (){
16. text("The world is here", 120, 100);
17. }

Відображення безпосередньо тексту відбувається за допомогою виклику методу text() у 16-му рядку. Метод приймає рядок для малювання та положення, де саме вона буде відмальована. Таким чином, ми змалювали рядок тексту. Якщо нам потрібно намалювати два рядки, необхідно або ще раз викликати метод text() з іншими значеннями аргументів, або використовувати символ перекладу рядка: \n.

Модифікуємо код. Ми будемо малювати два слова, причому різними кольорами та в різних місцях програми. Працюючи на контрастах, ми закрутимо нашу композицію так, щоб слова перекривали одне одного, ніби боролися і водночас зливалися в одному ритмі.

1.  
2. PFont font;
3. float rotateCounter = 0;
4.  
5. void setup (){
6. size (600, 600);
7. smooth ();
8. background (0);
9.  
10. font = loadFont("Bauhaus93 -48. vlw");
11. textFont(font , 48);
12. }
13.  
14. void draw (){
15. translate(width/2, height /2);
16.  
17. pushMatrix ();
18. rotate(rotateCounter);
19. fill (255);
20. text("Black", mouseX - width/2, mouseY - height/2);
21. popMatrix ();
22.  
23. pushMatrix ();
24. rotate(-rotateCounter *1.5);
25. fill (0);
26. text("White", width/2 - mouseX, height/2 - mouseY);
27. popMatrix ();
28.  
29. rotateCounter +=0.05;
30. }

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

У Processing існує низка методів роботи з об'єктами класу PFont. Методи покликані вирішувати такі завдання друкарні, як вирівнювання тексту – метод textAlign(), управління міжрядковим інтервалом – метод textLeading(), управління розміром шрифту – метод textSize(), отримання ширини символу – метод textWidth().

Метод textMode() з аргументом SHAPE використовується для формування векторних гліфів замість растрових зображень. Цей режим роботи зі шрифтом використовується для збереження вихідного результату у форматах pdf та dxf. У Processing версії 2 неможливо використовувати цей режим для відображення на екрані, проте розглянемо роботу з тестом із формату SVG, де ми можемо отримати доступ до векторного формату гліфу.

V. Фізкультхвилинка

VI. Засвоєння нових знань, формування вмінь

Практичне завдання.

Робота за комп’ютером

1.              Повторення правил безпечної поведінки за комп’ютером.

2.              Інструктаж учителя.
3.              Практична робота за комп’ютерами.

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

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

4.              Вправи для очей.

VIІ. Підсумки уроку

VІІI. Домашнє завдання

Ім'я

filter()

Опис

Фільтрує зображення, як визначено одним із таких режимів:

THRESHOLD

Перетворює зображення на чорно-білі пікселі залежно від того, перевищують вони або нижче порогу, визначеного параметром рівня. Параметр має бути від 0,0 (чорний) до 1,0 (білий). Якщо рівень не вказано, використовується 0,5.

GRAY

Перетворює будь-які кольори зображення в еквівалентні відтінки сірого. Жоден параметр не використовується.

OPAQUE

Встановлює альфа-канал повністю непрозорим. Жоден параметр не використовується.

INVERT

Встановлює для кожного пікселя зворотне значення. Жоден параметр не використовується.

POSTERIZE

Обмежує кожен канал зображення кількістю кольорів, зазначених як параметр. Для параметра можна встановити значення від 2 до 255, але результати найбільш помітні в нижніх діапазонах.

BLUR

Виконує розмивання за Гауссом з параметром рівня, що визначає ступінь розмиття. Якщо параметр не використовується, розмиття еквівалентне розмиванню за Гауссом радіуса 1. Більші значення збільшують розмиття.

ERODE

Зменшує світлі ділянки. Жоден параметр не використовується.

DILATE

Збільшує світлі ділянки. Жоден параметр не використовується.

2. PFont font;

3. 

4. void setup (){

5. size (600, 180);

6. smooth ();

7. background (0);

8. noLoop ();

9. font = loadFont("Bauhaus93 -48. vlw");

10. textFont(font , 48);

11. fill (178, 7, 157);

12. 

13. }

14. 

15. void draw (){

16. text("The world is here", 120, 100);

17. }

1. 

2. PFont font;

3. float rotateCounter = 0;

4. 

5. void setup (){

6. size (600, 600);

7. smooth ();

8. background (0);

9. 

10. font = loadFont("Bauhaus93 -48. vlw");

11. textFont(font , 48);

12. }

13. 

14. void draw (){

15. translate(width/2, height /2);

16. 

17. pushMatrix ();

18. rotate(rotateCounter);

19. fill (255);

20. text("Black", mouseX - width/2, mouseY - height/2);

21. popMatrix ();

22. 

23. pushMatrix ();

24. rotate(-rotateCounter *1.5);

25. fill (0);

26. text("White", width/2 - mouseX, height/2 - mouseY);

27. popMatrix ();

28. 

29. rotateCounter +=0.05;

30. }