title

Теория

Креативный код — это способ создавать визуальные формы через алгоритмы и правила. Вместо того чтобы рисовать вручную, ты описываешь систему, которая сама генерирует изображение. Это меняет сам подход: ты работаешь не с формой напрямую, а с логикой её появления. Даже небольшое изменение параметра может полностью изменить визуальный результат.

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

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(240);
}

Функция setup() выполняется один раз при запуске. Здесь ты настраиваешь сцену: задаёшь размер холста и базовые параметры. Функция draw() выполняется постоянно, кадр за кадром. Именно она отвечает за всё, что происходит во времени: движение, анимацию и изменения.

Иногда анимация не нужна, и достаточно отрисовать изображение один раз. Для этого используется функция noLoop(). Она останавливает постоянное выполнение draw() и оставляет только один кадр. Это удобно, когда ты работаешь с генеративной графикой без движения.

Практика

Начнём с очень простого примера. Здесь нет случайности — только повторение одной формы. Это позволит понять, как работает структура, прежде чем добавлять вариации. Сначала посмотри на результат, а потом попробуй изменить параметры.

Здесь используется двойной цикл, который проходит по сетке. Переменная step задаёт расстояние между элементами. Все круги одинаковые — это базовая структура без вариаций. Такой код показывает, как из повторения появляется визуальная система.

Теперь можно добавить вариацию. Даже небольшое изменение размера или цвета сделает композицию более живой. Обрати внимание, что сам алгоритм не меняется — меняются только параметры.

Здесь появляется random(). Размер круга немного меняется при каждой отрисовке. Это добавляет вариативность, но структура остаётся той же. Ты видишь, как простое правило начинает давать разные результаты.

1. step — расстояние между элементами сетки
2. baseSize — базовый размер круга
3. random() — добавляет случайность к размеру и цвету
4. блок if — выбирает один из цветов палитры

Вывод

1. Креативный код строится вокруг правил, а не готовых форм
2. Повторение позволяет создавать сложные структуры из простых элементов
3. Случайность делает результат более живым и вариативным

Задание

Теперь попробуй самостоятельно изменить поведение системы. В коде ниже уже есть готовые варианты — тебе нужно просто раскомментировать строки. Делай это по одной и смотри, как меняется результат.

1. Уменьши step, чтобы сделать сетку плотнее
2. Увеличь baseSize, чтобы круги начали перекрываться
3. Убери random() и сделай все элементы одинаковыми
4. Измени цвета внутри if, чтобы создать свою палитру

1. Раскомментируй строку с x / width и посмотри, как размер меняется по горизонтали
2. Раскомментируй строку с y / height и посмотри, как меняется вертикальный градиент
3. Раскомментируй width * height, и посмотри сочетание узоров
4. Раскомментируй random(), чтобы получить хаотичную композицию
5. Попробуй менять step, чтобы управлять плотностью сетки