title

Теория

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

Главное отличие рекурсии от цикла — в том, как мы думаем о структуре. Цикл повторяет действие рядом: клетка за клеткой, круг за кругом, кадр за кадром. Рекурсия повторяет действие внутри самого действия: круг содержит круги, ветка содержит ветки, портал содержит следующий портал. Поэтому рекурсия хорошо подходит для изображений, где есть вложенность, самоподобие и ощущение глубины.

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

function drawRecursive(size, depth) {
  if (depth === 0 || size < 4) return; // базовый случай
  drawShape(size);
  drawRecursive(size * 0.7, depth - 1); // шаг рекурсии
}

В дизайне рекурсия работает особенно выразительно, если у каждого уровня есть поворот, масштаб и смещение. Эти три параметра дают ощущение роста: элементы не просто уменьшаются, а собираются в ритм. Чем меньше коэффициент масштаба, тем быстрее композиция сжимается к центру. Чем больше поворот, тем сильнее появляется спираль. А смещение решает, будет ли система похожа на дерево, тоннель, розетку или модульный орнамент.

1. Базовый случай защищает код от бесконечного вызова и задаёт финальную детализацию.
2. Шаг рекурсии меняет параметры: уменьшает размер, глубину, прозрачность, угол или дистанцию.
3. Визуальная сила рекурсии появляется из самоподобия: каждый уровень похож на предыдущий, но чуть изменён.

Практика: вариация

Ниже одна идея показана тремя способами: на Vanilla JS, p5.js и Three.js. В каждом примере есть рекурсивная функция, базовый случай и параметры, которые становятся меньше или глубже на каждом уровне. Визуально это разные работы, но логика у них общая: форма рождает следующую форму.

Vanilla JS: Canvas рисует рекурсивную розетку. Каждый уровень уменьшает радиус, поворачивает систему и запускает две новые ветви.

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

p5.js: та же идея становится пластичнее. translate(), rotate() и push()/pop() позволяют описывать вложенность почти как сборку подвижного орнамента.

В p5.js рекурсивные структуры удобно строить через локальные системы координат. Мы переносим начало координат в центр формы, поворачиваем сцену, рисуем уровень и вызываем функцию ещё раз. push() и pop() важны: они сохраняют состояние холста, чтобы поворот одной ветки не сломал остальные.

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

В 3D рекурсия легко превращается в иллюзию бесконечности. Мы строим серию вложенных порталов: каждый следующий меньше, дальше и чуть повёрнут. Камера проходит сквозь слои, но когда ближайший портал остаётся позади, он переносится в конец последовательности. Так возникает ощущение, что система постоянно приближается к своей копии.

Вывод

Рекурсия помогает мыслить не отдельными объектами, а правилами роста. Если цикл отвечает за количество повторов, то рекурсия отвечает за отношения между уровнями: что считать родителем, что считать дочерней формой и как меняется масштаб при переходе вглубь.

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

• if (depth <= 0) return; // базовый случай останавливает рекурсию

  

• recursive(size * 0.72, depth - 1); // следующий уровень меньше и ближе к завершению

  

• push(); // сохраняет текущие координаты в p5.js

  

• pop(); // возвращает координаты после рекурсивной ветки

  

• group.add(child); // добавляет вложенный объект в Three.js

  

Задание

Сделай собственную рекурсивную эмблему на p5.js. В коде уже есть несколько художественных настроек: глубина, коэффициент масштаба, угол и режим формы. Меняй их по одному и смотри, как одна и та же функция превращается то в плотный знак, то в лёгкую спираль, то в почти архитектурный узор.

1. Начни с maxDepth: уменьши значение до 4, затем увеличь до 8 и сравни плотность композиции.
2. Подстрой scaleStep: маленькое значение быстро собирает форму в центр, большое оставляет больше воздуха между уровнями.
3. Измени branchAngle и проверь, когда система выглядит как орнамент, а когда — как движение.
4. В финале выбери один shapeMode и доведи работу до цельной графической серии: сделай три версии с разной глубиной, но одной палитрой.

Задание: настрой рекурсивную эмблему. Код специально оставлен параметрическим, чтобы можно было собрать несколько разных версий из одного правила.