Under the hood

Per-pixel escape-time Mandelbrot into an ImageData buffer; clicking recenters and halves the view scale (right-click doubles it) to zoom.

'use client';

import * as React from 'react';

import { Win98Button } from '@/components/ui/win-98-button';

const W = 560;
const H = 420;
const START = { cx: -0.6, cy: 0, scale: 3.2 };

export function MandelbrotGame() {
  const canvasRef = React.useRef<HTMLCanvasElement>(null);
  const [view, setView] = React.useState(START);
  const [busy, setBusy] = React.useState(false);

  React.useEffect(() => {
    const ctx = canvasRef.current?.getContext('2d');
    if (!ctx) return;
    setBusy(true);
    const img = ctx.createImageData(W, H);
    const maxIter = 140;
    const aspect = W / H;
    const sx = view.scale;
    const sy = view.scale / aspect;
    for (let py = 0; py < H; py++) {
      const y0 = view.cy + (py / H - 0.5) * sy;
      for (let px = 0; px < W; px++) {
        const x0 = view.cx + (px / W - 0.5) * sx;
        let x = 0;
        let y = 0;
        let i = 0;
        while (x * x + y * y <= 4 && i < maxIter) {
          const xt = x * x - y * y + x0;
          y = 2 * x * y + y0;
          x = xt;
          i++;
        }
        const o = (py * W + px) * 4;
        if (i === maxIter) {
          img.data[o] = 20;
          img.data[o + 1] = 17;
          img.data[o + 2] = 11;
        } else {
          const t = i / maxIter;
          img.data[o] = Math.floor(255 * Math.min(1, t * 2.2));
          img.data[o + 1] = Math.floor(255 * Math.pow(t, 0.7));
          img.data[o + 2] = Math.floor(120 + 135 * (1 - t));
        }
        img.data[o + 3] = 255;
      }
    }
    ctx.putImageData(img, 0, 0);
    setBusy(false);
  }, [view]);

  const zoom = (e: React.MouseEvent, factor: number) => {
    const rect = canvasRef.current!.getBoundingClientRect();
    const aspect = W / H;
    const px = (e.clientX - rect.left) / rect.width;
    const py = (e.clientY - rect.top) / rect.height;
    setView((v) => ({
      cx: v.cx + (px - 0.5) * v.scale,
      cy: v.cy + (py - 0.5) * (v.scale / aspect),
      scale: v.scale * factor,
    }));
  };

  return (
    <div className="flex w-full max-w-[580px] flex-col items-center gap-4">
      <canvas
        ref={canvasRef}
        width={W}
        height={H}
        onClick={(e) => zoom(e, 0.5)}
        onContextMenu={(e) => {
          e.preventDefault();
          zoom(e, 2);
        }}
        className="w-full max-w-full cursor-zoom-in rounded-md border border-foreground/20"
      />
      <div className="flex items-center gap-2">
        <Win98Button onClick={() => setView(START)} className="h-9 px-5">
          Reset
        </Win98Button>
        <span className="font-mono text-[11px] uppercase tracking-[0.12em] opacity-50">
          {busy ? 'rendering…' : `zoom ${(START.scale / view.scale).toFixed(1)}× · click to dive, right-click out`}
        </span>
      </div>
    </div>
  );
}