Triple Pendulum Chaos

let st, trail, cx, cy;
const L = [90, 90, 90];
const m = [1, 1, 1];
const g = 9.81;

// Scratch buffers reused every tick. RK4 is called 16x/frame * 4 deriv()s,
// so allocating arrays inside ran ~384 allocs/frame for no reason.
const _k1 = new Float64Array(6);
const _k2 = new Float64Array(6);
const _k3 = new Float64Array(6);
const _k4 = new Float64Array(6);
const _tmp = new Float64Array(6);
const _pxs = [0, 0, 0];
const _pys = [0, 0, 0];
const _pcs = ["#5af", "#f5a", "#fa5"];

function init({ width, height }) {
  cx = width / 2;
  cy = height * 0.35;
  st = new Float64Array(6);
  randomize();
  trail = [];
}

function randomize() {
  st[0] = Math.PI / 2 + (Math.random() - 0.5) * 2;
  st[1] = Math.PI / 2 + (Math.random() - 0.5) * 2;
  st[2] = Math.PI / 2 + (Math.random() - 0.5) * 2;
  st[3] = 0; st[4] = 0; st[5] = 0;
}

function deriv(s, out) {
  const t1 = s[0], t2 = s[1], t3 = s[2];
  const w1 = s[3], w2 = s[4], w3 = s[5];
  const L1 = L[0], L2 = L[1], L3 = L[2];
  const m1 = m[0], m2 = m[1], m3 = m[2];
  const c12 = Math.cos(t1 - t2), s12 = Math.sin(t1 - t2);
  const c13 = Math.cos(t1 - t3), s13 = Math.sin(t1 - t3);
  const c23 = Math.cos(t2 - t3), s23 = Math.sin(t2 - t3);
  // Mass matrix M (3x3, flat indices a..i = M[0][0]..M[2][2])
  const a = (m1 + m2 + m3) * L1, b = (m2 + m3) * L2 * c12, c = m3 * L3 * c13;
  const d = (m2 + m3) * L1 * c12, e = (m2 + m3) * L2, f = m3 * L3 * c23;
  const g1 = m3 * L1 * c13, h = m3 * L2 * c23, i = m3 * L3;
  const b0 = -(m2 + m3) * L2 * w2 * w2 * s12 - m3 * L3 * w3 * w3 * s13 - (m1 + m2 + m3) * g * Math.sin(t1);
  const b1 = (m2 + m3) * L1 * w1 * w1 * s12 - m3 * L3 * w3 * w3 * s23 - (m2 + m3) * g * Math.sin(t2);
  const b2 = m3 * L1 * w1 * w1 * s13 + m3 * L2 * w2 * w2 * s23 - m3 * g * Math.sin(t3);
  const D = a * (e * i - f * h) - b * (d * i - f * g1) + c * (d * h - e * g1);
  const Dx = b0 * (e * i - f * h) - b * (b1 * i - f * b2) + c * (b1 * h - e * b2);
  const Dy = a * (b1 * i - f * b2) - b0 * (d * i - f * g1) + c * (d * b2 - b1 * g1);
  const Dz = a * (e * b2 - b1 * h) - b * (d * b2 - b1 * g1) + b0 * (d * h - e * g1);
  out[0] = w1; out[1] = w2; out[2] = w3;
  out[3] = Dx / D; out[4] = Dy / D; out[5] = Dz / D;
}

function vadd(dst, a, b, s) {
  for (let i = 0; i < 6; i++) dst[i] = a[i] + b[i] * s;
}

function rk4(s, h) {
  deriv(s, _k1);
  vadd(_tmp, s, _k1, h / 2); deriv(_tmp, _k2);
  vadd(_tmp, s, _k2, h / 2); deriv(_tmp, _k3);
  vadd(_tmp, s, _k3, h);     deriv(_tmp, _k4);
  for (let i = 0; i < 6; i++) {
    s[i] += (h * (_k1[i] + 2 * _k2[i] + 2 * _k3[i] + _k4[i])) / 6;
  }
}

function tick({ ctx, dt, time, width, height, input }) {
  if (input.consumeClicks().length > 0) { randomize(); trail.length = 0; }
  if (input.justPressed && (input.justPressed("r") || input.justPressed(" "))) {
    randomize(); trail.length = 0;
  }
  cx = width / 2;
  cy = height * 0.35;

  const steps = 16;
  const h = Math.min(dt, 0.033) / steps;
  for (let i = 0; i < steps; i++) rk4(st, h);

  const [t1, t2, t3] = st;
  const x1 = cx + L[0] * Math.sin(t1), y1 = cy + L[0] * Math.cos(t1);
  const x2 = x1 + L[1] * Math.sin(t2), y2 = y1 + L[1] * Math.cos(t2);
  const x3 = x2 + L[2] * Math.sin(t3), y3 = y2 + L[2] * Math.cos(t3);

  trail.push({ x: x3, y: y3, t: time });
  // O(1) cap via ring drop instead of repeated O(n) shift().
  if (trail.length > 400) trail.splice(0, trail.length - 400);

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

  ctx.lineWidth = 2;
  for (let i = 1; i < trail.length; i++) {
    const p = trail[i - 1], q = trail[i];
    const age = (trail.length - i) / trail.length;
    const hue = (q.t * 60 + i * 2) % 360;
    ctx.strokeStyle = `hsla(${hue},100%,60%,${1 - age})`;
    ctx.beginPath();
    ctx.moveTo(p.x, p.y);
    ctx.lineTo(q.x, q.y);
    ctx.stroke();
  }

  ctx.strokeStyle = "#ddd";
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(cx, cy);
  ctx.lineTo(x1, y1);
  ctx.lineTo(x2, y2);
  ctx.lineTo(x3, y3);
  ctx.stroke();

  ctx.fillStyle = "#888";
  ctx.beginPath();
  ctx.arc(cx, cy, 4, 0, Math.PI * 2);
  ctx.fill();

  _pxs[0] = x1; _pxs[1] = x2; _pxs[2] = x3;
  _pys[0] = y1; _pys[1] = y2; _pys[2] = y3;
  for (let i = 0; i < 3; i++) {
    ctx.fillStyle = _pcs[i];
    ctx.beginPath();
    ctx.arc(_pxs[i], _pys[i], 9, 0, Math.PI * 2);
    ctx.fill();
    ctx.strokeStyle = "#fff";
    ctx.lineWidth = 1.5;
    ctx.stroke();
  }

  ctx.fillStyle = "#aaa";
  ctx.font = "12px monospace";
  ctx.fillText("tap/click or r/space — randomize", 10, height - 12);
}