Burning Ship Fractal

const MAX_ITER = 220;
let cx = -0.5, cy = -0.5, scale = 3.2;
let W = 0, H = 0;
let off, octx, img, buf;
let row = 0, passIdx = 0;
const PASSES = [8, 4, 2, 1];

function ensureBuffers(width, height) {
  if (width === W && height === H && off) return;
  W = width; H = height;
  const sw = Math.max(1, Math.floor(W / 1));
  const sh = Math.max(1, Math.floor(H / 1));
  off = new OffscreenCanvas(sw, sh);
  octx = off.getContext("2d");
  img = octx.createImageData(sw, sh);
  buf = new Uint32Array(img.data.buffer);
  row = 0; passIdx = 0;
}

function init({ width, height }) {
  ensureBuffers(width, height);
}

function palette(t) {
  if (t < 0) return 0xff000000;
  let r, g, b;
  if (t < 0.55) {
    const u = t / 0.55;
    r = Math.floor(20 + 235 * Math.pow(u, 0.55));
    g = Math.floor(8 + 170 * Math.pow(u, 1.8));
    b = Math.floor(4 + 40 * Math.pow(u, 3.0));
  } else {
    const u = (t - 0.55) / 0.45;
    r = Math.floor(255 * (1 - u) * 0.7 + 10 * u);
    g = Math.floor(178 * (1 - u) + 30 * u);
    b = Math.floor(44 * (1 - u) + 170 * u);
  }
  const s = Math.sin(t * 40) * 0.06 + 1;
  r = Math.max(0, Math.min(255, (r * s) | 0));
  g = Math.max(0, Math.min(255, (g * s) | 0));
  b = Math.max(0, Math.min(255, (b * s) | 0));
  return (255 << 24) | (b << 16) | (g << 8) | r;
}

function sample(cre, cim) {
  let zr = 0, zi = 0, i = 0, zr2 = 0, zi2 = 0;
  while (i < MAX_ITER && zr2 + zi2 < 65536) {
    const ar = zr < 0 ? -zr : zr;
    const ai = zi < 0 ? -zi : zi;
    zi = 2 * ar * ai + cim;
    zr = ar * ar - ai * ai + cre;
    zr2 = zr * zr; zi2 = zi * zi;
    i++;
  }
  if (i >= MAX_ITER) return -1;
  const logZn = Math.log(zr2 + zi2) / 2;
  const nu = Math.log(logZn / Math.log(2)) / Math.log(2);
  return (i + 1 - nu) / MAX_ITER;
}

function startRender() { row = 0; passIdx = 0; }

function tick({ ctx, width, height, input }) {
  ensureBuffers(width, height);

  for (const c of input.consumeClicks()) {
    const factor = c.button === 2 ? 0.5 : 2;
    const aspect = H / W;
    const halfW = scale / 2;
    const wx = cx - halfW + (c.x / W) * scale;
    const wy = cy - scale * aspect / 2 + (c.y / H) * scale * aspect;
    cx = wx + (cx - wx) / factor;
    cy = wy + (cy - wy) / factor;
    scale /= factor;
    startRender();
  }

  const budget = 12;
  const t0 = performance.now();
  const px = PASSES[passIdx];
  const aspect = H / W;
  const halfW = scale / 2, halfH = scale * aspect / 2;
  const x0 = cx - halfW, y0 = cy - halfH;
  const stepX = scale / W;

  while (passIdx < PASSES.length && performance.now() - t0 < budget) {
    const p2 = PASSES[passIdx];
    const cim = y0 + (row + p2 * 0.5) * stepX;
    for (let x = 0; x < W; x += p2) {
      const cre = x0 + (x + p2 * 0.5) * stepX;
      const t = sample(cre, cim);
      const col = palette(t);
      const yEnd = Math.min(H, row + p2), xEnd = Math.min(W, x + p2);
      for (let yy = row; yy < yEnd; yy++) {
        const base = yy * W;
        for (let xx = x; xx < xEnd; xx++) buf[base + xx] = col;
      }
    }
    row += p2;
    if (row >= H) { row = 0; passIdx++; }
  }
  octx.putImageData(img, 0, 0);
  ctx.imageSmoothingEnabled = false;
  ctx.drawImage(off, 0, 0, W, H);

  const zoom = 3.2 / scale;
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(8, 8, 280, 64);
  ctx.fillStyle = "#ffd9a8";
  ctx.font = "12px monospace";
  ctx.fillText(`Burning Ship  zoom: ${zoom.toFixed(2)}x`, 16, 26);
  ctx.fillText(`center: ${cx.toFixed(5)}, ${cy.toFixed(5)}`, 16, 44);
  ctx.fillStyle = "#aaa";
  ctx.fillText(`click to zoom in`, 16, 62);
}