Spring chain

let nodes = [];
let REST = 14;
const N = 24;
const GRAV = 1400;
const DAMP = 0.995;
const ITER = 14;

function init({ width, height }) {
  REST = Math.max(8, Math.min(22, Math.floor(height * 0.5 / N)));
  nodes = [];
  for (let i = 0; i < N; i++) {
    const y = height * 0.15 + i * REST;
    nodes.push({ x: width/2, y, px: width/2, py: y });
  }
}

function tick({ ctx, dt, frame, width, height }) {
  // Anchor sways slowly side-to-side.
  const ax = width / 2 + Math.sin(frame * 0.018) * width * 0.28;
  const ay = height * 0.15;

  // Verlet step for every node except the anchor: velocity is implicit
  // in (x - prev_x), gravity is a position offset of g*dt².
  const gOffset = GRAV * dt * dt;
  for (let i = 1; i < N; i++) {
    const n = nodes[i];
    const vx = (n.x - n.px) * DAMP;
    const vy = (n.y - n.py) * DAMP;
    n.px = n.x; n.py = n.y;
    n.x += vx;
    n.y += vy + gOffset;
  }
  nodes[0].x = ax; nodes[0].y = ay;
  nodes[0].px = ax; nodes[0].py = ay;

  // Relaxation pass: pull every consecutive pair back to rest length.
  // Anchor stays pinned each iteration so the chain hangs from it.
  for (let k = 0; k < ITER; k++) {
    for (let i = 1; i < N; i++) {
      const a = nodes[i-1], b = nodes[i];
      const dx = b.x - a.x, dy = b.y - a.y;
      const d = Math.hypot(dx, dy) || 0.0001;
      const corr = (d - REST) / d;
      if (i === 1) {
        b.x -= dx * corr;
        b.y -= dy * corr;
      } else {
        const half = corr * 0.5;
        a.x += dx * half; a.y += dy * half;
        b.x -= dx * half; b.y -= dy * half;
      }
    }
    nodes[0].x = ax; nodes[0].y = ay;
  }

  // Soft trail fade rather than full clear, so the swing is visible.
  ctx.fillStyle = "rgba(8, 10, 16, 0.22)";
  ctx.fillRect(0, 0, width, height);

  ctx.strokeStyle = "#34d399";
  ctx.lineWidth = 2;
  ctx.lineCap = "round";
  ctx.lineJoin = "round";
  ctx.beginPath();
  ctx.moveTo(nodes[0].x, nodes[0].y);
  for (let i = 1; i < N; i++) ctx.lineTo(nodes[i].x, nodes[i].y);
  ctx.stroke();

  for (let i = 0; i < N; i++) {
    const n = nodes[i];
    ctx.beginPath();
    ctx.arc(n.x, n.y, i === 0 ? 5 : 3, 0, Math.PI*2);
    ctx.fillStyle = i === 0 ? "#fbbf24" : "#a7f3d0";
    ctx.fill();
  }
}