title

Теория

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

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

Контроль повторяемости особенно полезен в учебнике и портфолио. Ты можешь показать не один случайный кадр, а серию: seed 14 — плотный ритм, seed 27 — спокойная сетка, seed 91 — почти плакатная композиция. Тогда генеративная работа становится похожей на дизайн-систему: у неё есть правила, диапазон вариантов и понятный способ вернуться к любой версии.

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

seed = 42; // номер версии
randomSeed(seed); // p5.js повторит random()
noiseSeed(seed); // p5.js повторит noise()
seededRandom(seed); // своя функция для Vanilla JS и Three.js

Практика

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

Сетка

Начнём с плоской сетки. В p5.js повторяемость включается двумя строками: randomSeed() фиксирует случайные размеры и цвета, а noiseSeed() фиксирует плавные смещения. Если поменять seed, получится новая версия; если вернуть число обратно, рисунок восстановится.

p5.js: seed фиксирует random() и noise(), поэтому сетка возвращается к той же версии.

В Vanilla JS такого встроенного метода нет, поэтому используем собственный seededRandom(). Это та же идея, но без библиотек: генератор хранит внутреннее число и каждым вызовом выдаёт следующее значение цепочки.

Vanilla JS: один и тот же seed повторяет Canvas-композицию без сторонних библиотек.

Движение

Теперь seed управляет уже не только положением элементов, но и ритмом движения. В p5.js мы сначала создаём повторяемую карту параметров, а затем анимируем её так, чтобы структура оставалась узнаваемой и не превращалась в хаос.

p5.js: seed создаёт постоянную карту ячеек, а анимация двигает уже сохранённые параметры.

Та же логика работает в Three.js. Seed один раз выбирает высоту, форму, цвет и поворот каждого объекта, а анимация только раскрывает готовую сцену. Поэтому 3D-работа выглядит живой, но её базовая композиция остаётся повторяемой.

Three.js: seed фиксирует рельеф из объёмных элементов, а камера показывает его как сохранённую 3D-версию.

Орбиты

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

p5.js: сложная повторяемая композиция, где seed фиксирует орбиты, цвета и ритм движения.

Вывод

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

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

• randomSeed(seed); // фиксирует random() в p5.js

  

• noiseSeed(seed); // фиксирует noise() в p5.js

  

• const rnd = seededRandom(seed); // создаёт повторяемый генератор

  

• const value = rnd(); // каждый вызов даёт следующее число цепочки

  

• const version = { seed, palette, step }; // сохраняет параметры серии

  

Задание

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

1. Начни с posterSeed: подбери три числа и запиши, чем отличается каждая версия.
2. Затем измени preset: сравни спокойный, плотный и контрастный режимы одной системы.
3. После этого настрой motionMode, чтобы решить, должна ли серия быть почти статичной или медленно двигаться как живой плакат.
4. В финале сохрани лучший seed и проверь, что после перезапуска работа возвращается к той же композиции.

Финальный шаблон: меняй seed и пресеты так, чтобы собрать повторяемую серию из одного алгоритма.