Пишемо текст в Processing

Якщо ви коли-небудь створювали текст в програмах типу InDesign, ви знаєте, що існує безліч налаштувань, наприклад відстань між буквами і перенесення слів У Processing це не так важливо Ваші можливості для виведення тексту будуть дещо обмежені, але достатні, для того, щоб зробити щось цікаве

Приступимо

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

Для того, щоб використовувати шрифт в 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(&quotOstrichSans-Bold-48vlw&quot) junction = loadFont(&quotJunction-24vlw&quot)

strokeCap( SQUARE )

}

Перше, що ми зробимо – напишемо два рядки тексту різним шрифтом Наступний фрагмент коду буде у функції draw ():

Void draw()

{

background( 255 )

fill( 128, 0, 0 )

textFont( ostrichSans, 48 ) textAlign( LEFT )

text( &quotHello, Im Ostrich Sans&quot, 20, 50 )

textFont( junction, 24 )

text(&quotIm a line of text, set in Junction&quot, 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( &quotThe quick brown fox jumps over the lazy dog (24)&quot, 20, 130 ) textFont( junction, 18 )

text( &quotPack my box with five dozen liquor jugs (18)&quot, 20, 154 ) textFont( junction, 12 )

text( &quotBlowzy red vixens fight for a quick jump (12)&quot, 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( &quotsince I left you&quot, width/2, 225 ) textAlign( CENTER )

text( &quotsymmetry is boring&quot, width/2, 252 ) textAlign( RIGHT )

text( &quotflush to the right&quot, width/2, 280 )

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

textFont( junction, 14 ) textAlign( LEFT )

String multiline = &quotIn typography, leading refers\n" multiline += &quotto the distance between the\n" multiline += &quotbaselines of successive lines\n" multiline += &quotof type"

float standardLeading = ( textAscent() + textDescent() ) * 1275f textLeading( standardLeading )

text( multiline, 20, 340 ) textLeading( standardLeading * 075 ) text( multiline, 220, 340 ) textLeading( standardLeading * 15 ) text( multiline, 420, 340 )

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

textFont( ostrichSans, 36 ) String s = &quottextWidth" 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

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*