Double Pendulum: Lagrangian Trails

let state, trail, hueOffset, pivotX, pivotY, scale;
const L1 = 1.0, L2 = 1.0, M1 = 1.0, M2 = 1.0, G = 9.81;
const TRAIL_MAX = 1400;
const SUBSTEPS = 8;

function derivs(s) {
  const [a1, a2, w1, w2] = s;
  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;
  return [w1, w2, dw1, dw2];
}

function rk4(s, dt) {
  const k1 = derivs(s);
  const s2 = s.map((v, i) => v + 0.5 * dt * k1[i]);
  const k2 = derivs(s2);
  const s3 = s.map((v, i) => v + 0.5 * dt * k2[i]);
  const k3 = derivs(s3);
  const s4 = s.map((v, i) => v + dt * k3[i]);
  const k4 = derivs(s4);
  return s.map((v, i) => v + (dt / 6) * (k1[i] + 2 * k2[i] + 2 * k3[i] + k4[i]));
}

function randomize() {
  state = [
    (Math.random() - 0.5) * 2 * Math.PI * 0.9 + Math.PI * 0.6,
    (Math.random() - 0.5) * 2 * Math.PI * 0.9 + Math.PI * 0.6,
    (Math.random() - 0.5) * 1.5,
    (Math.random() - 0.5) * 1.5,
  ];
  trail = [];
  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++) state = rk4(state, step);

  const [a1, a2] = state;
  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;

  trail.push({ x: x2, y: y2 });
  if (trail.length > TRAIL_MAX) trail.shift();
  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 = trail.length;
  for (let i = 1; i < n; i++) {
    const t = i / n;
    const p0 = trail[i - 1], p1 = trail[i];
    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(p0.x, p0.y);
    ctx.lineTo(p1.x, p1.y);
    ctx.stroke();
  }

  if (n > 2) {
    const last = trail[n - 1];
    const glow = ctx.createRadialGradient(last.x, last.y, 0, last.x, last.y, 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(last.x - 24, last.y - 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);
}