title

Теория

Циклы — это основа генерации. Они позволяют повторять одно и то же действие много раз, не копируя код вручную. Именно черезциклысоздаются сетки, паттерны и структуры. Простая форма, повторённая по правилу, превращается в цельную композицию.

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

for (let x = 0; x < width; x += step) {
  ellipse(x, 100, 40);
}

Циклforсостоит из трёх частей: начального значения, условия и шага. Сначала задаётся переменная, потом проверяется, можно ли продолжать повторение, и в конце указывается, как значение должно изменяться. Пока условие остаётся истинным, код внутри фигурных скобок будет выполняться снова и снова. Именно так из одной команды появляется целый ряд элементов.

Один цикл создаёт повторение в одном направлении — например, по горизонтали. Если вложить один цикл в другой, получится повторение сразу по двум осям. Так строятся сетки, которые особенно важны для генеративной графики. Внутренний цикл отвечает за строку, а внешний — за переход к следующей строке.

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

Практика

Начнём с одного цикла. Он создаёт горизонтальный ряд одинаковых кругов. Здесь особенно хорошо видно, как шаг между элементами формирует ритм.

Здесь работает одинцикл, который идёт по осиx. На каждом шаге он рисует круг в новой позиции. Переменнаяstepзадаёт расстояние между элементами, а значит и общий ритм композиции. Чем меньше шаг, тем плотнее выглядит ряд.

Теперь добавим второй цикл. Он позволит повторять фигуры не только по горизонтали, но и по вертикали. Так из одного ряда получится полноценная сетка.

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

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

Вывод

1. Цикл позволяет повторять одно действие много раз без копирования кода
2. Один цикл создаёт ряд, а два вложенных цикла — сетку
3. Шаг цикла напрямую влияет на ритм и плотность композиции

Задание

Попробуй изменить ритм сетки самостоятельно. В коде ниже уже подготовлены несколько вариантов — тебе нужно раскомментировать строки и посмотреть, как перестраивается композиция. Обращай внимание на то, как меняется не одна фигура, а вся система целиком.

1. Раскомментируй строку с step = width / 8, чтобы сделать сетку плотнее
2. Раскомментируй строку с size = step * 0.4, чтобы уменьшить все элементы
3. Раскомментируй условие с x > width / 2, чтобы изменить ритм в правой части экрана
4. Попробуй комбинировать изменения и наблюдать, как меняется общий баланс