Distance, angle, normalize

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

Расстояние между точками

Для вычисления расстояния между двумя точками используется метод Point#getDistance():

var pointA = new Point(50, 100);
var pointB = new Point(200, 300);

var distance = pointA.getDistance(pointB);
console.log(distance); // возвращает число в пикселях

Особенности использования:

  • Метод возвращает евклидово расстояние, рассчитываемое по формуле:

[ d = ]

  • Для ускорения вычислений в случаях, когда нужно только сравнение расстояний, можно использовать Point#getLength() для векторов, а затем сравнивать квадраты длин, чтобы избежать вычисления корня.

Вычисление угла между точками

Paper.js позволяет легко определять угол в радианах или градусах между двумя точками с помощью метода Point#getAngle() или Point#getAngleInDegrees():

var vector = pointB - pointA;
var angle = vector.angle; // в градусах
  • Значение угла отсчитывается от оси X в положительном направлении, против часовой стрелки.
  • Для получения угла в радианах используется метод Point#angleInRadians:
var radians = vector.angle * Math.PI / 180;
  • Метод особенно полезен для ориентации объектов в пространстве или при создании направленных анимаций.

Нормализация векторов

Нормализация — процесс приведения вектора к единичной длине при сохранении направления. В Paper.js это выполняется методом Point#normalize():

var vector = new Point(3, 4);
vector = vector.normalize();
console.log(vector.length); // 1

Ключевые моменты:

  • После нормализации длина вектора равна 1, но направление сохраняется.
  • Можно масштабировать нормализованный вектор до нужной длины, используя Point#multiply(scalar):
var scaledVector = vector.multiply(100); // длина 100 пикселей
  • Нормализованные векторы широко применяются для движения объектов по направлению, расчета столкновений и создания эффектов ускорения.

Применение вместе: движение по направлению

Соединяя вычисление расстояния, угла и нормализацию, можно создать гибкое управление движением объектов:

var start = new Point(50, 50);
var target = new Point(300, 200);

var direction = target - start;
direction = direction.normalize();

var speed = 5; // пикселей за кадр
var position = start;

function onFrame(event) {
    if (position.getDistance(target) > speed) {
        position = position + direction.multiply(speed);
        circle.position = position;
    }
}

  • Алгоритм:

    1. Вычисляется вектор направления от текущей позиции к цели.
    2. Вектор нормализуется, чтобы получить единичное направление.
    3. Вектор умножается на скорость и прибавляется к позиции.
    4. Расстояние используется для остановки движения у цели.

Работа с углами для поворота объектов

Для вращения объектов в Paper.js углы и нормализация векторов играют важную роль:

var vector = target - start;
var angle = vector.angle;

var path = new Path.Circle(start, 20);
path.rotate(angle);
  • Path#rotate(angle) вращает объект вокруг его центра на заданное количество градусов.
  • Использование нормализованных векторов позволяет управлять скоростью вращения независимо от расстояния до цели.

Советы по оптимизации

  • Для частых вычислений расстояний используйте getLength() и getLengthSquared(), чтобы избежать лишних вычислений корня.
  • Всегда нормализуйте векторы перед умножением на скорость, это делает движения и анимации предсказуемыми.
  • Комбинируйте angle и normalize, чтобы создавать динамическое управление объектами в любой точке сцены.

Итоговое понимание

Методы getDistance(), angle и normalize() образуют базовую триаду для работы с векторной графикой в Paper.js. Они позволяют:

  • точно измерять расстояния,
  • определять направление,
  • управлять движением и ориентацией объектов.

Совмещение этих инструментов открывает возможности для создания сложных анимаций, интерактивных элементов и визуальных эффектов в канвасах.

Оглавление