Случайные значения через rand

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

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

mojs.rand(0, 100);

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

Использование rand в параметрах анимации

Случайные значения особенно эффективно применяются внутри конфигураций объектов mo.js. Любое числовое свойство может быть заменено на вызов генератора, что делает каждый экземпляр уникальным.

const circle = new mojs.Shape({
  shape: 'circle',
  radius: mojs.rand(20, 80),
  duration: 1000,
  fill: 'cyan'
});

В этом примере каждый новый объект получает собственный радиус. При массовом создании элементов это приводит к естественной неоднородности композиции.

Динамические диапазоны через объектные значения

В mo.js поддерживается формат задания анимации через объект с начальным и конечным значением. В такие конструкции также может быть встроен rand, формируя непредсказуемую траекторию изменения параметра.

const burst = new mojs.Burst({
  radius: { 0: mojs.rand(60, 180) },
  count: 8
});

Здесь максимальный радиус не фиксирован, а вычисляется в момент создания экземпляра. Это приводит к тому, что каждый запуск burst отличается масштабом.

Случайность в массивных эффектах

При работе с множественными частицами rand используется для распределения параметров между дочерними элементами. Особенно это заметно в Burst и staggered-анимациях.

const burst = new mojs.Burst({
  count: 12,
  children: {
    shape: 'circle',
    radius: mojs.rand(5, 25),
    fill: ['red', 'blue', 'green'][Math.floor(mojs.rand(0, 3))]
  }
});

Здесь каждая частица получает собственный радиус и цвет. Подобный подход снижает визуальную регулярность и делает взрыв более «живым».

Использование rand в функциях свойств

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

const line = new mojs.Shape({
  shape: 'line',
  strokeWidth: function () {
    return mojs.rand(1, 6);
  },
  stroke: 'white'
});

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

Комбинирование rand с временными параметрами

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

const tween = new mojs.Tween({
  duration: mojs.rand(300, 1200),
  delay: mojs.rand(0, 500)
});

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

Генерация случайных смещений

rand используется для задания случайных координатных отклонений, особенно в эффектах рассеивания и взрывов.

const particle = new mojs.Shape({
  shape: 'circle',
  x: mojs.rand(-100, 100),
  y: mojs.rand(-100, 100),
  radius: 10
});

Такое распределение формирует облако элементов, равномерно заполняющее пространство вокруг центра.

Стабилизация случайных значений при повторных вызовах

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

const createExplosion = () => new mojs.Burst({
  radius: mojs.rand(50, 150),
  count: mojs.rand(6, 20)
});

Каждый вызов функции создаёт уникальный burst, отличающийся масштабом и количеством элементов.

Влияние rand на композицию сложных сцен

При комбинировании нескольких объектов с независимыми вызовами rand формируется система стохастических параметров. Это особенно важно при построении фоновых анимаций, частиц и декоративных эффектов.

const stars = Array.from({ length: 30 }).map(() => new mojs.Shape({
  shape: 'circle',
  radius: mojs.rand(1, 4),
  x: mojs.rand(-300, 300),
  y: mojs.rand(-200, 200),
  opacity: mojs.rand(0.2, 1)
}));

Результат представляет собой распределённое поле объектов, где каждый элемент имеет собственный набор параметров, не повторяющий остальные.

Особенности применения в производительных сценах

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

Связь rand с визуальной непредсказуемостью

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

const wave = new mojs.Shape({
  shape: 'rect',
  width: mojs.rand(10, 60),
  height: mojs.rand(2, 20),
  angle: mojs.rand(0, 360),
  duration: mojs.rand(500, 1500)
});

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

Оглавление