Програмування як середовище для творчості. Мова Processing

Програмування як середовище для творчості. Мова Processing

Клас: 11
Тема: Програмування як середовище для творчості. Створення графічних композицій мовою Processing.
Тип заняття: практична робота
Тривалість: 45 хвилин

🎯 Мета заняття

Навчитися:

• створювати графічне вікно в Processing;

• використовувати координати x і y;

• малювати геометричні фігури;

• задавати кольори;

• створювати прості анімації;

• використовувати програмування як інструмент творчості.

Перший приклад — створюємо картину з фігур

Почнемо з простого малюнка.

void setup() { // setup() виконується один раз після запуску програми

size(600, 400); // створюємо вікно шириною 600 і висотою 400 пікселів

background(220); // встановлюємо світло-сірий колір фону

fill(255, 200, 0); // задаємо жовтий колір заливки

ellipse(300, 200, 150, 150); // малюємо коло: x=300, y=200, ширина=150, висота=150

fill(50, 150, 255); // задаємо блакитний колір

rect(100, 100, 120, 80); // малюємо прямокутник x=100, y=100, ширина=120, висота=80

fill(255, 80, 80); // задаємо червоний колір

triangle(450, 300, 520, 150, 580, 300); // малюємо трикутник за трьома точками

}

Що ми отримали?

Програма створює композицію з:

🟡 кола
🔵 прямокутника
🔺 трикутника

Але — учень може змінити координати, розміри та кольори і отримати власний малюнок.

Як працюють координати?

У Processing початок координат знаходиться у верхньому лівому куті.

(0,0) ─────────────────────► X
  │
  │
  │
  │
  ▼
  Y

Наприклад:

ellipse(100, 100, 80, 80); // коло з центром приблизно в точці (100;100)

ellipse(300, 200, 100, 100); // коло в центрі області

ellipse(500, 300, 60, 60); // коло ближче до правого нижнього кута

Завдання для учнів: змінити координати трьох кіл так, щоб вони утворили діагональ.

Приклад — створюємо сонце

Тепер зробимо щось схоже на маленьку картину.

void setup() { // запускаємо програму один раз

size(700, 500); // створюємо вікно 700×500

background(135, 206, 235); // блакитний фон — небо

fill(255, 220, 0); // жовтий колір

ellipse(350, 220, 150, 150); // малюємо сонце

stroke(255, 180, 0); // задаємо колір ліній

strokeWeight(5); // товщина ліній — 5 пікселів

line(350, 100, 350, 40); // промінь вгору

line(350, 340, 350, 400); // промінь вниз

line(230, 220, 170, 220); // промінь ліворуч

line(470, 220, 530, 220); // промінь праворуч

fill(50, 180, 80); // зелений колір

noStroke(); // вимикаємо контур фігури

rect(0, 400, 700, 100); // малюємо землю

}

Цікава ідея

Запропонуйте учням:

«У вас є 5 хвилин, щоб перетворити цей код на власний пейзаж».

Вони можуть додати:

• будинок;

• дерева;

• хмари;

• гори;

• квіти;

• птахів;

• автомобіль.

Приклад — створюємо будинок

void setup() { // головна функція запуску

size(600, 500); // створюємо полотно

background(180, 220, 255); // фарбуємо небо

fill(80, 180, 80); // зелений колір

rect(0, 400, 600, 100); // створюємо землю

fill(220, 150, 80); // коричнево-помаранчевий колір

rect(200, 250, 200, 150); // стіни будинку

fill(180, 50, 50); // червоний колір

triangle(180, 250, 300, 140, 420, 250); // дах будинку

fill(100, 200, 255); // блакитний колір

rect(230, 280, 45, 55); // ліве вікно

rect(325, 280, 45, 55); // праве вікно

fill(120, 70, 30); // коричневий колір

rect(280, 330, 40, 70); // двері

fill(255, 230, 0); // жовтий колір

ellipse(310, 365, 7, 7); // ручка дверей

}

Творче продовження

«Чи можна створити ціле місто лише за допомогою коду?»

ак!

Наприклад, можна використати цикл:

for (int x = 20; x < 600; x += 100) { // повторюємо будинки через кожні 100 пікселів

rect(x, 300, 70, 100); // малюємо черговий будинок

}

Тобто одним циклом можна створити десятки об'єктів.

Приклад — перша анімація

Тепер зробимо програму цікавішою.

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

float x = 50; // початкова координата кульки по X

float speed = 3; // швидкість руху кульки

void setup() { // виконується один раз

size(600, 400); // створюємо вікно

}

void draw() { // виконується багато разів на секунду

background(30); // очищаємо екран

fill(255, 100, 100); // задаємо колір кульки

ellipse(x, 200, 60, 60); // малюємо кульку

x = x + speed; // переміщуємо кульку вправо

if (x > width - 30) { // перевіряємо, чи кулька досягла правого краю

speed = -speed; // змінюємо напрямок руху

}

if (x < 30) { // перевіряємо, чи кулька досягла лівого краю

speed = -speed; // знову змінюємо напрямок

}

}

Що тут нового?

На відміну від setup(), функція:

draw()

виконується постійно.

Тому ми можемо змінювати положення об'єкта і отримувати анімацію.

Приклад — інтерактивне малювання мишкою

А тепер найцікавіше.

Створимо програму, у якій учень малює мишкою.

void setup() { // запускаємо програму

size(700, 500); // створюємо полотно

background(255); // білий фон

}

void draw() { // функція постійного виконання

if (mousePressed) { // перевіряємо, чи натиснута кнопка миші

fill(0, 100, 255); // задаємо синій колір

ellipse(mouseX, mouseY, 20, 20); // малюємо коло під курсором

}

}

А тепер експеримент

Замість:

ellipse(mouseX, mouseY, 20, 20);       // малюємо коло

спробуйте:

ellipse(mouseX, mouseY, random(10, 50), random(10, 50)); // випадковий розмір кола

Тепер програма створюватиме випадкові за розміром точки.

4 творчі завдання

Завдання 1. «Моє сонце»

Створіть власну картину «Сонячний день».

Обов'язково використайте:

• фон;

• сонце;

• не менше 5 променів;

• землю;

• мінімум 2 додаткові об'єкти.

Додатково: додайте хмару та птаха.

Завдання 2. «Будинок моєї мрії»

Створіть у Processing власний будинок.

Використайте:

• rect();

• triangle();

• ellipse();

• line();

• щонайменше 5 різних кольорів.

Умова: будинок повинен мати двері, щонайменше два вікна, дах і доріжку.

⭐ Для тих, хто хоче складніше: створіть поруч другий будинок, але іншого розміру.

Завдання 3. «Кулька-стрибунець»

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

Використайте:

x speed draw()
if

Кулька повинна відбиватися від країв екрана.

⭐ Ускладнення: створіть 3 кульки, які рухаються з різною швидкістю.

Завдання 4. ⭐ «Цифровий художник»

Створіть інтерактивну програму, яка дозволяє малювати мишкою.

Базовий варіант:

if (mousePressed) {                    // якщо натиснута кнопка миші   ellipse(mouseX, mouseY, 20, 20);     // малюємо коло під курсором
}

Але ваша програма повинна мати власну творчу особливість.

Наприклад:

• випадкові кольори;

• випадковий розмір;

• різні фігури;

• ефект «зоряного пилу»;

• малювання квітів;

• створення абстрактної картини.

⭐ Максимальний рівень: зробіть так, щоб ліва кнопка малювала однією фігурою, а права — іншою.

Мініпроєкт наприкінці уроку

Наприкінці можна дати учням 10 хвилин на власний мініпроєкт:

«Створи цифрову картину за допомогою коду»

Обмеження:

мінімум:

• 5 геометричних об'єктів;

• 5 кольорів;

• 1 умова if;

• 1 цикл for.

Для найвищого рівня:

• анімація;

• взаємодія з мишкою;

• випадкові значення random();

• власна ідея.

📝 Критерії оцінювання

Підсумкове запитання учням

«Як змінилося ваше уявлення про програмування після цього уроку?»