Coupled Pendulum Chain

// Five pendulums coupled by springs in a chain. Small-angle regime:
// theta_i'' = -(g/L) theta_i - k (theta_i - theta_{i-1}) - k (theta_i - theta_{i+1}).
// Velocity-Verlet (symplectic) keeps energy bounded so the beating pattern
// stays clean. Leftmost pendulum starts displaced; energy beats along the
// chain via interference between the five normal modes.
const N = 5;
const G = 9.81;
const L = 1.0;
const W2 = G / L;
const K = 0.45 * W2;       // spring coupling (rad/s^2 per rad of stretch)
const SUBSTEPS = 6;
const TRAIL_LEN = 220;
const AMP_REF = 0.6;

let theta, omega, accel, aNew, trail, head, t0;

function accelAt(out, th) {
  for (let i = 0; i < N; i++) {
    let a = -W2 * th[i];
    if (i > 0)     a -= K * (th[i] - th[i - 1]);
    if (i < N - 1) a -= K * (th[i] - th[i + 1]);
    out[i] = a;
  }
}

function reset() {
  for (let i = 0; i < N; i++) { theta[i] = 0; omega[i] = 0; }
  theta[0] = 0.55;
  accelAt(accel, theta);
  for (let i = 0; i < N; i++)
    for (let j = 0; j < TRAIL_LEN; j++) trail[i * TRAIL_LEN + j] = theta[i];
  head = 0;
  t0 = performance.now() / 1000;
}

function init() {
  theta = new Float32Array(N);
  omega = new Float32Array(N);
  accel = new Float32Array(N);
  aNew = new Float32Array(N);
  trail = new Float32Array(N * TRAIL_LEN);
  reset();
}

function step(dt) {
  for (let i = 0; i < N; i++)
    theta[i] += omega[i] * dt + 0.5 * accel[i] * dt * dt;
  accelAt(aNew, theta);
  for (let i = 0; i < N; i++) {
    omega[i] += 0.5 * (accel[i] + aNew[i]) * dt;
    accel[i] = aNew[i];
  }
}

function tick({ ctx, dt, width, height, input }) {
  if (input.consumeClicks().length > 0) reset();

  const h = Math.min(dt, 1 / 30) / SUBSTEPS;
  for (let s = 0; s < SUBSTEPS; s++) step(h);

  for (let i = 0; i < N; i++) trail[i * TRAIL_LEN + head] = theta[i];
  head = (head + 1) % TRAIL_LEN;

  const bg = ctx.createLinearGradient(0, 0, 0, height);
  bg.addColorStop(0, "#0a0f1c");
  bg.addColorStop(1, "#02040a");
  ctx.fillStyle = bg;
  ctx.fillRect(0, 0, width, height);

  const sceneH = height * 0.62;
  const sparkY0 = sceneH + 6;
  const sparkH = height - sparkY0 - 22;
  const padX = Math.max(28, width * 0.08);
  const spacing = (width - 2 * padX) / (N - 1);
  const barY = sceneH * 0.16;
  const Lpx = Math.min(sceneH * 0.68, spacing * 1.05);

  ctx.strokeStyle = "#3a4a66";
  ctx.lineWidth = 5;
  ctx.beginPath();
  ctx.moveTo(padX - spacing * 0.4, barY);
  ctx.lineTo(padX + spacing * (N - 1) + spacing * 0.4, barY);
  ctx.stroke();

  const px = new Float32Array(N), py = new Float32Array(N);
  for (let i = 0; i < N; i++) {
    const pivX = padX + i * spacing;
    px[i] = pivX + Math.sin(theta[i]) * Lpx;
    py[i] = barY + Math.cos(theta[i]) * Lpx;
  }

  // Springs between bobs
  ctx.lineWidth = 1.2;
  for (let i = 0; i < N - 1; i++) {
    const x1 = px[i], y1 = py[i], x2 = px[i + 1], y2 = py[i + 1];
    const dx = x2 - x1, dy = y2 - y1;
    const len = Math.hypot(dx, dy) || 1;
    const nx = -dy / len, ny = dx / len;
    const stretch = theta[i + 1] - theta[i];
    const amp = 5 + Math.min(6, Math.abs(stretch) * 18);
    ctx.strokeStyle = `hsla(${180 + stretch * 90}, 70%, 65%, 0.7)`;
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    for (let s = 1; s < 10; s++) {
      const t = s / 10;
      const sgn = s % 2 === 0 ? 1 : -1;
      ctx.lineTo(x1 + dx * t + nx * amp * sgn, y1 + dy * t + ny * amp * sgn);
    }
    ctx.lineTo(x2, y2);
    ctx.stroke();
  }

  // Rods and bobs
  for (let i = 0; i < N; i++) {
    const pivX = padX + i * spacing;
    const hue = (i / (N - 1)) * 280;

    ctx.strokeStyle = "rgba(220,230,255,0.55)";
    ctx.lineWidth = 1.4;
    ctx.beginPath();
    ctx.moveTo(pivX, barY);
    ctx.lineTo(px[i], py[i]);
    ctx.stroke();

    ctx.fillStyle = "#9fb0c8";
    ctx.beginPath();
    ctx.arc(pivX, barY, 2.4, 0, Math.PI * 2);
    ctx.fill();

    const r = 11;
    const grad = ctx.createRadialGradient(px[i], py[i], 1, px[i], py[i], r * 2.8);
    grad.addColorStop(0, `hsla(${hue}, 95%, 78%, 0.95)`);
    grad.addColorStop(0.45, `hsla(${hue}, 85%, 55%, 0.45)`);
    grad.addColorStop(1, `hsla(${hue}, 80%, 40%, 0)`);
    ctx.fillStyle = grad;
    ctx.beginPath();
    ctx.arc(px[i], py[i], r * 2.8, 0, Math.PI * 2);
    ctx.fill();

    ctx.fillStyle = `hsl(${hue}, 90%, 60%)`;
    ctx.beginPath();
    ctx.arc(px[i], py[i], r, 0, Math.PI * 2);
    ctx.fill();

    ctx.fillStyle = "rgba(255,255,255,0.55)";
    ctx.beginPath();
    ctx.arc(px[i] - r * 0.35, py[i] - r * 0.35, r * 0.3, 0, Math.PI * 2);
    ctx.fill();
  }

  // Sparkline strip: one cell per pendulum, angle vs time, normalized.
  const cellW = (width - 2 * padX) / N;
  const rowH = sparkH;
  for (let i = 0; i < N; i++) {
    const x0 = padX + i * cellW + 4;
    const y0 = sparkY0;
    const w = cellW - 8;
    const hue = (i / (N - 1)) * 280;

    ctx.fillStyle = "rgba(255,255,255,0.03)";
    ctx.fillRect(x0, y0, w, rowH);
    ctx.strokeStyle = "rgba(255,255,255,0.08)";
    ctx.lineWidth = 1;
    ctx.strokeRect(x0 + 0.5, y0 + 0.5, w - 1, rowH - 1);
    ctx.strokeStyle = "rgba(255,255,255,0.12)";
    ctx.beginPath();
    ctx.moveTo(x0, y0 + rowH / 2);
    ctx.lineTo(x0 + w, y0 + rowH / 2);
    ctx.stroke();

    ctx.strokeStyle = `hsl(${hue}, 90%, 65%)`;
    ctx.lineWidth = 1.3;
    ctx.beginPath();
    for (let j = 0; j < TRAIL_LEN; j++) {
      const idx = (head + j) % TRAIL_LEN;
      const v = trail[i * TRAIL_LEN + idx] / AMP_REF;
      const xx = x0 + (j / (TRAIL_LEN - 1)) * w;
      const yy = y0 + rowH / 2 - Math.max(-1, Math.min(1, v)) * (rowH / 2 - 2);
      if (j === 0) ctx.moveTo(xx, yy); else ctx.lineTo(xx, yy);
    }
    ctx.stroke();

    ctx.fillStyle = `hsla(${hue}, 90%, 75%, 0.85)`;
    ctx.font = "10px system-ui, sans-serif";
    ctx.fillText(`p${i + 1}`, x0 + 4, y0 + 11);
  }

  const t = performance.now() / 1000 - t0;
  ctx.fillStyle = "rgba(220,230,245,0.55)";
  ctx.font = "12px monospace";
  ctx.fillText(
    `N=5  L=${L.toFixed(2)}m  k/w0^2=${(K / W2).toFixed(2)}  t=${t.toFixed(1)}s  (click to reset)`,
    12, height - 6
  );
}