Ulam Spiral

let sieve, cell, cx, cy, maxN, n, x, y, dx, dy, steps, stepLeg, legCount, primeCount, lastReset;

function isPrimeInit(max) {
  const s = new Uint8Array(max + 1);
  s[0] = s[1] = 1;
  for (let i = 2; i * i <= max; i++) {
    if (!s[i]) for (let j = i * i; j <= max; j += i) s[j] = 1;
  }
  return s;
}

function init({ canvas, ctx, width, height }) {
  cell = Math.max(2, Math.floor(Math.min(width, height) / 220));
  const cols = Math.floor(width / cell);
  const rows = Math.floor(height / cell);
  maxN = cols * rows;
  sieve = isPrimeInit(maxN + 10);
  ctx.fillStyle = '#05060a';
  ctx.fillRect(0, 0, width, height);
  reset(width, height);
  lastReset = 0;
}

function reset(width, height) {
  cx = Math.floor(width / 2 / cell) * cell + cell / 2;
  cy = Math.floor(height / 2 / cell) * cell + cell / 2;
  n = 1;
  x = 0; y = 0;
  dx = 1; dy = 0;
  steps = 1; stepLeg = 0; legCount = 0;
  primeCount = 0;
}

function turn() {
  const ndx = dy;
  const ndy = -dx;
  dx = ndx; dy = ndy;
}

function place(ctx, value, px, py) {
  const isP = !sieve[value];
  if (isP) {
    primeCount++;
    const twin = (value > 2) && (!sieve[value - 2] || !sieve[value + 2]);
    if (twin) {
      ctx.fillStyle = '#fff6b0';
      const s = cell;
      ctx.fillRect(px - s / 2, py - s / 2, s, s);
      ctx.fillStyle = 'rgba(255,220,120,0.35)';
      ctx.fillRect(px - s, py - s, s * 2, s * 2);
    } else {
      ctx.fillStyle = '#7ad7ff';
      ctx.fillRect(px - cell / 2, py - cell / 2, cell, cell);
    }
  } else {
    ctx.fillStyle = 'rgba(80,90,120,0.55)';
    const s = Math.max(1, cell - 1);
    ctx.fillRect(px - s / 2, py - s / 2, s, s);
  }
}

function tick({ ctx, frame, width, height }) {
  if ((frame & 31) === 0) {
    ctx.fillStyle = 'rgba(5,6,10,0.12)';
    ctx.fillRect(0, 0, width, height);
  }

  const perFrame = Math.max(40, Math.floor(maxN / 1200));
  for (let i = 0; i < perFrame && n <= maxN; i++) {
    const px = cx + x * cell;
    const py = cy + y * cell;
    if (px >= 0 && px < width && py >= 0 && py < height) {
      place(ctx, n, px, py);
    }
    x += dx; y += dy;
    stepLeg++;
    if (stepLeg === steps) {
      stepLeg = 0;
      legCount++;
      turn();
      if (legCount === 2) { legCount = 0; steps++; }
    }
    n++;
  }

  ctx.fillStyle = 'rgba(5,6,10,0.85)';
  ctx.fillRect(8, 8, 168, 44);
  ctx.fillStyle = '#cfe8ff';
  ctx.font = '12px ui-monospace, monospace';
  ctx.textBaseline = 'top';
  ctx.fillText('Ulam spiral', 16, 14);
  ctx.fillStyle = '#7ad7ff';
  ctx.fillText('primes: ' + primeCount + ' / ' + Math.min(n - 1, maxN), 16, 32);

  if (n > maxN) {
    if (lastReset === 0) lastReset = frame;
    if (frame - lastReset > 120) {
      ctx.fillStyle = '#05060a';
      ctx.fillRect(0, 0, width, height);
      reset(width, height);
      lastReset = 0;
    }
  }
}