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

Тема уроку: Цикли в Processing (for та while)

Мета уроку:

•         Ознайомити з поняттям циклу та його роллю в програмуванні.
•         Вивчити синтаксис циклів for та while.
•         Навчитися використовувати цикли для малювання множинних об'єктів.

1. Вступ: Навіщо потрібні цикли?

Уявіть, що вам потрібно намалювати 100 вертикальних ліній. Без циклів вам довелося б писати 100 рядків коду line(). Цикл дозволяє написати цей код один раз і вказати комп'ютеру, скільки разів його повторити.

2. Цикл while (Поки)

Цикл while виконує блок коду доти, доки певна умова є істинною (true).

Синтаксис:

int x = 50; // Початкове значення
while (x < 400) { // Умова
  line(x, 100, x, 300); // Дія
  x = x + 20; // Крок (інкремент)
}
 

3. Цикл for (Для)

Це найбільш вживаний цикл у Processing. Він компактніший, оскільки об’єднує ініціалізацію, умову та крок в одному рядку.

Синтаксис:

for (ініціалізація; умова; крок) \{ \dots \}

Приклад:

size(400, 400);
background(255);

for (int i = 0; i < 10; i++) {
  float y = 50 + i * 30;
  line(50, y, 350, y);
}
 

•         int i = 0 — створюємо лічильник.
•         i < 10 — цикл працює, поки i менше 10.
•         i++ — після кожного кола збільшуємо i на 1.

4. Практичні приклади

Приклад А: Градієнт за допомогою ліній

Замість суцільного кольору, ми можемо заповнити екран лініями, колір яких змінюється залежно від положення.

size(400, 400);
for (int i = 0; i < width; i++) {
  stroke(i / 1.5, 100, 200); // Зміна кольору stroke
  line(i, 0, i, height);
}
 

Приклад Б: Концентричні кола

Використання змінної циклу для зміни розміру фігури.

size(400, 400);
noFill();
for (int d = 380; d > 0; d -= 20) {
  ellipse(width/2, height/2, d, d);
}
 

5. Вкладені цикли (Створення сітки)

Якщо помістити один цикл for всередину іншого, можна малювати двовимірні структури (сітки).

size(400, 400);
for (int x = 20; x < width; x += 40) {
  for (int y = 20; y < height; y += 40) {
    fill(random(255));
    rect(x, y, 20, 20);
  }
}
 

6. Завдання для учнів

1. "Драбина": Намалюйте вертикальну драбину за допомогою одного циклу for.
2. "Мішень": Створіть мішень з 10 кіл, де кожне наступне коло має випадковий колір (fill(random(255))).
3. "Зоряне небо": За допомогою циклу та функції point(x, y) або ellipse() намалюйте 500 випадкових "зірок" на чорному фоні. (Підказка: використовуйте random(width) та random(height)).