Презентація "Малювання (миша)" (P5.JS)

Малювання(мишка)Креативне програмування. P5. JS

Логічна (boolean) системна змінна mouse. Is. Pressed приймає значення ІСТИННО (true), якщо кнопка мишки натиснута і ХИБНО (false) - не натиснута. Обробка натиску кнопки мишіmouse. Is. Pressed Синтаксис

Задання розмірів полотна (весь екран монітора) Фон тла. Заливка фігури. Переміщення в центр полотна. Якщо натиснута кнопка миші, то малюється еліпс, інакше - прямокутник

Дія кнопки миші

Для малювання лінії, яка слідує за мишкою, потрібно використовувати pmouse. X і pmouse. Y. Редактор малювання. Приклад. Користувач вибирає колір, а пізніше на полотні малює різнокольоровими лініями.

lеt c = "black";function setup() { create. Canvas(600, 400); background(205);}function draw() { if (mouse. Is. Pressed) { stroke. Weight(5); stroke(c); line(mouse. X, mouse. Y, pmouse. X, pmouse. Y);}Системна змінна pmouse завжди містить координати положення миші в кадрі відносно (0, 0) полотна. 

no. Stroke(); //перша кнопка (Червона) fill("red"); rect(0, 0, 40, 40); // друга кнопка (Синя) fill("blue"); rect(40, 0, 40, 40); //третя кнопка (Чорна) fill("black"); rect(80,0,40,40);}Вибір кольору

//Ця функція виконується, якщо кнопка мишки натиснутаfunction mouse. Pressed() { if (mouse. X > 0 && mouse. X < 40 && mouse. Y > 0 && mouse. Y < 40) { c = "red"; } if (mouse. X > 40 && mouse. X < 80 && mouse. Y > 0 && mouse. Y < 40) { c = "blue"; } if (mouse. X>80 &&mouse. X<120 && mouse. Y >0 && mouse. Y <40){ c = "black"; }}Вибір кольору

Малювання прямокутників, що служать для вибору кольору. Змінній присвоюється (black) чорний колір.

Якщо курсор мишки знаходиться в певних межах, змінній С присвоюється відповідний колір

Літератураhttps://p5js.org/reference/#/p5/mouse. Is. Pressed - документація Margaret Noble. Programming Media Art Using Processing. CRC Press, 2021

Кінець