Алгоритм для анимации точки по замкнутому пути, как квадрат или треугольник на холсте?

Question

Как оживить точку на замкнутом пути. В приведенном ниже примере я мог бы добавить в пиксель pu sh, но мне интересно, есть ли лучшее математическое (y) решение для анимации по пути.

CodeSandbox

Примечание: я использую ctx.drawImg() для представления точки, потому что я хочу, чтобы точка вращалась вдоль траектории (изображение под кодом).

import "./styles.scss";
import o from "./letters/0.svg";

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const arena = 500;
const margin = 60;
const edge = arena - margin;

let data = [o];
var imgEls = [];

function drawArena() {
  ctx.beginPath();
  ctx.lineWidth = "3";
  ctx.strokeStyle = "DeepSkyBlue";
  const origin = [margin, margin];
  ctx.moveTo(...origin);
  ctx.lineTo(edge, margin);
  ctx.lineTo(edge, edge);
  ctx.lineTo(margin, edge);
  ctx.lineTo(...origin);
  ctx.stroke();
}

function loadImages() {
  return data.map((item, i) => {
    return new Promise((res, rej) => {
      let img = new Image();
      let svg = new Blob([item], { type: "image/svg+xml" });
      let url = window.URL.createObjectURL(svg);
      img.onload = () => {
        imgEls.push(img);

        window.URL.revokeObjectURL(url);
        console.log("loaded");
        res(img);
      };
      img.src = url;
    });
  });
}

Promise.all(loadImages()).then(() => {
  // window.requestAnimationFrame(draw);
  draw();
});

function draw(t) {
  // window.requestAnimationFrame(draw);
  drawArena();
  imgEls.forEach((img, index) => {
    const offset = index * img.width;
    const x = margin + offset;
    const y = margin - img.height;

    ctx.drawImage(img, x, y);
  });
}

Answer 1

Если вы просто отслеживаете между 2 точками; Вы ищете линейную интерполяцию.

Вот что это такое :

В математике линейная интерполяция - это метод подбора кривой с использованием линейных полиномов для построения новые точки данных в диапазоне дискретного набора известных точек данных.

демо в P5 js

и простая реализация в JS

function lerp(v0, v1, t) {
    return v0*(1-t)+v1*t
}

через https://github.com/mattdesl/lerp/blob/master/index.js

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