title

Теория: случайность как материал

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

random() каждый раз возвращает новое независимое значение. Если подставить его в координаты, элементы будут резко перескакивать. Это полезно для рассыпания, выбора, генерации множества разных объектов. noise() работает иначе: соседние значения похожи друг на друга, поэтому шум даёт плавное поле. Его удобно использовать для волн, потоков, рельефа, мягких смещений и узоров, которые выглядят живыми, но не случайными.

В этом уроке мы будем собирать одну визуальную систему: белый фон, фирменные цвета, круги и квадраты, расположенные по строгой сетке. Случайность будет отвечать не за хаос, а за акценты: размер, поворот, смещение и глубину. Так один и тот же мотив можно превратить в плоский орнамент, canvas-композицию и 3D-рельеф.

Ещё один важный параметр — масштаб. В шуме мы обычно умножаем координаты на маленькое число: x * 0.01, y * 0.01. Если число меньше, волна получается крупнее и спокойнее: много соседних ячеек ведут себя почти одинаково. Если число больше, поле становится дробным, напряжённым и более декоративным. Поэтому масштаб шума похож на регулятор характера всей композиции.

В анимации появляется третья координата шума — время. Когда мы передаём noise(x, y, t) и медленно увеличиваем t, узор не перегенерируется заново, а как будто течёт. Это отличает шум от обычного random(): random каждый кадр может дать новый разрыв, а noise сохраняет связь между предыдущим и следующим состоянием.

1. random() даёт независимые значения и хорошо подходит для выбора вариантов.
2. noise() даёт связные значения и хорошо подходит для плавных деформаций.
3. Красивый генеративный результат появляется, когда случайность ограничена системой: сеткой, палитрой, шагом и диапазоном.

let jitter = random(-12, 12); // резкое независимое смещение
let wave = noise(x * 0.01, y * 0.01); // плавное значение поля
let size = map(wave, 0, 1, 16, 64); // перевод шума в размер

Практика: задача

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

Целевой узор: шум управляет размером, поворотом и чередованием кругов с квадратами.

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

Сетка без шума: все ячейки равны, поэтому хорошо виден будущий каркас узора.

Во второй итерации добавим random(). Он быстро делает изображение живее, но каждая ячейка меняется независимо. Если диапазон слишком большой, узор становится похож на набор случайных пятен. Поэтому мы ограничиваем смещение и оставляем шаг сетки неизменным.

Random добавляет вариативность, но пока не создаёт плавных связей между соседними ячейками.

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

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

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

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

Vanilla JS: canvas, собственная функция шума и ручное рисование каждого элемента.

p5.js: тот же рисунок короче, потому что noise(), map(), circle() и rect() уже есть в библиотеке.

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

Three.js: похожий шумовой узор становится 3D-полем из экструдированных плиток и сфер.

Вывод и синтаксис

В этом уроке случайность стала не эффектом, а системой управления. В задаче noise() связывал соседние ячейки и делал орнамент цельным. В вариации та же идея переносилась между средами: в Canvas мы сами описывали инфраструктуру, в p5.js работали ближе к эскизу, а в Three.js использовали шум как высоту и масштаб 3D-плиток.

Главный вывод: random() хорошо подходит для выбора и разовых отличий, а noise() — для поля, движения и плавной связи между элементами. Если ограничить диапазон, палитру, шаг сетки и формы, даже сложный генеративный код будет выглядеть не случайным, а спроектированным.

• random(min, max); // независимое случайное число

  

• noise(x, y, t); // плавное поле: координаты + время

  

• map(value, 0, 1, minValue, maxValue); // переводит шум в нужный диапазон

  

• ctx.arc(x, y, radius, 0, Math.PI * 2); // круг в Canvas API

  

• circle(x, y, size); // круг в p5.js

  

• new THREE.BoxGeometry(w, h, d); // объёмная плитка в Three.js

  

Задание

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

1. Сначала измени только масштаб шума: найди noiseScale и проверь спокойное, среднее и дробное поле.
2. Затем включи одну из строк в блоке формы: сделай узор только из кругов, только из квадратов или из смешанных элементов.
3. После этого включи строку с random() и сравни её с вариантом на noise(): где композиция выглядит собраннее, а где хаотичнее?
4. В финале оставь один лучший набор настроек и подстрой step, чтобы у работы появился нужный ритм и плотность.

Экспериментальный шаблон: включай строки в комментариях и собирай собственный вариант постера.