Главная » Processing » Пишем текст в Processing

1

Если вы когда-нибудь создавали текст в программах типа InDesign, вы знаете, что существует множество настроек, например расстояние между буквами и перенос слов. В Processing это не так важно. Ваши возможности для вывода текста будут несколько ограничены, но достаточны, для того, чтобы сделать что-то интересное.

Приступим

Для работы нам понадобится несколько шрифтов. Я использовал открытые шрифты Ostrich Sans и Junction от The League of Moveable Type. Вы можете скачать их на http://www. theleagueofmoveabletype.com. После скачивания их нужно установить на свою машину и они будут доступны для использования.

Для того, чтобы использовать шрифт в Processing, вам нужно конвертировать его в оринальный файл формата .vlw, который читает Processing. Это можно сделать с помощью инструмента Create Font. Выберите нужный шрифт, установите размер и нажмите на кнопку OK. Шрифт .vlw будет сохранен в папку data вашего скетча.

Как это делается

Начнем с объявления двух объектов класса PFont по одному объекту на каждый шрифт. В функции setup() для загрузки файлов .vlw в объект PFont мы используем функцию loadFont():

PFont ostrichSans; PFont junction;

void setup()

{

size( 640, 480 );

smooth();

ostrichSans = loadFont("OstrichSans-Bold-48.vlw"); junction = loadFont("Junction-24.vlw");

strokeCap( SQUARE );

}

Первое, что мы сделаем – напишем две строки текста разным шрифтом. Следующий фрагмент кода будет в функции draw():

Void draw()

{

background( 255 );

fill( 128, 0, 0 );

textFont( ostrichSans, 48 ); textAlign( LEFT );

text( "Hello, I’m Ostrich Sans", 20, 50 );

textFont( junction, 24 );

text("I’m a line of text, set in Junction.", 20, 80);

stroke( 128, 0, 0 );

strokeWeight( 1 );

line( 20, 94, 620, 94 );

line( 20, 96, 620, 96 );

}

Processing может изменять размер текста согласно второму параметру функции textFont(). Следующий фрагмент кода напишет три строки текста шрифтом Junction разного размера. Добавьте их в функцию draw().

fill( 0 );

textFont( junction, 24 );

text( "The quick brown fox jumps over the lazy dog. (24)", 20, 130 ); textFont( junction, 18 );

text( "Pack my box with five dozen liquor jugs. (18)", 20, 154 ); textFont( junction, 12 );

text( "Blowzy red vixens fight for a quick jump. (12)", 20, 172 );

stroke( 128 );

strokeWeight( 3 );

line( 20, 186, 620, 186 );

Далее мы нарисуем прямоугольник с вертикальной линией в середине. Эта линия разделяет три строки текста слева, справа и в центре. Добвьте эти строки кода далее в функции draw().

fill( 245 );

stroke( 128 );

strokeWeight( 1 );

rect( 20, 192, 600, 110 );

stroke( 128 );

line( width/2, 192, width/2, 298 );

fill( 128 );

stroke( 128 );

triangle( width/2-4, 192, width/2+4, 192, width/2, 196 );

triangle( width/2-4, 302, width/2+4, 302, width/2, 298 );

fill( 0 );

textFont( junction, 24 ); textAlign( LEFT );

text( "since I left you", width/2, 225 ); textAlign( CENTER );

text( "symmetry is boring", width/2, 252 ); textAlign( RIGHT );

text( "flush to the right", width/2, 280 );

В Processing также можно сделать блок с несколькими строками текста. Можно установить приоритет для каждого блока текста на экране. Добавьте этот фрагмент кода далее в функцию draw().

textFont( junction, 14 ); textAlign( LEFT );

String multiline = "In typography, leading refers\n"; multiline += "to the distance between the\n"; multiline += "baselines of successive lines\n"; multiline += "of type.";

float standardLeading = ( textAscent() + textDescent() ) * 1.275f; textLeading( standardLeading );

text( multiline, 20, 340 ); textLeading( standardLeading * 0.75 ); text( multiline, 220, 340 ); textLeading( standardLeading * 1.5 ); text( multiline, 420, 340 );

В последнем фрагменте кода, который мы добавим в функцию draw(), мы вычислим ширину строки текста с помощью функции textWidth(). Мы используем вычисленное значение для рисования линии под текстом.

textFont( ostrichSans, 36 ); String s = "textWidth"; float w = textWidth( s ); fill( 128, 0, 0 );

text( s, 20, 450 ); noStroke();

rect( 20, 455, w, 8 );

Если вы используете те же шрифты, то результат будет выглядеть так, как на этом скриншоте:

Как это работает

Теперь вы знаете все, что нужно для работы со шрифтом в Processing. Перечислим функции, которые мы использовали в этом примере:

f text() используется для вывода текста на экран. Первый параметр – переменная типа String, но вы можете использовать и массив переменных типа char. Второй и третий параметры – это координаты места на экране, где вы хотите написать текст.

f   loadFont() используется для загрузки шрифта из папки data вашего скетча в переменную PFont. Затем вам нуно создать шрифт с помощью инструмента Create Font.

f   textFont() вызывается как раз перед функцией text() и используется для установки типа и размера шрифта, который будет выводиться на экран.

f textAlign() размещает текст относительно координат, указанных в функции text(). Параметр может принимать значения LEFT, RIGHT или CENTER. В данном примере мы применили эту функцию для того, чтобы расположить три строки текста относительно центра окна.

f   textWidth() возвращает длину строки в пикселях.

f  textLeading() устанавливает приоритет текста. Используется, когда вы хотите вывести на экран блок текста со множестовом строк.

f   textAscent() – расстояние от верхней линии букв до верхней границы шрифта.

f   textDescent() – расстояние от нижней линии букв до нижней границы шрифта.

Источник: Ян Вантомм, Processing 2: креативное программирование, перевод с английского Александры Мишутиной, Published by Packt Publishing Ltd., 2012, BIRMINGHAM – MUMBAI.

По теме:

  • Комментарии

1 комментарий

  1. Борис says:

    Почему-то текст получается какой-то угловатый, как будто плохого качества, что ли.
    Что я делаю не так?