Vogel's Golden Spiral

const GOLDEN = 137.50776405003785;
const MAX_SEEDS = 1500;
// Ring-buffer of seed records: (r, theta) per seed. Avoid per-frame object
// allocations and O(N) Array.shift() once the buffer fills up.
let seedR;       // Float32Array(MAX_SEEDS)
let seedTheta;   // Float32Array(MAX_SEEDS)
let seedCount = 0;   // number of live seeds (<= MAX_SEEDS)
let seedHead = 0;    // index where the next seed will be written
let nextN = 0;       // monotonic id used to drive r = c*sqrt(n)
let W = 0, H = 0;
let pointerSeen = false;   // becomes true on first real pointer interaction

function init({ canvas, ctx, width, height }) {
  W = width; H = height;
  seedR = new Float32Array(MAX_SEEDS);
  seedTheta = new Float32Array(MAX_SEEDS);
  seedCount = 0;
  seedHead = 0;
  nextN = 0;
  pointerSeen = false;
}

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

function tick({ ctx, dt, time, width, height, input }) {
  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;

  // Mouse/touch scrub: vertical position scrubs ±6° around the golden angle so
  // viewers can pull the spiral off-golden and watch arms emerge in real time.
  // Don't treat the default mouseX/Y = (0,0) as "pointer inside" or the spiral
  // boots at -6° drift before the user has touched anything — drive scrub only
  // after we've seen a real pointer event (mouseDown for touch, or any
  // movement away from origin for desktop). Falls back to a slow auto-drift.
  const hasPointer = input &&
    (input.mouseDown || input.mouseX > 0 || input.mouseY > 0);
  if (hasPointer) pointerSeen = true;
  const pointerInside =
    pointerSeen && input &&
    input.mouseX >= 0 && input.mouseX <= W &&
    input.mouseY >= 0 && input.mouseY <= H;
  let drift;
  if (pointerInside) {
    drift = ((input.mouseY / H) - 0.5) * 12; // -6°..+6°
  } else {
    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;
    seedR[seedHead] = r;
    seedTheta[seedHead] = theta;
    seedHead = (seedHead + 1) % MAX_SEEDS;
    if (seedCount < MAX_SEEDS) seedCount++;
  }

  const total = seedCount;
  // Walk from the oldest seed to the newest so older particles render first
  // and newer ones (with the bigger glow) draw on top — same look as before.
  const startIdx = seedCount < MAX_SEEDS ? 0 : seedHead;
  for (let i = 0; i < total; i++) {
    const slot = (startIdx + i) % MAX_SEEDS;
    const r = seedR[slot];
    const th = seedTheta[slot];
    const x = cx + r * Math.cos(th);
    const y = cy + r * Math.sin(th);

    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);
  const hint = pointerInside
    ? 'scrubbing α — move up/down'
    : 'touch / drag to scrub α';
  ctx.fillText(hint, 14, H - 30);
  ctx.fillText('golden angle = 137.5077°', 14, H - 14);
}