Получение точки на пути по расстоянию

В Two.js путь (Two.Path) представляет собой последовательность сегментов, соединённых кривыми линиями и дугами. Каждый сегмент описывается точкой (Two.Anchor) и опциональными управляющими точками (controlLeft, controlRight) для кривых Безье. Путь может быть открытым или замкнутым, что важно при вычислении положения точки на всём пути.

Для получения точки на пути по расстоянию ключевыми элементами являются:

  • Длина сегмента — расстояние между точками с учётом кривизны (для кривых Безье вычисляется приближённо с помощью делений на малые участки).
  • Суммарная длина пути — сумма длин всех сегментов. Она нужна для нормализации позиции точки по пути.
  • Параметр t — относительное положение точки на сегменте (от 0 до 1), используемое для интерполяции координат.

Интерполяция точек на сегменте

Для линейного сегмента между точками (A(x_0, y_0)) и (B(x_1, y_1)) координаты точки на сегменте вычисляются по формуле:

[ x = x_0 + t (x_1 - x_0)] [ y = y_0 + t (y_1 - y_0)]

Для кривой Безье третьего порядка с точками (P_0, P_1, P_2, P_3) используется стандартная формула:

[ B(t) = (1-t)^3 P_0 + 3(1-t)^2 t P_1 + 3(1-t) t^2 P_2 + t^3 P_3]

Где (t ). Эта формула позволяет вычислить координаты точки по её относительной позиции на кривом сегменте.

Вычисление длины сегмента

Для линейного сегмента длина вычисляется как стандартное евклидово расстояние:

[ L = ]

Для кривой Безье точную длину аналитически вычислить сложно, поэтому обычно применяется численная аппроксимация:

  1. Разбить сегмент на (n) равных интервалов (t_i = i/n), (i = 0..n).
  2. Вычислить координаты каждой точки (B(t_i)) по формуле кривой.
  3. Суммировать расстояния между соседними точками:

[ L _{i=0}^{n-1} ]

Чем больше (n), тем точнее приближение.

Получение точки по расстоянию

Алгоритм получения точки на пути по абсолютному расстоянию d выглядит следующим образом:

  1. Вычислить суммарную длину пути L_total, сложив длины всех сегментов.

  2. Определить, на каком сегменте находится точка:

    • Пройти по сегментам и суммировать длины до тех пор, пока накопленная длина не превысит d.

  3. Найти относительное положение t на сегменте:

[ t = ]

  1. Интерполировать координаты точки на сегменте с использованием формулы линейной интерполяции или кривой Безье.

Практическая реализация в Two.js

Two.js не предоставляет встроенного метода getPointAtDistance, поэтому чаще всего создаётся вспомогательная функция:

function getPointAtDistance(path, distance) {
  let segments = path.vertices;
  let accumulatedLength = 0;

  for (let i = 0; i < segments.length - 1; i++) {
    let p0 = segments[i];
    let p1 = segments[i + 1];
    let dx = p1.x - p0.x;
    let dy = p1.y - p0.y;
    let segmentLength = Math.sqrt(dx*dx + dy*dy);

    if (accumulatedLength + segmentLength >= distance) {
      let t = (distance - accumulatedLength) / segmentLength;
      return {
        x: p0.x + t * dx,
        y: p0.y + t * dy
      };
    }

    accumulatedLength += segmentLength;
  }

  return {x: segments[segments.length - 1].x, y: segments[segments.length - 1].y};
}

Если путь содержит кривые Безье, интерполяция на сегменте заменяется на вычисление B(t) по формуле кривой.

Оптимизация для сложных путей

Для путей с большим числом кривых полезно:

  • Кэшировать длину сегментов при создании пути, чтобы не пересчитывать каждый кадр.
  • Использовать адаптивное деление кривых: увеличивать число точек в областях с сильной кривизной и уменьшать в прямых участках.
  • Предварительно вычислять таблицу t → длина, что позволяет выполнять обратное преобразование из расстояния в t через бинарный поиск.

Дополнительные возможности

  • Замкнутые пути: при превышении длины пути возвращаться к началу.
  • Проекции на путь: можно находить ближайшую точку на пути к произвольной точке (x, y) с помощью перебора сегментов и вычисления расстояний.
  • Анимация объектов по пути: используя вычисление точки по расстоянию и изменяя distance во времени, создаются плавные движения вдоль кривых и линий.

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

Оглавление