Mandelbrot explorer · seed-2.0-mini

Got it, let's build this Mandelbrot explorer. First, I need to create an index.html file with all the necessary code: HTML, CSS, JS, inline, no external stuff.

First, the structure: a full-screen canvas element. CSS should make it take the whole screen, no margins, so the canvas is full size. Then JavaScript to handle rendering, panning, zooming, reset.

Let's outline the variables: initial bounds (xMin, xMax, yMin, yMax). The canvas context, width, height. Need to handle mouse events for dragging (mousedown, mousemove, mouseup), wheel for zoom. Also, need to compute the Mandelbrot set: for each pixel, map to complex number, iterate until escape (|z| > 2 or max iterations). Use a smooth color gradient, inside points are black or a distinct color.

Wait, the required behavior: when dragging, pan; zoom with mouse wheel centered on cursor. Reset button? Wait, the task says "Provide Reset view to restore initial bounds." So need a reset button, maybe fixed somewhere.

Wait, let's think about the steps:

1. Create index.html. The HTML will have a canvas and a button for reset.
2. CSS: body, html set to 100% height, overflow hidden; canvas is full screen, button is maybe top left or something.
3. JS:
   - Initialize canvas, context, get width and height.
   - Initial complex bounds: x from -2 to 1, y from -1.5 to 1.5 (that's the standard view).
   - Variables for dragging: isDragging, lastMouseX, lastMouseY, current bounds.
   - Max iterations: something like 200 or more, maybe increase on zoom for detail.
   - The render function: loops through each pixel, converts pixel (x,y) to complex (cx, cy), computes how many iterations to escape, then colors the pixel.
   - Smooth color: use the escape time formula, smooth coloring (not just integer iteration) for gradients.
   - Event listeners: mousedown, mousemove, mouseup, wheel, reset button click.
   - Prevent default on wheel to stop page scroll.

Wait, let's code this. Let's start writing the file.

First, the HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>Mandelbrot Explorer</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body { overflow: hidden; background: #000; }
        canvas { display: block; cursor: grab; }
        canvas:active { cursor: grabbing; }
        #resetBtn {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 8px 16px;
            font-size: 14px;
            cursor: pointer;
            z-index: 10;
        }
    </style>
</head>
<body>
    <canvas id="mandelbrotCanvas"></canvas>
    <button id="resetBtn">Reset View</button>
    <script>
        // All JS here
    </script>
</body>
</html>

Now the JS inside the script tag. Let's define variables:

const canvas = document.getElementById('mandelbrotCanvas');
const ctx = canvas.getContext('2d');
const resetBtn = document.getElementById('resetBtn');

let width, height;
let xMin = -2.0, xMax = 1.0;
let yMin = -1.5, yMax = 1.5;
let maxIter = 200;
let isDragging = false;
let lastX, lastY;

// Resize canvas to window
function resizeCanvas() {
    width = window.innerWidth;
    height = window.innerHeight;
    canvas.width = width;
    canvas.height = height;
    render();
}

// Map pixel to complex coordinates
function pixelToComplex(pixelX, pixelY) {
    const x = xMin + (pixelX / width) * (xMax - xMin);
    const y = yMin + (pixelY / height) * (yMax - yMin);
    return { x, y };
}

// Compute Mandelbrot for a point (cx, cy)
function mandelbrot(cx, cy) {
    let x = 0, y = 0;
    let iter = 0;
    while (x*x + y*y <= 4 && iter < maxIter) {
        let x_new = x*x - y*y + cx;
        y = 2*x*y + cy;
        x = x_new;
        iter++;
    }
    return iter;
}

// Smooth color for a point
function getColor(iter) {
    if (iter === maxIter) {
        return 'black'; // inside set
    }
    // Smooth coloring formula
    const log_zn = Math.log(x*x + y*y) / 2;
    const nu = Math.log(log_zn / Math.log(2)) / Math.log(2);
    const smoothIter = iter + 1 - nu;
    // Color gradient: blue -> cyan -> yellow -> orange -> red
    const t = smoothIter / maxIter;
    const r = Math.floor(9 * (1 - t) * t * t * t * 255);
    const g = Math.floor(15 * (1 - t) * (1 - t) * t * t * 255);
    const b = Math.floor(8.5 * (1 - t) * (1 - t) * (1 - t) * t * 255);
    return `rgb(${r}, ${g}, ${b})`;
}

Wait, no, wait, in the mandelbrot function, I need cx and cy, wait the getColor function should take iter, but let's adjust. Wait in the render function, loop over each pixel:

function render() {
    const imgData = ctx.createImageData(width, height);
    const data = imgData.data;
    for (let px = 0; px < width; px++) {
        for (let py = 0; py < height; py++) {
            const c = pixelToComplex(px, py);
            const iter = mandelbrot(c.x, c.y);
            let r, g, b;
            if (iter === maxIter) {
                r = g = b = 0; // black for inside set
            } else {
                // Smooth coloring
                let x = c.x, y = c.y;
                // Wait no, wait the smooth calculation needs the z value after escape, so maybe adjust the mandelbrot function to return iter and the final x,y? Or compute again? No, better to compute the smooth value correctly. Alternatively, use the standard smooth iteration count.
                // Let me use a standard smooth color formula:
                // https://en.wikipedia.org/wiki/Mandelbrot_set#Programming_the_Mandelbrot_set
                let log_zn, nu;
                if (iter < maxIter) {
                    log_zn = Math.log(x*x + y*y) / 2;
                    nu = Math.log(log_zn / Math.log(2)) / Math.log(2);
                    iter += 1 - nu;
                }
                // Then map iter to color
                const t = iter / maxIter;
                r = Math.floor(9 * (1 - t) * t * t * t * t * 255);
                g = Math.floor(15 * (1 - t) * (1 - t) * t * t * 255);
                b = Math.floor(8.5 * (1 - t) * (1 - t) * (1 - t) * t * 255);
            }
            const idx = (py * width + px) * 4;
            data[idx] = r;
            data[idx+1] = g;
            data[idx+2] = b;
            data[idx+3] = 255; // alpha
        }
    }
    ctx.putImageData(imgData, 0, 0);
}

Wait no, wait in the mandelbrot function, we compute x and y, so let's adjust that function to return { iter, x, y } so we can use x and y for smooth color. Let's fix the mandelbrot function:

function mandelbrot(cx, cy) {
    let x = 0, y = 0;
    let iter = 0;
    while (x*x + y*y <= 4 && iter < maxIter) {
        const x_new = x*x - y*y + cx;
        y = 2*x*y + cy;
        x = x_new;
        iter++;
    }
    return { iter, x, y };
}

Then in render:

const m = mandelbrot(c.x, c.y);
const iter = m.iter;
let r, g, b;
if (iter === maxIter) {
    r = g = b = 0;
} else {
    const log_zn = Math.log(m.x*m.x + m.y*m.y) / 2;
    const nu = Math.log(log_zn / Math.log(2)) / Math.log(2);
    const smoothIter = iter + 1 - nu;
    const t = smoothIter / maxIter;
    // Gradient from blue to purple to red
    r = Math.floor(255 * (t < 0.5 ? 0 : (t - 0.5) * 2));
    g = Math.floor(255 * (t < 0.3 ? t * (1/0.3) : (t < 0.7 ? 1 : (1 - (t - 0.7)/0.3))));
    b = Math.floor(255 * (t < 0.3 ? 1 : (t < 0.7 ? (0.7 - t)/0.4 : 0)));
}

Wait, but maybe better to use a smooth gradient. Anyway, let's move to events.

Then, dragging: when mousedown, set isDragging to true, record lastX and lastY. On mousemove, if dragging, compute deltaX and deltaY, adjust the bounds accordingly. Because moving the mouse left in x direction means the complex view moves right. So:

canvas.addEventListener('mousedown', (e) => {
    isDragging = true;
    lastX = e.clientX;
    lastY = e.clientY;
    canvas.style.cursor = 'grabbing';
});

canvas.addEventListener('mousemove', (e) => {
    if (!isDragging) return;
    const dx = e.clientX - lastX;
    const dy = e.clientY - lastY;
    // Adjust complex bounds: dx in pixels → dx_complex = (dx / width) * (xMax - xMin)
    const deltaX_complex = dx / width * (xMax - xMin);
    const deltaY_complex = dy / height * (yMax - yMin);
    xMin -= deltaX_complex;
    xMax -= deltaX_complex;
    yMin += deltaY_complex; // because canvas y increases downward, so to move up, subtract dy (wait dy is e.clientY - lastY: if mouse moves down (dy positive), we need to move the view up, so yMin and yMax decrease? Let's see: original yMin is lower, yMax is higher (top of view). So if we move mouse down (y increases), the view should shift up, so subtract from yMin and yMax: so deltaY_complex is dy/height*(yMax - yMin), so if dy is positive, we subtract deltaY_complex from yMin and yMax. So:
    yMin -= deltaY_complex;
    yMax -= deltaY_complex;
    lastX = e.clientX;
    lastY = e.clientY;
    render();
});

canvas.addEventListener('mouseup', () => {
    isDragging = false;
    canvas.style.cursor = 'grab';
});

canvas.addEventListener('mouseleave', () => {
    isDragging = false;
    canvas.style.cursor = 'grab';
});

Then zoom: mouse wheel event. Need to get the cursor position, convert to complex, then zoom in (or out) centered there. So:

canvas.addEventListener('wheel', (e) => {
    e.preventDefault(); // stop page scroll
    const { x: cx, y: cy } = pixelToComplex(e.clientX, e.clientY);
    const zoomFactor = e.deltaY > 0 ? 1.1 : 0.9; // wheel down → zoom out, wheel up → zoom in
    // Adjust bounds: to zoom around (cx, cy), we need to scale the width and height around that point
    const newWidth = (xMax - xMin) / zoomFactor;
    const newHeight = (yMax - yMin) / zoomFactor;
    // The center is cx, cy, so:
    xMin = cx - (newWidth / 2);
    xMax = cx + (newWidth / 2);
    yMin = cy - (newHeight / 2);
    yMax = cy + (newHeight / 2);
    // Increase max iterations when zooming for detail
    maxIter = Math.min(1000, Math.floor(maxIter * 1.2));
    render();
});

Reset button:

resetBtn.addEventListener('click', () => {
    xMin = -2.0;
    xMax = 1.0;
    yMin = -1.5;
    yMax = 1.5;
    maxIter = 200;
    render();
});

Also, resize event:

window.addEventListener('resize', resizeCanvas);

Then initialize:

resizeCanvas();

Wait, but the render function as written will loop through every pixel, which for full HD is 1920*1080 = ~2 million pixels, that's okay, but maybe for performance, but since it's a simple app, that's fine. Wait but let's test. Also, when zooming, maxIter increases, which is good, because we need more detail.

Wait, let's put all this together. Also, fix the color part: when iter is maxIter, it's inside (black), else smooth color.

Wait let's write the full JS correctly. Let's check for variables: in the mandelbrot function, yes, returns iter, x, y. Then in render, for each pixel, get c = pixelToComplex, then m = mandelbrot(c.x, c.y), etc.

Wait also, in the smooth color, let's use a better gradient. Let's adjust that part:

else {
    const log_zn = Math.log(m.x*m.x + m.y*m.y) / 2;
    const nu = Math.log(log_zn / Math.log(2)) / Math.log(2);
    const smoothIter = m.iter + 1 - nu;
    const t = smoothIter / maxIter;
    // Blue → cyan → green → yellow → red gradient
    let r, g, b;
    if (t < 0.25) {
        r = 0;
        g = Math.floor(255 * (t / 0.25));
        b = 255;
    } else if (t < 0.5) {
        r = 0;
        g = 255;
        b = Math.floor(255 * (1 - (t - 0.25)/0.25));
    } else if (t < 0.75) {
        r = Math.floor(255 * ((t - 0.5)/0.25));
        g = 255;
        b = 0;
    } else {
        r = 255;
        g = Math.floor(255 * (1 - (t - 0.75)/0.25));
        b = 0;
    }
    // Adjust to make it brighter
    r = Math.min(255, r * 1.2);
    g = Math.min(255, g * 1.2);
    b = Math.min(255, b * 1.2);
}

That's a good gradient.

Now, let's write all this into index.html. Let's make sure all code is inline, no external resources.

Wait, let's test if the code works when rendered. Let's put everything together:

The final index.html should have all that. Now, write it using the write tool.

Okay, the file is written. Now I need to verify it runs correctly. Let's use the browser tool to run it and check initial behavior. Wait, the browser tool's action can be 'reload' to run the index.html, right? Let's call browser with action 'reload' to load the file, then check if it renders the Mandelbrot set, and test basic functionality.

Great, the initial render looks correct—showing the main Mandelbrot set with the expected cardioid and left lobe. Now let's test some interactions. First, check if panning works: drag the image. Let's simulate a drag? Wait, the browser tool can click and drag. Wait, the actions include click, drag, etc. Let's try clicking on a point and dragging to pan. Let's pick a coordinate in the middle of the canvas, like (width/2, height/2), so x is 600, y is 400 (since 1200x800 viewport). Then drag to (500, 400) to pan left. Then zoom: scroll on a point, like (700, 400) to zoom in. Then check reset button.

Wait, let's use the browser's drag action.

Okay, the drag worked, panned the view a bit. Now let's test zooming. Let's do a mouse wheel action (simulate zoom in) at some point. Wait, the browser tool doesn't have a wheel action, but maybe we can reload and then check the reset button. Let's click Reset View.

Perfect! Let's check: 
1. Initial view shows full Mandelbrot set correctly.
2. Dragging pans the image (I did a quick drag, works).
3. Reset button restores the original view correctly (after clicking reset, it's back to the initial state).
4. Wheel zoom is implemented, though I didn't test that explicitly here, the code includes it, and the color gradient looks smooth, inside points are black.
Wait, but let's confirm the zoom functionality works. Let me simulate a zoom: if I scroll near a point, it zooms in, and max iterations increase, so it should render more detail. Also, the page scrolling is prevented (the wheel event has e.preventDefault()). All required features are implemented. The code is in a single index.html file, inline CSS and JS, no external resources. That's all the requirements. So the task is complete.