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, чтобы управлять плотностью сетки