Mandelbrot explorer · nex-n2-pro

We need respond by doing task. Need create single-page web app index.html in current dir. Need inspect maybe empty. Need implement full-screen canvas, Mandelbrot smooth color gradient, click drag pan, wheel zoom. No external resources. Need write index.html. Need maybe mention done. Need use write. Need ensure code robust. We need think through implementation.

We need produce self-contained HTML CSS JS. Need full-screen canvas, smooth gradient. Click-and-drag pan, wheel zoom. Maybe also touch? Not required. Need no network. Need maybe devicePixelRatio.

Need create index.html. We can write. Need maybe include instructions overlay. Need handle high DPI.

Mandelbrot rendering: canvas full screen. Use offscreen buffer? Could use ImageData. Smooth coloring: iteration count + 1 - log2(log |z|). Map to HSL gradient. Need pan/zoom. Coordinate mapping. Mouse drag panning. Wheel zoom centered on cursor. Need maybe recalc on resize. Use requestAnimationFrame. Need avoid too heavy at high res? Maybe use resolution scaling? Full-screen canvas, maybe render at device pixel ratio capped to 2? Could be fine. Need maybe adaptive.

Let's craft good code. Need maybe include a color palette precomputed. Smooth gradient. Need use typed arrays. Need maybe render with worker? Not needed. But full-screen at 4k and max iterations 500 may be heavy. Could do max 300 and resolution scale. But user asks render. Need likely acceptable. Could render with ImageData in chunks? Need smooth.

We can implement JS:

const canvas = document.getElementById('mandelbrot'); const ctx = canvas.getContext('2d', { alpha: false });
let width=0,height=0,dpr=1; let centerX=-0.5, centerY=0, scale=3; // width in complex plane visible? scale = real width maybe. Let planeWidth = 3.0.
resize: dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = Math.floor(innerWidth*dpr); canvas.height=...; canvas.style.width='100vw'; etc; width=canvas.width;height=canvas.height; render();

Coordinate mapping:
function screenToComplex(px, py) {
return { re: centerX - planeWidth/2 + (px / width) * planeWidth, im: centerY + planeHeight/2 - (py / height) * planeHeight };
}
function complexToScreen? Not needed.
Wheel: preventDefault; const rect? canvas full. use offsetX/Y in CSS pixels then multiply dpr. But since canvas.width physical. Need use clientX/Y.