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

Функція setup() - виконується один раз під час запуску програми та draw() - виконується постійно у циклі, до завершення роботи програми.

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

Системні змінні

У середовищі Processing можна користуватись системними змінними, наприклад координати положення миші: попереднє (pmouseX, pmouseY) і поточне (mouseX, mouseY).

Розмістивши у процедурі void setup() базові налаштування (розмір полотна та колір тла), за допомогою процедури void mouseDragged() можна обробляти переміщення миші.

Так, команда point (mouseX, mouseY); малюватиме точки у поточному положенні вказівника миші, і рухаючи мишею можна отримувати її шлях на екрані:

void setup()

{

size (640,480);

background (255,0,0);

strokeWeight(6);

stroke(0,255,0);

}

void draw()

{

point (mouseX, mouseY);

}

Замінивши малювання точки командою малювання лінії отримаємо суцільну неперервну лінію

line (pmouseX, pmouseY, mouseX, mouseY);

 

Функція клацання мишкою

Цей слід можна витерти, якщо запрограмувати подію клацання мишкою і внести в її обробник команду встановлення початкового тла:

void mousePressed()

{

background (255,0,0);

}

Тепер клацання мишкою очищує робоче тло проекту.

Зверніть увагу, що функція mousePressed() працює лише у поєднанні з функцією void draw().

Якщо потрібно виконувати побудови за клацанням миші, можна скористатись додатковою перевіркою  в межах процедури void draw():

void draw() {
  if (mousePressed == true) { }

   150+ прикладів проектів з відео-поясненнями (англ)

Джерело: Дистосвіта

10-Г клас

Циклічні побудови

Якщо потрібно зобразити серію однотипних елементів, доцільно скористатись командою циклу.

 https://processing.org/reference/for.html

for (int x=0; x<500 x="x+a)</span">

{ }

for (початкове значення лічильника циклу; кінцеве значення лічильника; крок зміни лічильника)  {  }

 Так, для побудови ряду квадратів зі стороною а, можна скористатись таким фрагментом коду:

size(500,500);

int a=50;

int y=100;

for (int x=0;  x<500 x="x+a)</font">

{

rect(x,y,a,a);

}

 Додавання у тіло циклу команд випадкового призначення кольору дозволить розфарбувати квадрати (зверніть увагу на використання змінної c типу color):

  int red=int(random(255));

  int green=int(random(255));

  int blue=int(random(255));

  color c=color(red,green,blue);

  fill (c);

Іноді, зокрема для відлагодження програми, доцільно виводити значення лічильника командою print() або println()

 Другий тип циклу - з умовою, описано за посиланням https://processing.org/reference/while.html

Так, можна зменшувати сторони квадрату в процесі побудови:

size (500,500);

background (255,255,255);
int a=60;
int y=100;
int x=0;
while (a>5) 
{ 
 int red=int(random(255));  
 int green=int(random(255));  
 int blue=int(random(255));  
 fill (red,green,blue);  
 rect(x,y,a,a);  
x=x+a;  
 a=a-5; 
}

 Проект складнішого рівня

Порівняємо команди генерування випадкових чисел random та шуму noise:

float time = 0;

void setup() {

size(400, 400);

}

void draw() {

background(255);

float x = 0;

  while (x < width/2) {

    line(x, 200 + 50 * noise(x / 100, time), x, height);

    x = x + 5;

  }

  while (x < width) {

  line(x, 200 + 50 * random(x /100), x, height);

   x = x + 5;

  }  

  time = time + 0.02;

}

Завдання "Циклічні побудови"

Пірамідка з прямокутників

Пірамідка-ялиночка

Сімейство квадратів з центру екрану

Веселка

Сімейство кіл

size(500,500);
int a=500;
int x=0;
int y=0;
while (a>5)
{
int red=int(random(255));
int green=int(random(255));
int blue=int(random(255));
fill (red,green,blue);
rect(x+a,y+a,a,a);
a=a-5;
}