Pendulum Wave

let state;

function init({ canvas, ctx, width, height, input }) {
  const N = 15;
  const N0 = 51;
  const T = 60;
  const g = 9.81;
  const pxPerMeter = (height * 0.78) / (g / Math.pow(2 * Math.PI * N0 / T, 2));
  const pends = [];
  for (let n = 0; n < N; n++) {
    const omega = 2 * Math.PI * (N0 + n) / T;
    const L = g / (omega * omega);
    pends.push({
      omega,
      L,
      Lpx: L * pxPerMeter,
      hue: (n / N) * 320,
    });
  }
  state = {
    pends,
    N,
    theta0: 0.55,
    t0: performance.now() / 1000,
    pxPerMeter,
  };
}

function tick({ ctx, dt, frame, time, width, height, input }) {
  const clicks = input.consumeClicks();
  if (clicks.length > 0) {
    state.t0 = performance.now() / 1000;
  }

  const bg = ctx.createLinearGradient(0, 0, 0, height);
  bg.addColorStop(0, "#08101c");
  bg.addColorStop(1, "#020308");
  ctx.fillStyle = bg;
  ctx.fillRect(0, 0, width, height);

  ctx.fillStyle = "rgba(255,255,255,0.04)";
  for (let i = 0; i < 40; i++) {
    const x = (i * 9301 + 49297) % width;
    const y = (i * 233 + 17) % (height * 0.9);
    ctx.fillRect(x, y, 1, 1);
  }

  const t = performance.now() / 1000 - state.t0;
  const N = state.N;

  const barY = height * 0.08;
  const spacing = Math.min(width / (N + 2), 60);
  const totalW = spacing * (N - 1);
  const startX = (width - totalW) / 2;

  ctx.strokeStyle = "#3a4a66";
  ctx.lineWidth = 6;
  ctx.beginPath();
  ctx.moveTo(startX - spacing * 0.6, barY);
  ctx.lineTo(startX + totalW + spacing * 0.6, barY);
  ctx.stroke();

  ctx.fillStyle = "#1c2434";
  ctx.fillRect(startX - spacing * 0.6, barY - 10, totalW + spacing * 1.2, 4);

  const positions = [];
  for (let n = 0; n < N; n++) {
    const p = state.pends[n];
    const theta = state.theta0 * Math.cos(p.omega * t);
    const px = startX + n * spacing;
    const bobX = px + Math.sin(theta) * p.Lpx;
    const bobY = barY + Math.cos(theta) * p.Lpx;
    positions.push({ pivotX: px, bobX, bobY, hue: p.hue, theta });
  }

  ctx.lineWidth = 1;
  for (let n = 0; n < N; n++) {
    const p = state.pends[n];
    const px = startX + n * spacing;
    ctx.strokeStyle = `hsla(${p.hue}, 70%, 55%, 0.08)`;
    ctx.beginPath();
    const steps = 24;
    for (let s = 0; s <= steps; s++) {
      const a = -state.theta0 + (2 * state.theta0 * s) / steps;
      const x = px + Math.sin(a) * p.Lpx;
      const y = barY + Math.cos(a) * p.Lpx;
      if (s === 0) ctx.moveTo(x, y);
      else ctx.lineTo(x, y);
    }
    ctx.stroke();
  }

  ctx.lineWidth = 1.2;
  for (let n = 0; n < N; n++) {
    const pos = positions[n];
    ctx.strokeStyle = `hsla(${pos.hue}, 50%, 70%, 0.55)`;
    ctx.beginPath();
    ctx.moveTo(pos.pivotX, barY);
    ctx.lineTo(pos.bobX, pos.bobY);
    ctx.stroke();

    ctx.fillStyle = "#9fb0c8";
    ctx.beginPath();
    ctx.arc(pos.pivotX, barY, 2.2, 0, Math.PI * 2);
    ctx.fill();
  }

  for (let n = 0; n < N; n++) {
    const pos = positions[n];
    const r = 9;
    const grad = ctx.createRadialGradient(pos.bobX, pos.bobY, 1, pos.bobX, pos.bobY, r * 3);
    grad.addColorStop(0, `hsla(${pos.hue}, 90%, 75%, 0.9)`);
    grad.addColorStop(0.4, `hsla(${pos.hue}, 85%, 55%, 0.5)`);
    grad.addColorStop(1, `hsla(${pos.hue}, 80%, 40%, 0)`);
    ctx.fillStyle = grad;
    ctx.beginPath();
    ctx.arc(pos.bobX, pos.bobY, r * 3, 0, Math.PI * 2);
    ctx.fill();

    ctx.fillStyle = `hsl(${pos.hue}, 90%, 60%)`;
    ctx.beginPath();
    ctx.arc(pos.bobX, pos.bobY, r, 0, Math.PI * 2);
    ctx.fill();

    ctx.strokeStyle = `hsla(${pos.hue}, 100%, 85%, 0.9)`;
    ctx.lineWidth = 1.2;
    ctx.stroke();

    ctx.fillStyle = "rgba(255,255,255,0.55)";
    ctx.beginPath();
    ctx.arc(pos.bobX - r * 0.35, pos.bobY - r * 0.35, r * 0.32, 0, Math.PI * 2);
    ctx.fill();
  }

  const cycle = t % 60;
  ctx.fillStyle = "rgba(220,230,245,0.55)";
  ctx.font = "12px monospace";
  ctx.fillText(`t = ${cycle.toFixed(2)}s / 60.00s  (click to reset)`, 12, height - 14);
}