Функции распределения

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

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

Контекст обычно включает:

• индекс элемента в группе
• общее количество элементов
• нормализованное значение прогресса (0–1)
• случайное зерно (seed), если требуется вариативность

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

Линейное распределение и нормализация

Наиболее базовая форма распределения — линейная. Она используется, когда требуется равномерное изменение параметра от минимального к максимальному значению.

genui{“math_block_widget_always_prefetch_v2”:{“content”:“f(x)=a+(b-a)x”}}

Где:

• x — нормализованный индекс (0–1)
• a и b — границы диапазона

Такое распределение используется для параметров типа радиуса, угла, задержки анимации.

Равномерное распределение по дискретным элементам

При работе с группами элементов часто используется преобразование индекса:

x_i =

где:

• i — индекс элемента
• N — общее количество элементов

Это создаёт равномерное распределение значений по всей группе.

Случайное распределение

Случайность в mo.js используется для добавления органичности и вариативности. Однако она редко применяется «в чистом виде», чаще — внутри диапазона.

Функция случайного распределения обычно задаётся как:

f(x)=a+(0,1)(b-a)

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

Функции распределения в Burst-анимациях

Модуль Burst в mo.js является ключевым примером применения распределений. При создании всплеска частиц параметры каждой частицы вычисляются через функции:

• угол разлёта
• радиус
• задержка старта
• масштаб
• длительность

Распределение углов часто задаётся через равномерное разбиение круга:

_i = 2

Это формирует симметричную радиальную структуру.

Радиальное распределение и смещения

Чтобы избежать идеальной симметрии, к базовому распределению добавляют смещение:

_i = 2 + _i

где δ_i может быть случайным или зависеть от индекса.

Это создаёт более «живую» геометрию, характерную для органических эффектов.

Распределение задержек анимации

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

Линейное распределение задержки:

d_i = d_0 + k i

где:

• d_i — задержка для элемента
• k — шаг увеличения

При использовании нормализации:

d_i = d_{min} + (d_{max}-d_{min})

Нелинейные распределения

Для более сложных визуальных эффектов используются нелинейные функции. Они позволяют концентрировать элементы в определённых областях.

Классический пример — квадратичное распределение:

genui{“math_block_widget_always_prefetch_v2”:{“content”:“f(x)=x^2”}}

Такая функция смещает плотность значений ближе к началу диапазона.

Также часто применяется обратная парабола:

genui{“math_block_widget_always_prefetch_v2”:{“content”:“f(x)=1-(1-x)^2”}}

Она концентрирует значения ближе к верхней границе.

Распределение радиуса в полярных системах

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

r_i = R

Использование квадратного корня позволяет равномерно распределять точки по площади круга, а не только по радиусу.

Гауссово распределение и псевдо-органика

Для создания природных эффектов применяется приближение нормального распределения:

genui{“math_block_widget_always_prefetch_v2”:{“content”:“f(x)=e^{-}”}}

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

Комбинированные функции распределения

В реальных сценах mo.js распределения редко используются изолированно. Обычно они комбинируются:

• линейное + шум
• нелинейное + случайное смещение
• полярное + гауссово распределение

Пример комбинированной модели:

f(x)= (1-x^2) + ()

где ε управляет уровнем хаотичности.

Дискретизация и ступенчатые распределения

Иногда требуется не плавное, а ступенчатое распределение. Оно используется для группировки элементов:

f(x)=x k / k

Это разбивает диапазон на фиксированное число уровней.

Распределение в пространстве и координатные преобразования

В mo.js распределение часто применяется не только к числам, но и к пространственным координатам. Например, переход от полярной системы к декартовой:

x=r,y=r

Это позволяет строить сложные формы: спирали, кольца, взрывы.

Спиральное распределение

Один из часто используемых паттернов — спираль:

r=a+b

Комбинация роста радиуса и угла создаёт естественное распределение частиц вдоль спирали.

Практическое применение распределений в mo.js

Распределения используются во всех ключевых объектах библиотеки:

• Shape — распределение параметров деформации
• Burst — распределение частиц
• Timeline — распределение времени старта
• Tween — распределение значений свойств

Основная идея заключается в том, что один и тот же механизм применяется к разным сущностям: числа становятся визуальными структурами.

Кастомные функции распределения

Пользовательские функции распределения позволяют создавать уникальные визуальные паттерны. Обычно они строятся на основе:

• индекса элемента
• синусов и косинусов
• случайных значений с фиксированным seed
• интерполяции между несколькими кривыми

Пример волнового распределения:

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

Базовая модель распределения

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

Контекст обычно включает:

• индекс элемента в группе
• общее количество элементов
• нормализованное значение прогресса (0–1)
• случайное зерно (seed), если требуется вариативность

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

Линейное распределение и нормализация

Наиболее базовая форма распределения — линейная. Она используется, когда требуется равномерное изменение параметра от минимального к максимальному значению.

genui{“math_block_widget_always_prefetch_v2”:{“content”:“f(x)=a+(b-a)x”}}

Где:

• x — нормализованный индекс (0–1)
• a и b — границы диапазона

Такое распределение используется для параметров типа радиуса, угла, задержки анимации.

Равномерное распределение по дискретным элементам

При работе с группами элементов часто используется преобразование индекса:

x_i =

где:

• i — индекс элемента
• N — общее количество элементов

Это создаёт равномерное распределение значений по всей группе.

Случайное распределение

Случайность в mo.js используется для добавления органичности и вариативности. Однако она редко применяется «в чистом виде», чаще — внутри диапазона.

Функция случайного распределения обычно задаётся как:

f(x)=a+(0,1)(b-a)

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

Функции распределения в Burst-анимациях

Модуль Burst в mo.js является ключевым примером применения распределений. При создании всплеска частиц параметры каждой частицы вычисляются через функции:

• угол разлёта
• радиус
• задержка старта
• масштаб
• длительность

Распределение углов часто задаётся через равномерное разбиение круга:

_i = 2

Это формирует симметричную радиальную структуру.

Радиальное распределение и смещения

Чтобы избежать идеальной симметрии, к базовому распределению добавляют смещение:

_i = 2 + _i

где δ_i может быть случайным или зависеть от индекса.

Это создаёт более «живую» геометрию, характерную для органических эффектов.

Распределение задержек анимации

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

Линейное распределение задержки:

d_i = d_0 + k i

где:

• d_i — задержка для элемента
• k — шаг увеличения

При использовании нормализации:

d_i = d_{min} + (d_{max}-d_{min})

Нелинейные распределения

Для более сложных визуальных эффектов используются нелинейные функции. Они позволяют концентрировать элементы в определённых областях.

Классический пример — квадратичное распределение:

genui{“math_block_widget_always_prefetch_v2”:{“content”:“f(x)=x^2”}}

Такая функция смещает плотность значений ближе к началу диапазона.

Также часто применяется обратная парабола:

genui{“math_block_widget_always_prefetch_v2”:{“content”:“f(x)=1-(1-x)^2”}}

Она концентрирует значения ближе к верхней границе.

Распределение радиуса в полярных системах

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

r_i = R

Использование квадратного корня позволяет равномерно распределять точки по площади круга, а не только по радиусу.

Гауссово распределение и псевдо-органика

Для создания природных эффектов применяется приближение нормального распределения:

genui{“math_block_widget_always_prefetch_v2”:{“content”:“f(x)=e^{-}”}}

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

Комбинированные функции распределения

В реальных сценах mo.js распределения редко используются изолированно. Обычно они комбинируются:

• линейное + шум
• нелинейное + случайное смещение
• полярное + гауссово распределение

Пример комбинированной модели:

f(x)= (1-x^2) + ()

где ε управляет уровнем хаотичности.

Дискретизация и ступенчатые распределения

Иногда требуется не плавное, а ступенчатое распределение. Оно используется для группировки элементов:

f(x)=x k / k

Это разбивает диапазон на фиксированное число уровней.

Распределение в пространстве и координатные преобразования

В mo.js распределение часто применяется не только к числам, но и к пространственным координатам. Например, переход от полярной системы к декартовой:

x=r,y=r

Это позволяет строить сложные формы: спирали, кольца, взрывы.

Спиральное распределение

Один из часто используемых паттернов — спираль:

r=a+b

Комбинация роста радиуса и угла создаёт естественное распределение частиц вдоль спирали.

Практическое применение распределений в mo.js

Распределения используются во всех ключевых объектах библиотеки:

• Shape — распределение параметров деформации
• Burst — распределение частиц
• Timeline — распределение времени старта
• Tween — распределение значений свойств

Основная идея заключается в том, что один и тот же механизм применяется к разным сущностям: числа становятся визуальными структурами.

Кастомные функции распределения

Пользовательские функции распределения позволяют создавать уникальные визуальные паттерны. Обычно они строятся на основе:

• индекса элемента
• синусов и косинусов
• случайных значений с фиксированным seed
• интерполяции между несколькими кривыми

Пример волнового распределения: