Book2v1

Рис. 98: Подготовка файла шрифта к использованию в Processing.

191

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

Рассмотрим базовую работу с текстом на примере кода Листинга 83. В нем мы определенным шрифтом отрисуем слово в окне нашего приложения.

Во второй строке кода Листинга 83 мы объявили свойство font класса PFont. С этим свойством мы свяжем объект класса PFont в 9-й строке, который, в свою очередь, возвращается методом loadFont(). Пока нам не требуется анимация, так что мы вызвали метод noLoop(), и значит, метод draw() сработает только один раз.

Далее, в 10-й строке мы устанавливаем текущий размер шрифта (вызываем метод textFont()), так же как и текущий цвет заливки в строке 11. Заливка будет действовать в том числе и на буквы.

Листинг 83: Рисуем предложение

1

2PFont font ;

3

4void setup () {

6smooth () ;

7background (0) ;

8noLoop () ;

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

Результат работы кода Листинга 83 показан на Рисунке 99. Модифицируем код Листинга 83. Мы будем отрисовывать два сло-

ва, причем разными цветами и в разных местах приложения. Работая на контрастах, мы «закрутим» нашу композицию так, чтобы слова перекрывали друг друга, как бы боролись и в то же время сливались в одном ритме.

192

Рис. 99: Результат выполнения Листинга 83. Предложение.

Листинг 84: Крутим слова

1

2PFont font ;

5void setup () {

7smooth () ;

8background (0) ;

9

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

11textFont ( font , 48) ;

12}

13

17pushMatrix () ;

18rotate ( rotateCounter );

19fill (255) ;

23pushMatrix () ;

24rotate (- rotateCounter *1.5) ;

25fill (0) ;

29rotateCounter +=0.05;

30}

Результат работы кода Листинга 84 показан на Рисунках 100 и 101. В виду того что класс PFont работает с растровым форматом (.vlw)

193

Рис. 100: Результат выполнения Листинга 84. Вращение двух слов Black и White. Фаза 1.

194

Рис. 101: Результат выполнения Листинга 84. Вращение двух слов Black и White. Фаза 2.

195

шрифта, то у нас нет возможности дать букве например, обводку. Возможна работа и с кириллическим текстом (так же, как и работа со всеми шрифтами кодировки utf8): для этого вам потребуется при создании шрифта зайти в подменю Characters... и выбрать All Characters. Тогда в файле .vlw будут сформированы кирилические символы (конечно, выбранный вами шрифт должен содержать кириллические глифы). Кстати, сам редактор Processing (версия 2) не поддерживает кириллические символы и по умолчанию они отображаются прямоугольными значками. Пример использования кириллицы можно увидеть на Рисунке 102.

В Processing существует ряд методов для работы с объектами класса PFont. Методы призваны решать такие задачи типографики, как выравнивание текста – метод textAlign(), управление межстрочным интервалом

– метод textLeading(), управление размером шрифта – метод textSize(), получение ширины символа – метод textWidth().

Задание 1. На базе Листинга 84 создайте приложение, в котором используйте два разных шрифта. К изображению примените фильтры, тонирование или режимы смешивания.

Метод textMode() с аргументом SHAPE используется для формирования векторных глифов взамен растровых изображений. Этот режим работы со шрифтом применяется для сохранения исходного результата в форматы pdf и dxf. В Processing версии 2 невозможно использовать этот режим для отрисовки на экране, тем не менее рассмотрим работу с тестом из формата SVG, где мы можем получить доступ до векторного формата глифа.

11.2Работа с буквами из формата SVG

Если вам требуется более изящная работа с линиями начертания буквы, то есть векторное представление глифов, то класс PFont вам не подойдет. Тогда удобнее работать с глифами напрямую, например, преобразовав текст в кривые в любом векторном редакторе. Дальнейший процесс аналогичен процессу работы с форматом SVG.

Начнем с подготовки нашего SVG изображения. Этот пример мы будем рассматривать также с помощью редактора Inkscape. В нем мы создали SVG документ размерами 600х300 пикселей и набрали слово «Visual» определенным шрифтом. К сожалению, импортирование SVG файлов, содержащих тексты и шрифты, в Processing невозможно, поэтому мы перевели слово в кривые и в каждой букве увеличили количество

196

Рис. 102: Результат выполнения Листинга 84. Вращение двух слов Белый и Черный.

197

Рис. 103: Снимок экрана с процессом редактирования в Inkscape.

точек на кривой. Снимок экрана с процессом редактирования в Inkscape показан на Рисунках 103 и 104.

Рис. 104: Размещение точки между двумя соседними в редакторе

Inkscape.

198

На Рисунке 103 можно видеть примерное количество точек, которое должно быть на кривой. Дело в том, что далее мы будем отрисовывать в этих точках те или иные фигуры, поэтому плотность точек должна быть сравнительно большой. Разместить точку между двумя соседними точками в редакторе Inkscape можно с помощью команды Insert new nodes into selected segments (см. Рисунок 104).

Так как каждая буква переведена в кривые, то она имеет свой уникальный идентификатор – id. Посмотрите на Рисунок 103: в его правой части открыто окно XML Editor, в котором можно видеть 6 тегов XML SVG. Каждый тег соответствует соответствующей букве и имеет атрибут id с уникальным значением. Например, сейчас выделена буква «V» и ей соответствует тег с id = path4166. По этому id мы будем обращаться к букве из Processing приложения. Далее мы должны сохранить наше SVG изображение и добавить его в проект Processing.

Рассмотрим пример кода Листинга 85, который будет обрабатывать наш подготовленный SVG файл.

Листинг 85: Рисуем переливающиеся буквы

3int vertexCount ;

7void setup () {

9smooth () ;

10background (0) ;

11noStroke () ;

12PShape drawingSVG = loadShape (" m1 . svg ");

22void draw () {

23background (0) ;

199

30fill ( ellipseColor );

31float ellipseSize = map (i ,0 , vertexCount , eSize , eSize

37} else {

38sinCounter = 0;

39}

40}

41}

42// filter ( BLUR , 1) ;

43}

Этот пример был написан под влиянием работы Ekstasy Type Club проекта http://paperdove.com/ от Dae In Chung. Исходные коды работы не опубликованы, поэтому представляю вам свой вариант. Результат работы кода показан на Рисунках 105 и 106.

Рис. 105: Результат выполнения Листинга 85. Переливающиеся буквы. Фаза 1.

Общий принцы работы кода Листинга 85 состоит в том, что мы «обходим» букву за буквой и в каждой букве «обходим» вершины (точки). Для каждой вершины мы отрисовываем свой эллипс, причем цвет эллипса изменяется по синусоидальному закону от черного к белому. Размер эллипса уменьшается от первой вершины буквы к последней.

200