catmull_rom_spline.js

let points = [
  { x: 38, y: 136 },
  { x: 65, y: 89 },
  { x: 99, y: 178 },
  { x: 149, y: 93 },
  { x: 191, y: 163 },
  { x: 227, y: 122 },
  { x: 251, y: 132 },
];
let tension = 0.5;
let steps = 3;

function draw() {
  const p = points,
    n = points.length;
  for (let i = 1, e = n - 2; i < e; i++) {
    this.dragSegment(
      p[i - 1], // used for tangent
      p[i + 0], // "current" point
      p[i + 1], // "next" point
      p[i + 2] // used for tangent
    );
  }
}

function dragSegment(p0, p1, p2, p3) {
  const s = 2 * tension,
    m1 = {
      x: (p2.x - p0.x) / s,
      y: (p2.y - p0.y) / s,
    },
    m2 = {
      x: (p3.x - p1.x) / s,
      y: (p3.y - p1.y) / s,
    };
  console.log('m: ', m1, m2);

  this.addCoordinate(0, p1, p2, m1, m2);
  const step = 1 / steps;
  for (let t = step; t < 1; t += step) {
    this.addCoordinate(t, p1, p2, m1, m2);
  }
  this.addCoordinate(1, p1, p2, m1, m2);
}

function addCoordinate(t, p0, p1, m0, m1) {
  let c = 2 * t ** 3 - 3 * t ** 2,
    c0 = c + 1,
    c1 = t ** 3 - 2 * t ** 2 + t,
    c2 = -c,
    c3 = t ** 3 - t ** 2;

  console.log('c', c0, c1, c2, c3);
  console.log(
    'p: ',
    t,
    p0,
    p1,
    m0,
    m1,
    c0 * p0.x + c1 * m0.x + c2 * p1.x + c3 * m1.x,
    c0 * p0.y + c1 * m0.y + c2 * p1.y + c3 * m1.y
  );
}

draw();