Chenciner-Montgomery Figure-Eight

// Chenciner-Montgomery figure-eight choreography (2000).
// Three equal unit masses chase each other along a single
// figure-eight orbit under Newtonian gravity with G = 1.
// Initial conditions (Moore 1993, Chenciner-Montgomery 2000):
//   x1 = ( 0.97000436, -0.24308753),  v1 = (0.46620369, 0.43236573)/2
//   x2 = (-0.97000436,  0.24308753),  v2 = v1
//   x3 = (0, 0),                      v3 = -2 v1
// Symplectic (velocity-Verlet) integration; trails fade in body color.

let W = 0, H = 0;
let trailCanvas, trailCtx;
let bodies;                   // [{x,y,vx,vy,col,trail}]
let scale = 0;                // world -> pixel scale
let cx = 0, cy = 0;           // pixel center
let simTime = 0;              // simulation time (period T ~ 6.3259)
let lapTime = 0;
let crossings = 0;
const G = 1;
const M = 1;
const PERIOD = 6.32591398;    // one full choreography period
const SUBSTEPS = 24;          // tight integrator for stability
const DT_MAX = 1 / 30;
const COLORS = ['#ff5577', '#55c8ff', '#ffd055'];

function resetSim() {
  bodies = [
    { x:  0.97000436, y: -0.24308753, vx:  0.46620369 / 2, vy:  0.43236573 / 2, col: COLORS[0], trail: [] },
    { x: -0.97000436, y:  0.24308753, vx:  0.46620369 / 2, vy:  0.43236573 / 2, col: COLORS[1], trail: [] },
    { x:  0,          y:  0,          vx: -0.46620369,     vy: -0.43236573,     col: COLORS[2], trail: [] },
  ];
  simTime = 0;
  lapTime = 0;
  crossings = 0;
}

function init({ canvas, ctx, width, height }) {
  W = width; H = height;
  scale = Math.min(W, H) * 0.32;   // figure-eight extends to ~|x|=1.08
  cx = W / 2; cy = H / 2;
  trailCanvas = new OffscreenCanvas(W, H);
  trailCtx = trailCanvas.getContext('2d');
  trailCtx.fillStyle = '#05060c';
  trailCtx.fillRect(0, 0, W, H);
  resetSim();

  // Warm the screen with a short pre-roll so the first visible frame
  // already shows the eight starting to draw.
  const h = PERIOD / 800;
  for (let i = 0; i < 40; i++) {
    stepVerlet(h);
    paintTrails();
  }
}

function accel(state) {
  // state is [{x,y}, ...] of length 3; returns [{ax,ay}, ...]
  const a = [
    { ax: 0, ay: 0 },
    { ax: 0, ay: 0 },
    { ax: 0, ay: 0 },
  ];
  for (let i = 0; i < 3; i++) {
    for (let j = i + 1; j < 3; j++) {
      const dx = state[j].x - state[i].x;
      const dy = state[j].y - state[i].y;
      const r2 = dx * dx + dy * dy;
      const invR = 1 / Math.sqrt(r2);
      const invR3 = invR / r2;
      const fx = G * dx * invR3;
      const fy = G * dy * invR3;
      a[i].ax += fx * M;
      a[i].ay += fy * M;
      a[j].ax -= fx * M;
      a[j].ay -= fy * M;
    }
  }
  return a;
}

function stepVerlet(h) {
  // velocity-Verlet: x += v dt + 0.5 a dt^2; v += 0.5 (a + a_new) dt
  const a0 = accel(bodies);
  for (let i = 0; i < 3; i++) {
    const b = bodies[i];
    b.x += b.vx * h + 0.5 * a0[i].ax * h * h;
    b.y += b.vy * h + 0.5 * a0[i].ay * h * h;
  }
  const a1 = accel(bodies);
  for (let i = 0; i < 3; i++) {
    const b = bodies[i];
    b.vx += 0.5 * (a0[i].ax + a1[i].ax) * h;
    b.vy += 0.5 * (a0[i].ay + a1[i].ay) * h;
  }
  simTime += h;
  lapTime += h;
  if (lapTime >= PERIOD) {
    lapTime -= PERIOD;
    crossings++;
  }
}

function w2p(x, y) {
  return [cx + x * scale, cy - y * scale];
}

function paintTrails() {
  for (const b of bodies) {
    const [px, py] = w2p(b.x, b.y);
    trailCtx.fillStyle = b.col;
    trailCtx.globalAlpha = 0.55;
    trailCtx.beginPath();
    trailCtx.arc(px, py, 1.4, 0, Math.PI * 2);
    trailCtx.fill();
  }
  trailCtx.globalAlpha = 1;
}

function tick({ ctx, dt, width, height }) {
  if (width !== W || height !== H) {
    W = width; H = height;
    scale = Math.min(W, H) * 0.32;
    cx = W / 2; cy = H / 2;
    const nt = new OffscreenCanvas(W, H);
    const nctx = nt.getContext('2d');
    nctx.fillStyle = '#05060c';
    nctx.fillRect(0, 0, W, H);
    nctx.drawImage(trailCanvas, 0, 0);
    trailCanvas = nt; trailCtx = nctx;
  }

  // gentle background fade so the eight slowly refreshes without losing shape
  trailCtx.fillStyle = 'rgba(5,6,12,0.012)';
  trailCtx.fillRect(0, 0, W, H);

  const step = Math.min(dt, DT_MAX) / SUBSTEPS;
  for (let s = 0; s < SUBSTEPS; s++) {
    stepVerlet(step);
    paintTrails();
  }

  ctx.drawImage(trailCanvas, 0, 0);

  // glow + core for each body
  for (const b of bodies) {
    const [px, py] = w2p(b.x, b.y);
    const g = ctx.createRadialGradient(px, py, 0, px, py, 18);
    g.addColorStop(0, b.col);
    g.addColorStop(1, 'rgba(0,0,0,0)');
    ctx.fillStyle = g;
    ctx.beginPath();
    ctx.arc(px, py, 18, 0, Math.PI * 2);
    ctx.fill();
    ctx.fillStyle = '#fff';
    ctx.beginPath();
    ctx.arc(px, py, 3.2, 0, Math.PI * 2);
    ctx.fill();
  }

  // HUD: period progress + energy diagnostic
  let KE = 0, PE = 0;
  for (let i = 0; i < 3; i++) {
    KE += 0.5 * M * (bodies[i].vx * bodies[i].vx + bodies[i].vy * bodies[i].vy);
    for (let j = i + 1; j < 3; j++) {
      const dx = bodies[j].x - bodies[i].x;
      const dy = bodies[j].y - bodies[i].y;
      PE -= G * M * M / Math.sqrt(dx * dx + dy * dy);
    }
  }
  const E = KE + PE;
  const phase = lapTime / PERIOD;

  ctx.fillStyle = 'rgba(255,255,255,0.78)';
  ctx.font = '12px system-ui, sans-serif';
  ctx.fillText(`Chenciner-Montgomery figure-eight  T = ${PERIOD.toFixed(4)}`, 10, 18);
  ctx.fillText(`phase ${phase.toFixed(3)}   laps ${crossings}   E = ${E.toFixed(4)}`, 10, 34);

  // period progress bar
  const barW = Math.min(220, W - 20);
  ctx.strokeStyle = 'rgba(255,255,255,0.25)';
  ctx.strokeRect(10, H - 18, barW, 6);
  ctx.fillStyle = 'rgba(255,255,255,0.65)';
  ctx.fillRect(10, H - 18, barW * phase, 6);
}