Mandelbrot Voyager

let W=0, H=0;
let cx=-0.5, cy=0.0, scale=3.0;
let pass=0;
let row=0;
let maxIter=180;
let img=null;
let lastInteract=0;

function init({ canvas, ctx, width, height }) {
  W=width; H=height;
  img = ctx.createImageData(W, H);
  pass=0; row=0;
  lastInteract=performance.now();
}

function setPixelBlock(data, x, y, bs, r, g, b) {
  for (let dy=0; dy<bs; dy++) {
    const yy=y+dy; if (yy>=H) break;
    for (let dx=0; dx<bs; dx++) {
      const xx=x+dx; if (xx>=W) break;
      const i=(yy*W+xx)*4;
      data[i]=r; data[i+1]=g; data[i+2]=b; data[i+3]=255;
    }
  }
}

function hsl2rgb(h, s, l) {
  h=((h%1)+1)%1;
  const a=s*Math.min(l,1-l);
  const f=(n)=>{const k=(n+h*12)%12; return l - a*Math.max(-1, Math.min(k-3, 9-k, 1));};
  return [Math.round(f(0)*255), Math.round(f(8)*255), Math.round(f(4)*255)];
}

function color(iter, zr, zi) {
  if (iter >= maxIter) return [0,0,0];
  const log_zn = Math.log(zr*zr + zi*zi) / 2;
  const nu = Math.log(log_zn / Math.LN2) / Math.LN2;
  const smooth = iter + 1 - nu;
  const t = smooth / maxIter;
  const hue = 0.66 + 4*t;
  const sat = 0.85;
  const lig = t < 0.95 ? 0.5 * Math.sqrt(Math.min(1, t*3)) : 0.5*(1 - (t-0.95)*8);
  const [r,g,b] = hsl2rgb(hue, sat, Math.max(0.05, Math.min(0.6, lig)));
  return [r,g,b];
}

function computeRowBlocks(data, y, bs) {
  const aspect = H/W;
  const halfW = scale/2;
  const halfH = scale*aspect/2;
  const x0 = cx - halfW;
  const y0 = cy - halfH;
  const dx = scale / W;
  const dy = scale*aspect / H;
  for (let x=0; x<W; x+=bs) {
    const cr = x0 + x*dx;
    const ci = y0 + y*dy;
    let inSet=false;
    const xq = cr - 0.25;
    const q = xq*xq + ci*ci;
    if (q*(q + xq) <= 0.25*ci*ci) inSet=true;
    else if ((cr+1)*(cr+1) + ci*ci <= 0.0625) inSet=true;
    if (inSet) { setPixelBlock(data, x, y, bs, 0,0,0); continue; }
    let zr=0, zi=0, iter=0;
    const bail=4;
    while (iter<maxIter) {
      const zr2=zr*zr, zi2=zi*zi;
      if (zr2+zi2>bail) break;
      zi = 2*zr*zi + ci;
      zr = zr2 - zi2 + cr;
      iter++;
    }
    const [r,g,b] = color(iter, zr, zi);
    setPixelBlock(data, x, y, bs, r, g, b);
  }
}

function startRender() {
  pass=0; row=0;
  const zoomLevel = Math.log2(3.0/scale);
  maxIter = Math.min(2000, Math.floor(180 + zoomLevel*55));
}

// Reset button geometry (top-right corner). Kept in sync with the draw below.
const BTN_W = 40, BTN_H = 24, BTN_MARGIN = 8;
function btnRect() {
  return { x: W - BTN_W - BTN_MARGIN, y: BTN_MARGIN, w: BTN_W, h: BTN_H };
}
function inBtn(x, y) {
  const r = btnRect();
  return x >= r.x && x <= r.x + r.w && y >= r.y && y <= r.y + r.h;
}

function handleInput(input, ctx) {
  const clicks = input.consumeClicks ? input.consumeClicks() : [];
  for (const c of clicks) {
    if (inBtn(c.x, c.y)) {
      // Touch-friendly zoom out: reset view to the initial framing.
      cx = -0.5; cy = 0.0; scale = 3.0;
      startRender();
      lastInteract = performance.now();
      continue;
    }
    const aspect = H/W;
    const u = c.x/W, v = c.y/H;
    const px = cx + (u-0.5)*scale;
    const py = cy + (v-0.5)*scale*aspect;
    cx = px; cy = py;
    if (c.button === 2) scale *= 2; else scale *= 0.5;
    if (scale > 4) scale = 4;
    if (scale < 1e-14) scale = 1e-14;
    startRender();
    lastInteract = performance.now();
  }
  if (input.wheelY) {
    if (input.wheelY < 0) scale *= 0.9;
    else scale *= 1.1;
    if (scale > 4) scale = 4;
    startRender();
    lastInteract = performance.now();
  }
}

function tick({ ctx, dt, time, width, height, input }) {
  if (width !== W || height !== H) {
    W=width; H=height;
    img = ctx.createImageData(W, H);
    startRender();
  }
  handleInput(input, ctx);

  if (performance.now() - lastInteract > 20000 && scale < 3.0) {
    scale = Math.min(3.0, scale * 1.02);
    cx *= 0.98; cy *= 0.98;
    startRender();
  }

  const budget = 12;
  const t0 = performance.now();
  const blockSizes = [8, 4, 2, 1];
  while (pass < blockSizes.length && performance.now() - t0 < budget) {
    const bs = blockSizes[pass];
    if (row >= H) { pass++; row = 0; continue; }
    computeRowBlocks(img.data, row, bs);
    row += bs;
  }

  ctx.putImageData(img, 0, 0);

  const zoom = 3.0/scale;
  ctx.fillStyle = 'rgba(0,0,0,0.55)';
  ctx.fillRect(8, 8, 290, 64);
  ctx.fillStyle = '#fff';
  ctx.font = '12px monospace';
  ctx.fillText(`zoom: ${zoom.toExponential(3)}x`, 16, 26);
  ctx.fillText(`center: ${cx.toFixed(14)}`, 16, 42);
  ctx.fillText(`        ${cy.toFixed(14)}i`, 16, 58);
  ctx.fillStyle = '#aaa';
  ctx.font = '11px monospace';
  ctx.fillText(`L-click: zoom in  R-click: zoom out  iter:${maxIter}`, 8, height-8);

  // Touch-friendly reset / zoom-out button (top-right).
  const r = btnRect();
  ctx.fillStyle = 'rgba(0,0,0,0.6)';
  ctx.fillRect(r.x, r.y, r.w, r.h);
  ctx.strokeStyle = 'rgba(255,255,255,0.55)';
  ctx.lineWidth = 1;
  ctx.strokeRect(r.x + 0.5, r.y + 0.5, r.w - 1, r.h - 1);
  ctx.fillStyle = '#fff';
  ctx.font = '14px monospace';
  ctx.textBaseline = 'middle';
  ctx.textAlign = 'center';
  ctx.fillText('↺', r.x + r.w/2, r.y + r.h/2 + 1);
  ctx.textBaseline = 'alphabetic';
  ctx.textAlign = 'start';
}