Інтерактивність та обробка подій


Проект у середовищі 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) { }

}

Остання зміна: середа 11 листопада 2020 20:11