Soft N-Body Orrery

let bodies = [];
let W = 0, H = 0;
let trailCanvas, trailCtx;
const G = 1800;
const EPS2 = 25;
const SUBSTEPS = 6;
const MAX_BODIES = 40;

function massColor(m) {
  const t = Math.min(1, Math.max(0, (Math.log(m) - 1.5) / 4));
  const r = Math.round(60 + 195 * t);
  const g = Math.round(180 - 120 * t);
  const b = Math.round(255 - 180 * t);
  return `rgb(${r},${g},${b})`;
}

function radiusFor(m) {
  return 1.6 + Math.cbrt(m) * 0.9;
}

function spawn(x, y, m, vx, vy) {
  if (bodies.length >= MAX_BODIES) bodies.shift();
  bodies.push({ x, y, vx, vy, m, r: radiusFor(m), col: massColor(m) });
}

function init({ canvas, ctx, width, height }) {
  W = width; H = height;
  trailCanvas = new OffscreenCanvas(width, height);
  trailCtx = trailCanvas.getContext('2d');
  trailCtx.fillStyle = '#05060c';
  trailCtx.fillRect(0, 0, width, height);

  const cx = width / 2, cy = height / 2;
  spawn(cx, cy, 400, 0, 0);
  const n = 7;
  for (let i = 0; i < n; i++) {
    const ang = (i / n) * Math.PI * 2 + Math.random() * 0.3;
    const dist = 90 + Math.random() * 180;
    const m = 4 + Math.random() * 40;
    const speed = Math.sqrt(G * 400 / dist) * (0.85 + Math.random() * 0.2);
    const x = cx + Math.cos(ang) * dist;
    const y = cy + Math.sin(ang) * dist;
    spawn(x, y, m, -Math.sin(ang) * speed, Math.cos(ang) * speed);
  }
}

function accelerations() {
  const n = bodies.length;
  const ax = new Float32Array(n);
  const ay = new Float32Array(n);
  for (let i = 0; i < n; i++) {
    const bi = bodies[i];
    for (let j = i + 1; j < n; j++) {
      const bj = bodies[j];
      const dx = bj.x - bi.x;
      const dy = bj.y - bi.y;
      const r2 = dx * dx + dy * dy + EPS2;
      const invR = 1 / Math.sqrt(r2);
      const invR3 = invR / r2;
      const fx = G * dx * invR3;
      const fy = G * dy * invR3;
      ax[i] += fx * bj.m;
      ay[i] += fy * bj.m;
      ax[j] -= fx * bi.m;
      ay[j] -= fy * bi.m;
    }
  }
  return { ax, ay };
}

function step(h) {
  let { ax, ay } = accelerations();
  for (let i = 0; i < bodies.length; i++) {
    const b = bodies[i];
    b.vx += ax[i] * h * 0.5;
    b.vy += ay[i] * h * 0.5;
    b.x += b.vx * h;
    b.y += b.vy * h;
  }
  ({ ax, ay } = accelerations());
  for (let i = 0; i < bodies.length; i++) {
    const b = bodies[i];
    b.vx += ax[i] * h * 0.5;
    b.vy += ay[i] * h * 0.5;
    if (b.x < -50) { b.x = -50; b.vx = Math.abs(b.vx) * 0.6; }
    if (b.x > W + 50) { b.x = W + 50; b.vx = -Math.abs(b.vx) * 0.6; }
    if (b.y < -50) { b.y = -50; b.vy = Math.abs(b.vy) * 0.6; }
    if (b.y > H + 50) { b.y = H + 50; b.vy = -Math.abs(b.vy) * 0.6; }
  }
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) {
    W = width; H = height;
    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;
  }

  const clicks = input.consumeClicks();
  for (const c of clicks) {
    const m = 6 + Math.random() * 60;
    const vx = (Math.random() - 0.5) * 60;
    const vy = (Math.random() - 0.5) * 60;
    spawn(c.x, c.y, m, vx, vy);
  }

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

  trailCtx.fillStyle = 'rgba(5,6,12,0.08)';
  trailCtx.fillRect(0, 0, W, H);
  for (const b of bodies) {
    trailCtx.fillStyle = b.col;
    trailCtx.globalAlpha = 0.55;
    trailCtx.beginPath();
    trailCtx.arc(b.x, b.y, Math.max(0.8, b.r * 0.4), 0, Math.PI * 2);
    trailCtx.fill();
  }
  trailCtx.globalAlpha = 1;

  ctx.drawImage(trailCanvas, 0, 0);
  for (const b of bodies) {
    const grad = ctx.createRadialGradient(b.x, b.y, 0, b.x, b.y, b.r * 3);
    grad.addColorStop(0, b.col);
    grad.addColorStop(1, 'rgba(0,0,0,0)');
    ctx.fillStyle = grad;
    ctx.beginPath();
    ctx.arc(b.x, b.y, b.r * 3, 0, Math.PI * 2);
    ctx.fill();
    ctx.fillStyle = '#fff';
    ctx.beginPath();
    ctx.arc(b.x, b.y, Math.max(1, b.r * 0.6), 0, Math.PI * 2);
    ctx.fill();
  }

  ctx.fillStyle = 'rgba(255,255,255,0.7)';
  ctx.font = '12px system-ui, sans-serif';
  ctx.fillText(`bodies: ${bodies.length}  (click to add)`, 10, 18);
}