Vogel's Golden Spiral

const GOLDEN = 137.50776405003785;
let seeds = [];
let nextN = 0;
let W = 0, H = 0;
const MAX_SEEDS = 1500;

function init({ canvas, ctx, width, height }) {
  W = width; H = height;
  seeds = [];
  nextN = 0;
}

function hsl(h, s, l) {
  return `hsl(${h}, ${s}%, ${l}%)`;
}

function tick({ ctx, dt, time, width, height }) {
  if (width !== W || height !== H) {
    W = width; H = height;
  }

  ctx.fillStyle = 'rgba(8, 6, 16, 0.18)';
  ctx.fillRect(0, 0, W, H);

  const cx = W / 2;
  const cy = H / 2;
  const maxR = Math.min(W, H) * 0.48;

  const drift = Math.sin(time * (Math.PI * 2) / 12) * 3.0;
  const alphaDeg = GOLDEN + drift;
  const alphaRad = alphaDeg * Math.PI / 180;

  const c = maxR / Math.sqrt(MAX_SEEDS);

  const seedsPerFrame = 6;
  for (let i = 0; i < seedsPerFrame; i++) {
    const n = nextN++;
    const r = c * Math.sqrt((n % MAX_SEEDS) + 1);
    const theta = n * alphaRad;
    seeds.push({ n, r, theta, born: time });
    if (seeds.length > MAX_SEEDS) seeds.shift();
  }

  const total = seeds.length;
  for (let i = 0; i < total; i++) {
    const s = seeds[i];
    const x = cx + s.r * Math.cos(s.theta);
    const y = cy + s.r * Math.sin(s.theta);

    if (x < -10 || x > W + 10 || y < -10 || y > H + 10) continue;

    const age = i / total;
    const size = 1.2 + age * 4.5;
    const hue = (age * 300 + 30) % 360;
    const light = 45 + age * 25;

    if (age > 0.85) {
      ctx.beginPath();
      ctx.fillStyle = hsl(hue, 90, 70);
      ctx.globalAlpha = 0.35;
      ctx.arc(x, y, size * 2.2, 0, Math.PI * 2);
      ctx.fill();
    }

    ctx.globalAlpha = 0.85;
    ctx.beginPath();
    ctx.fillStyle = hsl(hue, 85, light);
    ctx.arc(x, y, size, 0, Math.PI * 2);
    ctx.fill();
  }

  ctx.globalAlpha = 1;

  ctx.fillStyle = 'rgba(255, 255, 255, 0.85)';
  ctx.font = '13px ui-monospace, monospace';
  ctx.textAlign = 'left';
  ctx.fillText(`α = ${alphaDeg.toFixed(4)}°`, 14, 22);

  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
  ctx.font = '11px ui-monospace, monospace';
  let status;
  if (Math.abs(drift) < 0.05) status = 'GOLDEN — densest packing';
  else if (Math.abs(drift) < 1.0) status = 'near golden — faint arms emerge';
  else status = 'off-golden — spiral arms, empty gaps';
  ctx.fillText(status, 14, 40);
  ctx.fillText(`golden angle = 137.5077°`, 14, H - 14);
}