Інтерактивність та обробка подій
Проект у середовищі Processing розміщуватись у функціях setup() - виконується один раз під час запуску програми та draw() - виконується постійно у циклі, до завершення роботи програми.
У функції setup() відбуваються початкові налаштування, а функцію draw() зручно використовувати для обробки постійної зміни значень змінних, зокрема системних.
Системні змінні
У середовищі Processing можна користуватись системними змінними, наприклад координати положення миші: попереднє (pmouseX, pmouseY) і поточне (mouseX, mouseY).
Розмістивши у процедурі setup() базові налаштування (розмір полотна та колір тла), за допомогою процедури draw() можна обробляти переміщення миші.
Так, команда point (mouseX, mouseY);
малюватиме точки у поточному положенні вказівника миші, і рухаючи мишею можна отримувати її шлях на екрані:
| Processing | p5.js |
|---|---|
|
void setup() { size (640,480); background (100,100,100); strokeWeight(6); stroke(0,255,0); } void draw() { point (mouseX, mouseY); } |
function setup() { createCanvas (640,480); background (100,100,100); strokeWeight(6); stroke(0,255,0); } function draw() { point (mouseX, mouseY); } |
Замінивши малювання точки командою малювання лінії отримаємо суцільну неперервну лінію
line (pmouseX, pmouseY, mouseX, mouseY);
Функція клацання мишкою
Цей слід можна витерти, якщо запрограмувати подію клацання мишкою і внести в її обробник команду встановлення початкового тла:
| Processing | p5.js |
|---|---|
|
void mousePressed() { background (100,100,100); } |
function mousePressed() { background (100,100,100); } |
Тепер клацання мишкою очищує робоче тло проекту.
Зверніть увагу, що функція mousePressed() працює лише у поєднанні з функцією void draw() чи function draw() відповідно.
Якщо потрібно виконувати побудови за клацанням миші, можна скористатись додатковою перевіркою в межах процедури draw():
void draw() {
if (mousePressed == true) { }
}