P5js: Текст

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

Привіт, P5js!

Відкрийте нове вікно редагування, введіть наступні рядки і запустіть сценарій, натиснувши кнопку запуску:

function setup() {
 createCanvas(400, 400);
}
function draw() {
 background(220);
 text("Привіт!", 80, 50);
}

Ви отримаєте напис «Привіт!» чорного кольору.

Інструкція text() створює графічне зображення тексту у області побудови. Для цього потрібні три аргументи: повідомлення, яке ми хочемо написати, та його координати і y. Колір тексту, як і будь-якої геометричної фігури, визначається методом fill(), який встановлює колір заповнення:

function setup() {
 createCanvas(400, 400);
}
function draw() {
 background('gray');
 fill(0);
 text("Привіт!", 10, 20);
 fill(255);
 text("Вітаємо", 10, 40);
 fill(255,0,0);
 text("друзів", 10, 60);
 fill(0,0,255);
 text("P5js!", 10, 80);
}

В результаті кожне слово буде «написано» окремим кольором.

Зверніть увагу, що колір тла та малювання, визначені за допомогою вказівок background() та fill() різними способами.
У вказівках background() та fill() колір може визначено:

- текстовим рядком-символічною назвою кольору(ʼredʼ, ʼoliveʼ, ʼblackʼ, … );

- одним параметром як відтінок сірого (0 — чорний, 255 — білий);

- одним параметром-шістнадцятковим числом (#ffcc33), перші 2 байти — червоний компонент, другі два байти — зелений компонент, треті два байти — синій компонент кольору);

- трьома параметрами-числами, які є компонентами кольору RGB.

Стиль напису

Ви можете обирати не тільки колір напису, а й шрифт (textFont(“назва шрифту”)), його розмір(textSize(розмір шрифту)) та накреслення(textStyle(накреслення)), накреслення — NORMAL, BOLD, ITALIC, BOLDITALIC):

function setup() {
 createCanvas(400, 400);
}
function draw() {
 background(220);
 strokeWeight(1);
 fill(255,0,0);
 textFont("Comic Sans MS");
 textSize(36);
 text("Text", 50, 100);
 fill('green');
 textFont("Comic Sans MS");
 textSize(24);
 text("Text", 50, 130);
 fill('blue');
 textFont("Comic Sans MS");
 textSize(16);
 text("Text", 50, 160);
 fill('red');
 textFont("Arial");
 textSize(36);
 text("Text - Arial ", 50, 200);
 textStyle(ITALIC);
 fill('green');
 textFont("Times New Roman");
 text("Text - italic", 50, 240);
 textStyle(BOLD);
 fill('blue');
 textFont("Times New Roman");
 text("Text - bold", 50, 280);
}

Перекривання

Як ми зазначили у вступі до цього розділу, слова вписані всередину вікна перегляду є елементом графічного зображення, а не текстом у звичному розумінні цього слова — ви не зможете безпосередньо виділити та копіювати цей текст за допомогою миші або клавіатури. Єдине, що можна зробити — знищити частину тексту, побудувавши фігуру на його місці за допомогою відповідних інструкцій. У поданому прикладі при натиску мишки частина тексту перекривається прямокутником:

function setup() {
 createCanvas(400, 400);
 fill(0);
 text("Cлово можна", 10, 20);
 text("сховати", 10, 40);
 fill(0);
 text("іншою фігурою", 10, 60);
 fill(255, 255, 255);
 text("іншою фігурою", 11, 61);
}
function mouseClicked() { // Дія при натиску кнопки миші
 fill(204);
 rect(28,25,50,20); // будуємо прямокутник
}

До натиску мишки

Після натиску мишки

Варто пам’ятати, що при побудові і визначенні остаточного візуалізації є важливим порядок операцій — інструкції виконуються зверху вниз, і фігури, які побудовані пізніше, можуть перекривати фігури, побудовані раніше.

Підсумки

• text(“мійтекст”,x,y) — вивести мійтекст в позиції x, y
• textFont(“назва шрифту”) — обрати шрифт для тексту
• textStyle(накреслення) — обрати накреслення для тексту
• NORMAL, BOLD, ITALIC, BOLDITALIC — можливі накреслення тексту

Автор:Григорій Громко

Джерело:ТУТ