Double Pendulum: Lagrangian Trails

let hueOffset, pivotX, pivotY, scale;
let a1 = 0, a2 = 0, w1 = 0, w2 = 0;     // pendulum state
const L1 = 1.0, L2 = 1.0, M1 = 1.0, M2 = 1.0, G = 9.81;
const TRAIL_MAX = 1400;
const SUBSTEPS = 8;
const trailX = new Float32Array(TRAIL_MAX);
const trailY = new Float32Array(TRAIL_MAX);
let trailHead = 0, trailCount = 0;

// Scratch buffers for rk4 — avoid per-step allocations.
const _k = new Float64Array(16); // k1..k4 of length 4 each
const _tmp = new Float64Array(4);

// Computes derivs into out[0..3] from (A1, A2, W1, W2).
function derivs(A1, A2, W1, W2, out, base) {
  const d = A1 - A2;
  const sd = Math.sin(d), cd = Math.cos(d);
  const denom1 = (2 * M1 + M2 - M2 * Math.cos(2 * d));
  const den2 = L2 * denom1;
  const den1 = L1 * denom1;
  const dw1 = (-G * (2 * M1 + M2) * Math.sin(A1)
    - M2 * G * Math.sin(A1 - 2 * A2)
    - 2 * sd * M2 * (W2 * W2 * L2 + W1 * W1 * L1 * cd)) / den1;
  const dw2 = (2 * sd * (W1 * W1 * L1 * (M1 + M2)
    + G * (M1 + M2) * Math.cos(A1)
    + W2 * W2 * L2 * M2 * cd)) / den2;
  out[base]     = W1;
  out[base + 1] = W2;
  out[base + 2] = dw1;
  out[base + 3] = dw2;
}

function rk4(dt) {
  derivs(a1, a2, w1, w2, _k, 0);
  derivs(a1 + 0.5 * dt * _k[0], a2 + 0.5 * dt * _k[1], w1 + 0.5 * dt * _k[2], w2 + 0.5 * dt * _k[3], _k, 4);
  derivs(a1 + 0.5 * dt * _k[4], a2 + 0.5 * dt * _k[5], w1 + 0.5 * dt * _k[6], w2 + 0.5 * dt * _k[7], _k, 8);
  derivs(a1 + dt * _k[8],       a2 + dt * _k[9],       w1 + dt * _k[10],      w2 + dt * _k[11],      _k, 12);
  const c = dt / 6;
  a1 += c * (_k[0] + 2 * _k[4] + 2 * _k[8]  + _k[12]);
  a2 += c * (_k[1] + 2 * _k[5] + 2 * _k[9]  + _k[13]);
  w1 += c * (_k[2] + 2 * _k[6] + 2 * _k[10] + _k[14]);
  w2 += c * (_k[3] + 2 * _k[7] + 2 * _k[11] + _k[15]);
  // silence unused-buffer lint
  void _tmp;
}

function randomize() {
  a1 = (Math.random() - 0.5) * 2 * Math.PI * 0.9 + Math.PI * 0.6;
  a2 = (Math.random() - 0.5) * 2 * Math.PI * 0.9 + Math.PI * 0.6;
  w1 = (Math.random() - 0.5) * 1.5;
  w2 = (Math.random() - 0.5) * 1.5;
  trailHead = 0; trailCount = 0;
  hueOffset = Math.random() * 360;
}

function init({ canvas, ctx, width, height }) {
  pivotX = width / 2;
  pivotY = height * 0.38;
  scale = Math.min(width, height) * 0.22;
  randomize();
}

function tick({ ctx, dt, width, height, input }) {
  if (pivotX !== width / 2) {
    pivotX = width / 2;
    pivotY = height * 0.38;
    scale = Math.min(width, height) * 0.22;
  }
  const clicks = input.consumeClicks();
  if (clicks.length > 0) randomize();

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

  const x1 = pivotX + Math.sin(a1) * L1 * scale;
  const y1 = pivotY + Math.cos(a1) * L1 * scale;
  const x2 = x1 + Math.sin(a2) * L2 * scale;
  const y2 = y1 + Math.cos(a2) * L2 * scale;

  trailX[trailHead] = x2;
  trailY[trailHead] = y2;
  trailHead = (trailHead + 1) % TRAIL_MAX;
  if (trailCount < TRAIL_MAX) trailCount++;
  hueOffset += 0.6;

  ctx.fillStyle = "rgba(8, 10, 20, 1)";
  ctx.fillRect(0, 0, width, height);

  const grd = ctx.createRadialGradient(pivotX, pivotY, 0, pivotX, pivotY, Math.max(width, height) * 0.7);
  grd.addColorStop(0, "rgba(30, 20, 60, 0.5)");
  grd.addColorStop(1, "rgba(5, 5, 12, 0)");
  ctx.fillStyle = grd;
  ctx.fillRect(0, 0, width, height);

  ctx.lineCap = "round";
  ctx.lineJoin = "round";
  const n = trailCount;
  const startIdx = (trailHead - n + TRAIL_MAX) % TRAIL_MAX;
  for (let i = 1; i < n; i++) {
    const t = i / n;
    const i0 = (startIdx + i - 1) % TRAIL_MAX;
    const i1 = (startIdx + i) % TRAIL_MAX;
    const hue = (hueOffset + t * 280) % 360;
    const alpha = Math.pow(t, 1.6);
    ctx.strokeStyle = `hsla(${hue}, 95%, ${50 + 15 * t}%, ${alpha})`;
    ctx.lineWidth = 0.8 + t * 2.4;
    ctx.beginPath();
    ctx.moveTo(trailX[i0], trailY[i0]);
    ctx.lineTo(trailX[i1], trailY[i1]);
    ctx.stroke();
  }

  if (n > 2) {
    const lastIdx = (trailHead - 1 + TRAIL_MAX) % TRAIL_MAX;
    const lastX = trailX[lastIdx], lastY = trailY[lastIdx];
    const glow = ctx.createRadialGradient(lastX, lastY, 0, lastX, lastY, 22);
    glow.addColorStop(0, `hsla(${(hueOffset + 280) % 360}, 100%, 70%, 0.85)`);
    glow.addColorStop(1, `hsla(${(hueOffset + 280) % 360}, 100%, 70%, 0)`);
    ctx.fillStyle = glow;
    ctx.fillRect(lastX - 24, lastY - 24, 48, 48);
  }

  ctx.strokeStyle = "rgba(220, 230, 255, 0.85)";
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(pivotX, pivotY);
  ctx.lineTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.stroke();

  ctx.fillStyle = "rgba(180, 200, 255, 1)";
  ctx.beginPath();
  ctx.arc(pivotX, pivotY, 4, 0, Math.PI * 2);
  ctx.fill();

  ctx.fillStyle = "hsl(200, 80%, 75%)";
  ctx.beginPath();
  ctx.arc(x1, y1, 8 + M1 * 2, 0, Math.PI * 2);
  ctx.fill();

  ctx.fillStyle = `hsl(${(hueOffset + 280) % 360}, 90%, 65%)`;
  ctx.beginPath();
  ctx.arc(x2, y2, 9 + M2 * 2, 0, Math.PI * 2);
  ctx.fill();

  ctx.fillStyle = "rgba(200, 210, 240, 0.55)";
  ctx.font = "12px system-ui, sans-serif";
  ctx.fillText("click anywhere to reseed chaos", 14, height - 16);
}