Учебник Креативное кодирование на p5.js для начинающих

Программа курса

1. 1 Знакомство с p5.js

   1. Что такое креативное кодирование и p5.js

      Узнай, что такое креативное кодирование, зачем нужна библиотека p5.js и как код превращается в рисунки и анимацию на экране.

   2. Первый скетч: setup() и draw()

      Создай свой первый скетч на p5.js: разберись, как работают функции setup() и draw() и почему одна выполняется раз, а другая повторяется.

   3. Холст, пиксели и система координат

      Разберись, как устроен холст в p5.js: что такое пиксели, где начало координат и как задавать точки парой чисел x и y.

   4. Рисуем первые формы

      Научись рисовать базовые формы p5.js — точку, линию, прямоугольник и круг — и собери из них первого простого цыплёнка.

2. 2 Цвет и стиль

   1. Цвет: RGB, HSB и прозрачность

      Освой цвет в p5.js: модели RGB и HSB, что значит каждый канал и как сделать фигуру полупрозрачной через alpha.

   2. Заливка, обводка, толщина линий

      Научись управлять видом фигур в p5.js: заливка fill(), обводка stroke(), толщина линии и как отключать их через noFill и noStroke.

   3. Фон, наслоение и порядок отрисовки

      Разберись, как фон background() и порядок отрисовки влияют на кадр в p5.js: что нарисовано позже — то поверх остального.

   4. Композиция: как собрать красивый кадр

      Узнай основы композиции в p5.js: баланс, акцент, поля и сочетание цветов, чтобы собрать аккуратный и красивый кадр с цыплёнком.

3. 3 Движение и анимация

   1. Цикл draw() и кадры в секунду

      Разберись, как draw() рисует кадр за кадром и что такое частота кадров frameRate в p5.js, создающая иллюзию движения.

   2. Переменные состояния: двигаем объект

      Научись двигать объект в p5.js через переменные состояния: храни координату между кадрами и меняй её в draw(), чтобы цыплёнок поехал.

   3. Отскок от краёв

      Сделай так, чтобы цыплёнок отскакивал от краёв холста в p5.js: проверяй границы и разворачивай направление скорости.

   4. Easing и плавность

      Освой easing в p5.js: двигай объект частями расстояния до цели, чтобы движение цыплёнка стало плавным и приятным глазу.

   5. Время вместо кадров: millis()

      Узнай, почему анимацию лучше привязывать ко времени, а не к кадрам, и как использовать millis() в p5.js для стабильного движения.

4. 4 Интерактивность

   1. Мышь: mouseX и mouseY

      Научись читать положение курсора в p5.js через mouseX и mouseY и заставь цыплёнка следить за мышью по холсту.

   2. Клики и состояния

      Обрабатывай клики мыши в p5.js через mousePressed() и переключай состояния сцены, чтобы цыплёнок менялся по нажатию.

   3. Клавиатура: управление с клавиш

      Управляй цыплёнком с клавиатуры в p5.js: читай нажатия через keyIsDown и стрелки, чтобы двигать героя по холсту.

   4. Тач и адаптив для телефона

      Сделай скетч p5.js удобным на телефоне: обрабатывай касания через touch-события и подстраивай размер холста под экран.

5. 5 Циклы и паттерны

   1. Цикл for: рисуем ряды

      Освой цикл for в p5.js: повторяй рисование, чтобы одной строкой выстроить целый ряд цыплят вместо копипасты.

   2. Вложенные циклы: сетки

      Научись использовать вложенные циклы for в p5.js, чтобы строить сетки и решётки — например, поле из множества цыплят.

   3. Паттерны и орнаменты

      Создавай повторяющиеся паттерны и орнаменты в p5.js, чередуя цвета и формы внутри циклов для красивых узоров.

   4. Тригонометрия для арта: sin и cos

      Разберись, как sin и cos помогают рисовать волны и круги в p5.js, без сложной математики и на понятных примерах.

   5. Спирали и круговые узоры

      Нарисуй спирали и круговые узоры в p5.js, объединяя циклы с sin и cos и постепенно меняя радиус и угол.

6. 6 Случайность и шум

   1. random(): управляемый хаос

      Освой функцию random() в p5.js: получай случайные числа в диапазоне и добавляй разнообразие в позиции, цвета и размеры.

   2. Шум Перлина: органическая случайность

      Узнай про шум Перлина в p5.js: чем noise() отличается от random() и как получить плавную, природную случайность.

   3. Генеративные ландшафты и линии

      Нарисуй генеративные холмы и волнистые линии в p5.js с помощью шума Перлина — создай мир, по которому гуляет цыплёнок.

   4. Сиды и воспроизводимость

      Разберись, как сиды в p5.js (randomSeed и noiseSeed) делают случайность повторяемой, чтобы любимый кадр можно было получить снова.

7. 7 Трансформации

   1. translate(): сдвигаем мир

      Освой translate() в p5.js: вместо смены координат каждой фигуры сдвигай саму систему координат и рисуй проще.

   2. rotate() и scale()

      Научись поворачивать и масштабировать через rotate() и scale() в p5.js и пойми, почему важна точка вокруг которой идёт поворот.

   3. push() и pop(): стек трансформаций

      Разберись, зачем нужны push() и pop() в p5.js: сохраняй и восстанавливай трансформации, чтобы движения одной фигуры не ломали другие.

   4. Рекурсия: рисуем фрактальное дерево

      Познакомься с рекурсией в p5.js на примере фрактального дерева: функция вызывает сама себя и рисует ветви для гнезда цыплёнка.

8. 8 Векторы и простая физика

   1. p5.Vector: позиция и скорость

      Освой p5.Vector в p5.js: храни позицию и скорость как векторы и складывай их, чтобы аккуратно двигать цыплёнка.

   2. Ускорение, гравитация, ветер

      Добавь ускорение в p5.js: применяй гравитацию и ветер к скорости через векторы, чтобы цыплёнок падал и сносился реалистично.

   3. Притяжение и отталкивание

      Сделай притяжение и отталкивание в p5.js: вычисляй вектор силы между объектами, чтобы цыплёнок тянулся к зерну или убегал от опасности.

   4. Столкновения и границы

      Научись обрабатывать столкновения и границы в p5.js: проверяй расстояние и края холста, чтобы цыплёнок отскакивал и не вылетал за поле.

9. 9 Системы частиц

   1. Класс Particle: ООП в p5

      Познакомься с классами в p5.js: собери частицу-перо в класс Particle с полями и методами, чтобы создавать сколько угодно копий.

   2. Система частиц: фейерверк

      Построй систему частиц в p5.js: храни множество объектов Particle в массиве и устрой фейерверк над цыплёнком.

   3. Эмиттеры и жизненный цикл

      Добавь частицам жизнь и смерть в p5.js: дай каждой частице возраст и удаляй мёртвые из массива, чтобы эмиттер работал бесконечно.

   4. Флокинг: имитация стаи (boids)

      Освой флокинг (boids) в p5.js: три правила — разделение, выравнивание, сплочение — превращают частицы в живую стаю цыплят.

10. 10 Проекты и публикация

    1. Мини-проект: генеративный аватар

       Собери финальный проект курса — генеративный аватар цыплёнка на p5.js, объединив цвет, случайность, трансформации и сиды.

    2. Экспорт, GIF и публикация

       Узнай, как сохранить работу из p5.js: экспорт картинки через saveCanvas, запись GIF и публикация скетча, чтобы поделиться с друзьями.