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 — можливі накреслення тексту
Автор:Григорій Громко
Джерело:ТУТ
Автор
Zakhar Zenchenko
УченьКоментарі
Останні статті
- Nov. 9, 2024, 12:43 a.m.
- oksana_kovalenko
Урок 9. Інтернет. Критичне оцінювання інформації, отриманої з Інтернету
Критичне оцінювання інформації, отриманої з Інтернету
Детальніше- Nov. 1, 2024, 11:39 p.m.
- oksana_kovalenko
Урок 8. Пошук інформації
Інтернет. Пошук інформації в Інтернеті
Детальніше