Mandelbrot explorer · qwen3.8-max-0902

Let me build a solid single-file Mandelbrot explorer.

Key features:
- Full-screen canvas, resize handling.
- Escape time with smooth coloring, points inside the set get a distinct color (e.g. black).
- Initial view: x from -2.4 to 0.8 or so, centered vertically.
- Pan by dragging.
- Wheel zoom centered on the cursor position.
- Iterations adapt based on zoom level: e.g. base 100 + log2(zoom)*40, capped.
- Rendering should be responsive: render in chunks (rows per frame) via requestAnimationFrame, or render at low resolution during interaction and full resolution when idle. Simple approach: render progressively in row batches using rAF, cancelable; during drag render at low resolution (scale 0.5), and full resolution after idle.

Let me write the code.

Smooth coloring: standard escape with normalized iteration count nu = log(log|z|/log(2))/log(2), smooth = n + 1 - nu. Color via palette function (e.g. cosine gradient) and cyclic sqrt scaling.

Zoom: maintain center (cx, cy) and half-height span. On wheel, compute the complex-coordinate point under the cursor, zoom by a factor, and adjust the center so that the point stays under the cursor.

Implementation details: canvas pixel coords → complex coords: re = cx + (px - w/2) * scale, scale = span/ h (aspect: use a single pixels-to-units scale). Keep `view = {re, im, scale}` where scale = units per pixel. Initial scale is chosen so the height covers about 3.0 units: scale = 3.0/h. Initial center at -0.6, 0.

Progressive rendering: use ImageData, fill rows in chunks per frame, putImageData on each chunk. Keep a token to cancel stale renders.

Interaction: during drag/wheel, render at low resolution (renderScale = 2 or 3, meaning draw to a smaller ImageData and scale up via ctx.putImageData? putImageData can't be scaled). Better approach: draw to an offscreen canvas at low resolution, then drawImage with scaling. Use an offscreen canvas sized to (w/rs, h/rs).

Iteration count: maxIter = clamp(120 + 90*log2(initialScale/scale), 120, 2500) or something like that. Keep controls responsive: chunked rendering keeps the UI responsive.

Reset button, and possibly a zoom level indicator. Keep it minimal.

Also preventDefault on wheel to prevent page scrolling; use passive:false.

Let me write index.html, then test in a browser: screenshot, programmatically zoom to a boundary point via wheel events? Browser tool can click/scroll. Can I dispatch a wheel event with JS? The browser tool has a "scroll" action, which probably scrolls the page — with a delta. Let me verify by comparing canvas state before and after, and by checking the readout of the complex-coordinate point under the cursor.

Easier verification: expose a hook like window.__fractal for testing? It might be OK to add debug info to the UI: display the complex coordinate under the cursor. Then test: record the point at cursor position, dispatch a wheel event, and confirm the displayed coordinate at that pixel hasn't changed (via a function that computes pixel → complex coord). Just call the function via console? The browser tool doesn't have eval. There's an "inspect" that reads DOM/console. Hmm. Can I add a small test harness to the page? Better approach: write a verification that simulates via UI events and reads a status element that displays the center coordinate and zoom. To check "the point under the cursor doesn't move", I could add a temporary readout of the complex coord under the mouse (shown on mousemove). Does the browser tool move the mouse? Click sets a position. scroll with x,y and delta might dispatch wheel at that position. Then screenshot and compare.

Alternatively, I could use a headless check with a small script — not available. Let me rely on the browser tool: click (moves mouse there? maybe), scroll, screenshot, inspect the status text.

Let me expose the state via a DOM status bar: "center: ... zoom: ...x iter: ...". Plus a readout of the cursor coordinate on hover. That's a UI nicety anyway.

To verify "stays near the cursor": before zooming, I need the coord at cursor position. Can I make the cursor readout update on wheel too? It only updates on mousemove. The click action probably dispatches mouse events. Or, compute manually from the status: coord under cursor = center + (px - w/2)*scale. If I know w and scale before/after and center, I can verify algebraically. The status displays center and scale; take snapshots before and after.

Let me write the code.

Palette: cosine palette with a few cycles:
function color(t) { t = t*0.05? } use smooth iteration sqrt for a nicer gradient. E.g.:
const s = Math.sqrt(smooth);
r = 9*(1-s)*s^3 ... classic. Use the well-known:
r = 100 * Math.pow(s,0.35)... let me just use cosine palette:
r = 128+127*sin(0.12*s + 0)... actually use the "sine palette":
freq = 0.08;
r = 127.5+127.5*Math.sin(freq*s*2π? ...)
Use:
const t = Math.sqrt(smooth)*0.35; // spread
r = 9*(1-t)*t*t*t*1580 mod? Classic polynomial:
r = Math.floor(9*(1-t)*t*t*t*255) — but the domain of t matters.

Let me use a cosine gradient:
function palette(i){ // i smooth iter
 const t = i*0.02;
 r = 128 + 127*Math.sin(6.283*(t + 0.0));
 g = 128 + 127*Math.sin(6.283*(t + 0.33));
 b = 128 + 127*Math.sin(6.283*(t + 0.67));
}
Hmm, that gives lots of cycles over many iterations. If I take sqrt first it will be smoother. Let me test visually via screenshot.

Interior: black (0,0,0) — distinct.

Precompute a 2048-entry LUT palette for speed.

Escape radius 4 (squared 16... use bailout |z|^2 > 1e6 with correction for smoother coloring? standard smooth: bail at 256, nu = log2(log(|z|)/log(2))... smooth = n + 1 - log2(Math.log(Math.sqrt(zr*zi))/Math.log(2)). OK.

Rendering loop:

let renderToken=0;
function render(full=true){
  cancel previous; token++
  const rs = full?1:3;
  const w = Math.ceil(canvasW/rs), h=...
  offscreen canvas w,h; imageData
  chunk rows: 20-40ms per frame or fixed row count; putImageData per chunk on offscreen ctx, then main ctx.drawImage scaled with imageSmoothingEnabled = true? Smoothing on when scaling up looks nicer at low res. Set imageSmoothingEnabled true.
}

After an interaction ends (150ms idle debounce), do a full-resolution render.

Resize: recompute canvas size, adjust scale to preserve view? Keep scale in units/pixel; on resize keep center, scale the same → fine.

Iteration count:
const baseScale = initialScale (units per px at zoom 1). zoom = baseScale/scale.
maxIter = Math.round(140 + 90*Math.log2(zoom)) clamped to [140, 3000].

Drag: pointerdown → capture, track last position; on pointermove during drag: dx,dy px → center.re -= dx*scale; center.im += dy*scale? Screen y goes down, imaginary axis typically up: complex im = cy - (py - h/2)*scale. So on drag: center.re -= dx*scale; center.im -= dy*scale? Let me define: re(px) = cx + (px - w/2)*scale; im(py) = cy - (py - h/2)*scale. If I move the mouse by dx,dy and want to keep the same complex point under the cursor: cx_new = cx - dx*scale; cy_new = cy + dy*scale. Yes.

During drag, render at low resolution per move (or throttle via rAF). Use a flag: mark dirty, render low-res inside rAF loop while dragging.

Wheel: e.preventDefault(); factor = Math.pow(1.0015, -e.deltaY) clamped; compute point under cursor before change; scale /= factor... actually scale *= Math.pow(1.0015, e.deltaY)? Wheel up (deltaY negative) should zoom in → scale smaller. factor = Math.exp(e.deltaY*0.0015); scale *= factor; then cx = pre.re - (px - w/2)*scale; cy = pre.im + (py - h/2)*scale.

Clamp scale to [1e-14?, base*something].

Double-click to zoom in too? Optional. Reset button restores initial center and initial scale (recompute for current height).

Keyboard: +/-? Skip.

Touch pan support? Pointer events handle touch too; pinch zoom is optional — skip, but preventDefault on touch-action: none.

Status bar: center, zoom, iter. Cursor readout on mousemove.

Also HUD instructions.

OK let me write the file.

Chunked rendering: use async loop with rAF and time budget (e.g. 12ms per frame), keep UI responsive.

Also handle devicePixelRatio? Keep it simple: use CSS pixel canvas size (dpr=1) for performance; full-screen canvas. Maybe cap dpr at 1.5. Let me just use dpr=1 for speed and progressive rendering to full canvas pixels.

Let me write it.