8_Інтерактивність_.pptx

ІНТЕРАКТИВНІСТЬ У
PROCESSING
© Тананайко О. Г. Вибірковий модуль 11 кл

ПОДІЇ

Код, що взаємодіє з мишею, керується з
клавіатури та інших пристроїв має працювати
безперервно. Щоб це стало можливим, потрібно
включити фрагмент коду,
які повинні повторюватися постійно, в
draw() функцію.
Робота функції draw()
// Виводить на консоль номер
кадра
Приклад 1:
void setup () {
size(480, 120);
background(0);
}
void draw()
{
println("I’m drawing");
println(frameCount);
}

Код, написаний в блоці draw(), виконується зверху вниз, а потім
повторюється до виходу з програми, натиснувши кнопку
Зупинити або закриттям вікна.
Кожен «запуск» коду у функції draw() називається кадром
(рамка).
(За замовчуванням швидкість «запуску» коду становить 60
кадрів в секунду, але ви можете встановити інше значення. Ми
зробимо це на прикладі 2.)
Функція println() у попередньому прикладі відображає текст
"Я малюю" та номер кадру за допомогою спеціального змінного
кадру Count (1, 2, 3, ...). Текст з'являється у вікні консолі -
область з чорним фоном під текстом

Крім функції draw(), обробка має функцію
setup(), яка запускається один раз, коли
програма запускається:
.
Робота функції draw()
// Виводить на консоль номер
кадра
Приклад 2:
void setup()
{
println("I’m starting");
}
void draw() {
println("I’m running");
}
Під час роботи програми консоль
відображає таке повідомлення:

СИСТЕМНІ ЗМІННІ
• У середовищі Processing можна
користуватись системними змінними, наприклад
координати положення миші:
попереднє (pmouseX, pmouseY) і поточне (mouseX,
mouseY).
• Розмістивши у процедурі setup() базові налаштування
(розмір полотна та колір тла), за допомогою
процедури draw() можна обробляти переміщення
миші.
• Так, команда point (mouseX, mouseY);
малюватиме точки у поточному положенні
вказівника миші, і рухаючи мишею можна

У типовій програмі код всередині функції setup() використовується для
встановлення початкові значення змінних. Перший рядок, як правило, є
функцією size(), потім можна ввімкнути функції, які визначають кольори
заливки та лінії або функції для завантаження зображень і шрифтів. (Якщо
не ввімкнути розмір функції(), вікно матиме розмір 100x100 пікселів.
Існує ще одна область в текстовому редакторі, куди можна вписати код –
це область поза межами функцій setup() і draw(), тут можна оголосити
змінні.
Змінну, оголошену у функції setup(), не можна використовувати в іншому
місці. Змінна, оголошена поза межами цих функцій, називається
глобальною змінною, оскільки її можна використовувати в будь-якому місці
програми ("глобально").
Для уточнення, послідовність, в якій працює код:
1. Оголошуються змінні за межами функцій setup() і draw().
2. Код всередині функції setup() запускається один раз.
3. Код всередині функції draw() працює безперервно.

int x = 280;
int y = -100;
int diameter = 380;
void setup() {
size(480, 120);
smooth();
fill(102);
}
void draw() {
background(204);
ellipse(x, y, diameter,
diameter);
}
Приклад 3: setup() і draw() у цьому прикладі використано обидві
функції

Тепер у нас є код, який працює безперервно, щоб ми могли отримати
інформацію про місцезнаходження миші та використання цих координати
переміщення елементів на екрані.
Приклад 4: Спостереження за курсором
Змінна mouseX містить x-координату, а змінна mouseY містить координату
миші
ПЕРЕМІЩЕННЯ ОБ'ЄКТІВ ЗА
ДОПОМОГОЮ МИШІ
void setup() {
size(480, 120);
fill(0, 102);
smooth();
noStroke();
}
void draw() {
ellipse(mouseX, mouseY, 9, 9);
}

У цьому прикладі кожного разу, коли виконується блок команд з
функції draw(), у вікні малюється нове коло. Зображення у
прикладу отримуємо в результаті переміщення миші. Кола
напівпрозорі, і тому, де чорний колір найбільш інтенсивний,
можна зрозуміти, де був курсор довше і де він рухався з більш
низькою швидкістю. Де відстань між колам більша-там курсор
рухався швидше.

ПРИКЛАД 5: КРАПКА СЛІДУЄ ЗА
КУРСОРОМ
void setup() {
size(480, 120);
fill(0, 102);
smooth();
noStroke();
}
void draw() {
background(204);
ellipse(mouseX, mouseY, 9,
9);
}
Тут кожного разу,
коли виконується блок
команд з функції draw(),
у вікні з'являється нове
коло.
Щоб оновити екран
перед появою нового
кола, застосовуємо
функцію background() на
початку функції draw(),
перед малюванням
Форми

ФУНКЦІЯ BACKGROUND()
Функція background() повністю очищає вікно, тому
треба слідкувати, що вона знаходилася перед
іншими функціями в блоці draw(), інакше форми,
намальовані перед ними, будуть стерті

ПРИКЛАД 6: МАЛЮЄМО НЕПЕРЕРВНІ ЛІНІЇ
void setup() {
size(480, 120);
strokeWeight(4);
smooth();
stroke(0, 102);
}
void draw() {
line(mouseX, mouseY,
pmouseX, pmouseY);
}
Змінні pmouseX і
pmouseY зберігають
положення миші від
попереднього кадру.
Вони оновлюються
кожного разу, коли
запускається блок
команд з draw(), як
миша і мишаY.
З'єднання поточних і
попередніх позицій
курсора
можна намалювати
неперервну лінію

ПРИКЛАД 7: ЗМІНА РОЗМІРУ МУХИ
void setup() {
size(480, 120);
smooth();
stroke(0, 102);
}
void draw() {
float weight = dist(mouseX,
mouseY, pmouseX, pmouseY);
strokeWeight(weight);
line(mouseX, mouseY, pmouseX,
pmouseY);
}
Змінні pmouseX і pmouseY
можна використовувати для
розрахунку швидкості рухів
миші.
Для цього потрібно виміряти
відстань між поточним і
попереднім положення миші.
Повільна миша пройде
невелику відстань, зі
збільшенням швидкості
відстань збільшиться.
Наступний приклад
показує, що функція dist()
спрощує ці обчислення.
Тут швидкість миші
встановить товщину

ПРИКЛАД 8: ПОМ'ЯКШЕННЯ
У прикладі 7 координати
миші безпосередньо
визначають положення кола
на екрані.
Але іноді можна, щоб лінія
була більш гладкою,
незважаючи на
нерівномірну траєкторія
курсору. Цей метод
називається пом'якшенням
(поліпшенням).
Для цього потрібно дві
величини – поточна і
наступна (рис).
З кожним кроком поточне
значення близьке до
наступного
float x;
float easing = 0.01;
float diameter = 12;
void setup() {
size(220, 120);
smooth();
}
void draw() {
float targetX = mouseX;
x += (targetX - x) * easing;
ellipse(x, 40, 12, 12);
println(targetX + " : " + x);
}

Значення змінної x завжди має тенденцію до targetX.
Швидкість, з якою x має тенденцію до targetX
встановлюється змінною пом'якшення в діапазоні від 0 до 1.
Низьке значення пом'якшення викликає більшу
інерцію, ніж висока.
Якщо немає затримки 1, затримки не буде. Під час
запуску прикладу8 обидва значення будуть відображатися на
консолі функцією println().
Зауважте, що коли переміщати мишу, ці цифри сильно
різняться, але коли миша нерухома, вони поступово
зрівнюються.
ПРИКЛАД 8: ПОМ'ЯКШЕННЯ

ЗАВДАННЯ
Створіть проект, у якому відбувається
побудова ліній за рухом вказівника миші. При
клацанні відбувається очищення екрану.

МАТЕРІАЛИ
https://youtu.be/HSOlD8edovk
https://dystosvita.org.ua/mod/page/view.php?i
d=1005
Тестування
https://naurok.com.ua/test/interaktivnist-ta-
obrobka-podiy-804771.html

8_Інтерактивність_.pptx

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie 8_Інтерактивність_.pptx

Ähnlich wie 8_Інтерактивність_.pptx (6)

8_Інтерактивність_.pptx