Розробка уроку на тему «Створення та використання змінних у середовищі Processing»

Розробка уроку: Створення та використання змінних в середовищі Processing

1. Вступ: Що таке змінна?

Уявіть, що змінна — це підписана коробка, у якій зберігається певне значення (число, колір або текст). Замість того, щоб щоразу писати число 100, ми можемо дати йому ім'я x і змінювати його вміст у процесі роботи програми.

2. Типи даних та оголошення

У Processing (який базується на Java) важливо вказувати, який саме тип даних ми зберігаємо:

•         int — цілі числа (наприклад, 5, -10, 500).
•         float — числа з рухомою комою (наприклад, 3.14, 10.5).
•         color — для зберігання кольору.
•         boolean — логічне значення (true або false).

Синтаксис створення змінної:

int x = 50; // Тип -> Ім'я -> Значення
 

3. Структура програми (Setup та Draw)

Для роботи зі змінними нам потрібні дві основні функції:

1. setup() — виконується один раз на початку.
2. draw() — виконується циклічно (60 разів на секунду).

4. Практичне завдання: "Коло, що рухається"

Створимо програму, де коло самостійно рухається екраном.

Крок 1: Оголошуємо змінні (на початку коду)

int x = 0; // координата по горизонталі
int speed = 2; // швидкість руху
 

Крок 2: Налаштування вікна

void setup() {
  size(600, 400);
}
 

Крок 3: Анімація

void draw() {
  background(200); // Очищуємо фон, щоб не було "шлейфу"
    fill(0, 150, 255);
  ellipse(x, 200, 50, 50); // Використовуємо зміну x для позиції
    x = x + speed; // Кожен кадр збільшуємо x на значення speed
}
 

5. Інтерактивність: Вбудовані змінні

У Processing вже є готові змінні, які не треба оголошувати:

•         mouseX та mouseY — поточні координати миші.
•         width та height — ширина та висота вікна.

Спробуємо замінити код у draw() на цей:

void draw() {
  background(255);
  fill(255, 0, 0);
  ellipse(mouseX, mouseY, 30, 30); // Коло буде слідувати за мишкою
}
 

6. Завдання для самостійної роботи

1. Зміна швидкості: Створіть змінну y і змусьте коло рухатися зверху вниз.
2. Зміна розміру: Створіть змінну d (діаметр) і зробіть так, щоб коло постійно збільшувалося.