Julia Drift: c on the Boundary

const MAX_ITER = 96;
const L2 = Math.log(2);
let lw = 0, lh = 0;
let img, buf, off, octx;
let palette;
let theta = 0;
let cx = 0, cy = 0;
let lastC = { x: 0, y: 0 };

function buildPalette() {
  palette = new Uint32Array(512);
  for (let i = 0; i < 512; i++) {
    const t = i / 511;
    const r = Math.floor(127 + 127 * Math.sin(6.283 * t));
    const g = Math.floor(127 + 127 * Math.sin(6.283 * t + 2.094));
    const b = Math.floor(127 + 127 * Math.sin(6.283 * t + 4.188));
    palette[i] = (0xff << 24) | (b << 16) | (g << 8) | r;
  }
}

function smoothColor(n, zx, zy) {
  if (n >= MAX_ITER) return 0xff000000;
  const logZn = Math.log(zx * zx + zy * zy) / 2;
  const nu = Math.log(logZn / L2) / L2;
  const s = n + 1 - nu;
  const idx = (Math.floor(s * 8) % 512 + 512) % 512;
  return palette[idx];
}

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

function init() { buildPalette(); }

function renderJulia(cxv, cyv) {
  const xmin = -1.7, xmax = 1.7, ymin = -1.2, ymax = 1.2;
  const dx = (xmax - xmin) / lw, dy = (ymax - ymin) / lh;
  for (let py = 0; py < lh; py++) {
    const y0 = ymin + py * dy;
    const row = py * lw;
    for (let px = 0; px < lw; px++) {
      const x0 = xmin + px * dx;
      let zx = x0, zy = y0, n = 0;
      while (n < MAX_ITER) {
        const zx2 = zx * zx, zy2 = zy * zy;
        if (zx2 + zy2 > 4) break;
        zy = 2 * zx * zy + cyv;
        zx = zx2 - zy2 + cxv;
        n++;
      }
      buf[row + px] = smoothColor(n, zx, zy);
    }
  }
}

function tick({ ctx, dt, width, height, input }) {
  ensureBuffers(width, height);
  const mouseInside = input.mouseX >= 0 && input.mouseX <= width && input.mouseY >= 0 && input.mouseY <= height;
  const auto = !mouseInside || (input.mouseX < 120 && input.mouseY < 80);

  if (auto) {
    theta += dt * 0.25;
    cx = 0.5 * Math.cos(theta) - 0.25 * Math.cos(2 * theta);
    cy = 0.5 * Math.sin(theta) - 0.25 * Math.sin(2 * theta);
  } else {
    cx = (input.mouseX / width) * 3.4 - 1.7;
    cy = (input.mouseY / height) * 2.4 - 1.2;
  }

  renderJulia(cx, cy);
  octx.putImageData(img, 0, 0);
  ctx.imageSmoothingEnabled = true;
  ctx.drawImage(off, 0, 0, width, height);

  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(8, 8, 260, 52);
  ctx.fillStyle = "#fff";
  ctx.font = "13px monospace";
  ctx.fillText(`c = ${cx.toFixed(4)} + ${cy.toFixed(4)}i`, 16, 28);
  ctx.fillText(auto ? "auto-drift  (move mouse to scrub)" : "manual scrub", 16, 48);
  lastC = { x: cx, y: cy };
}