title

Теория

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

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

Обычноnoise()используют не сам по себе, а с параметром, который постепенно меняется. Например, можно увеличивать отдельную переменную на небольшой шаг и передавать её в шум. Тогда значение будет меняться плавно во времени. Это один из самых простых способов собрать органическое движение.

let x = noise(t) * width;
t += 0.01;

Здесь переменнаяtпостепенно растёт. Функцияnoise(t)возвращает плавно изменяющееся значение от 0 до 1. Если умножить его на ширину холста, получится координата, которая двигается мягко, без скачков. Так шум превращается в инструмент для движения и деформации.

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

Практика

Начнём с самого простого примера. Пусть шум управляет положением одного круга по горизонтали. Так легче всего заметить разницу между случайным скачком и плавным движением.

Здесь положение круга зависит от noise(). Переменная времени растёт медленно, поэтому и движение получается плавным. Круг не прыгает, а как будто скользит по сцене. Это самый базовый способ использовать шум.

Теперь усложним систему. Пусть шум будет управлять уже не одной точкой, а целой линией. Тогда он начнёт влиять не только на движение, но и на форму.

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

На следующем этапе линия не только деформируется, но и движется во времени. Это делает сцену более живой. Теперь шум управляет уже не просто формой, а её поведением.

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

Вывод

1. random()даёт резкие скачки, а noise() — плавные изменения
2. Шум помогает создавать органические формы и мягкое движение
3. Один и тот же принцип можно применять и к одной точке, и к целой структуре
4. Чем больше элементов управляется шумом, тем сложнее и живее выглядит система

Задание

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

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