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

Про матеріал
Креативне програмування (додатковий модуль 10(11) клас). Створення найпростішого графічного редактора в середовищі Processing з використанням функції mouseInPressed.
Перегляд файлу
Малювання(мишка)Креативне програмування. P5. JS
Логічна (boolean) системна змінна mouse. Is. Pressed приймає значення ІСТИННО (true), якщо кнопка мишки натиснута і ХИБНО (false) - не натиснута. Обробка натиску кнопки мишіmouse. Is. Pressed Синтаксис
Задання розмірів полотна (весь екран монітора) Фон тла. Заливка фігури. Переміщення в центр полотна. Якщо натиснута кнопка миші, то малюється еліпс, інакше - прямокутник
Дія кнопки миші
Для малювання лінії, яка слідує за мишкою, потрібно використовувати pmouse. X і pmouse. Y. Редактор малювання. Приклад. Користувач вибирає колір, а пізніше на полотні малює різнокольоровими лініями.
lеt c =
 no. Stroke(); //перша кнопка (Червона) fill(
//Ця функція виконується, якщо кнопка мишки натиснутаfunction mouse. Pressed() { if (mouse. X > 0 && mouse. X < 40 && mouse. Y > 0 && mouse. Y < 40) { c = 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"; }}Вибір кольору" title="//Ця функція виконується, якщо кнопка мишки натиснута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
Кінець
Зміст слайдів
Номер слайду 1

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

Номер слайду 2

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

Номер слайду 3

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

Номер слайду 4

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

Номер слайду 5

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

Номер слайду 6

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) полотна. 

Номер слайду 7

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

Номер слайду 8

//Ця функція виконується, якщо кнопка мишки натиснута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"; }}Вибір кольору

Номер слайду 9

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

Номер слайду 10

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

Номер слайду 11

Номер слайду 12

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

Номер слайду 13

Кінець

pptx
До підручника
Інформатика (рівень стандарту) 11 клас (Лисенко Т.І., Ривкінд Й.Я., Чернікова Л.А., Шакотько В.В.)
Додано
14 жовтня 2021
Переглядів
526
Оцінка розробки
Відгуки відсутні
Безкоштовний сертифікат
про публікацію авторської розробки
Щоб отримати, додайте розробку

Додати розробку