Утилиты для математических вычислений

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

Работа с векторами

В Two.js объект Two.Vector используется для хранения и вычисления координат в двумерном пространстве. Основные возможности:

let v1 = new Two.Vector(100, 50);
let v2 = new Two.Vector(30, 80);

Методы векторов:

  • add(vector) — сложение с другим вектором:
v1.add(v2); // v1 теперь (130, 130)
  • sub(vector) — вычитание вектора:
v1.sub(v2); // v1 теперь (100, 50)
  • multiply(scalar) — умножение на число (масштабирование):
v1.multiply(2); // v1 теперь (200, 100)
  • length() — длина вектора, вычисляется как ().
  • normalize() — нормализация, преобразует вектор к единичной длине, сохраняя направление.
  • dot(vector) — скалярное произведение, полезно для вычисления угла между векторами.
  • distanceTo(vector) — расстояние между двумя точками.

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

let velocity = new Two.Vector(2, 3);
let position = new Two.Vector(50, 50);
position.add(velocity);

Математические константы и функции

Two.js содержит ряд статических методов для удобного выполнения вычислений:

  • Two.Utils.clamp(value, min, max) — ограничение значения в пределах заданного диапазона.
  • Two.Utils.map(value, inMin, inMax, outMin, outMax) — преобразование значения из одного диапазона в другой.
  • Two.Utils.lerp(start, end, t) — линейная интерполяция между start и end по коэффициенту t (от 0 до 1).

Пример:

let value = Two.Utils.lerp(0, 100, 0.3); // 30
let clamped = Two.Utils.clamp(150, 0, 100); // 100
let mapped = Two.Utils.map(0.5, 0, 1, 100, 200); // 150

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

Работа с кривыми и углами

Two.js предоставляет методы для работы с кривыми Безье, синусоидальными и другими кривыми:

  • Two.Utils.mod(a, b) — безопасное вычисление остатка с поддержкой отрицательных чисел.
  • Two.Utils.toFixed(value, precision) — округление числа до заданного количества знаков.
  • Two.Utils.angleBetween(x1, y1, x2, y2) — вычисление угла между двумя точками в радианах.
  • Two.Utils.noise(x) — генерация перлин-шумоподобного значения для создания органических движений.

Пример вычисления угла и нормализации кривой:

let angle = Two.Utils.angleBetween(0, 0, 10, 10); // 0.785398... радиан
let vector = new Two.Vector(10, 0).normalize(); // единичный вектор

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

Two.js имеет встроенные утилиты для случайных чисел:

  • Two.Utils.random(min, max) — случайное число между min и max.
  • Two.Utils.randomInterval(min, max) — альтернатива с тем же функционалом.
  • Two.Utils.randomSign() — случайный выбор между 1 и -1.

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

let x = Two.Utils.random(0, 500);
let y = Two.Utils.random(0, 500);
let direction = Two.Utils.randomSign(); // -1 или 1

Матричные преобразования

Two.js поддерживает работу с 2×3 матрицами для аффинных преобразований:

  • translate(x, y) — смещение объекта.
  • rotate(angle) — вращение объекта вокруг центра.
  • scale(sx, sy) — масштабирование по осям.
  • applyToVector(vector) — применение матрицы к вектору.

Пример комбинированного преобразования:

let matrix = new Two.Matrix().translate(50, 100).rotate(Math.PI / 4);
let point = new Two.Vector(10, 0);
matrix.applyToVector(point); // изменяет координаты точки

Практическое применение

Использование этих утилит позволяет:

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

Все функции Two.js оптимизированы для производительности и могут использоваться как в браузере, так и в серверной среде с Node.js для генерации графики.

Эти утилиты составляют основу математического аппарата Two.js и являются ключевым инструментом для создания сложной динамической графики на JavaScript.

Оглавление