Mandelbrot explorer · gpt-4o-mini
Render the Mandelbrot set with a smooth color gradient on a full-screen canvas, with click-and-drag to pan and mouse-wheel to zoom.
transcript · 4 messages
Render the Mandelbrot set with a smooth color gradient on a full-screen canvas, with click-and-drag to pan and mouse-wheel to zoom.
Here's a self-contained HTML code that renders the Mandelbrot set with a smooth color gradient on a full-screen canvas. It allows for click-and-drag to pan and mouse-wheel to zoom. ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mandelbrot Set</title> <style> body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; background: #000; } canvas { display: block; } </style> </head> <body> <canvas id="mandelbrotCanvas"></canvas> <script> const canvas = document.getElementById('mandelbrotCanvas'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; let minVal = -2.5, maxVal = 1; let minImag = -1, maxImag = 1; let zoomFactor = 1; let isDragging = false; let startX, startY; function mandelbrot(x, y) { let realPart = x; let imaginaryPart = y; let iterations = 0; const maxIterations = 100; while (iterations < maxIterations) { const tempReal = realPart * realPart - imaginaryPart * imaginaryPart + x; imaginaryPart = 2 * realPart * imaginaryPart + y; realPart = tempReal; if (realPart * realPart + imaginaryPart * imaginaryPart > 4) { break; } iterations++; } return iterations === maxIterations ? 0 : iterations; } function drawMandelbrot() { for (let x = 0; x < canvas.width; x++) { for (let y = 0; y < canvas.height; y++) { let scaledX = minVal + (maxVal - minVal) * x / canvas.width; let scaledY = minImag + (maxImag - minImag) * y / canvas.height; let iterations = mandelbrot(scaledX, scaledY); const color = iterations === 0 ? 0 : iterations * 16 % 256; ctx.fillStyle = `hsl(${color}, 100%, 50%)`; ctx.fillRect(x, y, 1, 1); } } } let panX = 0, panY = 0; function zoomIn(x, y) { zoomFactor *= 1.2; panX -= (x - canvas.width / 2) / canvas.width * (maxVal - minVal) / zoomFactor; panY -= (y - canvas.height / 2) / canvas.height * (maxImag - minImag) / zoomFactor; updateBounds(); drawMandelbrot(); } function zoomOut(x, y) { zoomFactor /= 1.2; panX -= (x - canvas.width / 2) / canvas.width * (maxVal - minVal) / zoomFactor; panY -= (y - canvas.height / 2) / canvas.height * (maxImag - minImag) / zoomFactor; updateBounds(); drawMandelbrot(); } function updateBounds() { const width = (maxVal - minVal) / zoomFactor; const height = (maxImag - minImag) / zoomFactor; minVal = -2.5 + panX * width; maxVal = 1 + panX * width; minImag = -1 + panY * height; maxImag = 1 + panY * height; } canvas.addEventListener('mousedown', (e) => { isDragging = true; startX = e.clientX; startY = e.clientY; }); canvas.addEventListener('mouseup', () => { isDragging = false; }); canvas.addEventListener('mousemove', (e) => { if (isDragging) { const dx = (e.clientX - startX) / canvas.width * (maxVal - minVal); const dy = (e.clientY - startY) / canvas.height * (maxImag - minImag); panX -= dx; panY -= dy; startX = e.clientX; startY = e.clientY; updateBounds(); drawMandelbrot(); } }); canvas.addEventListener('wheel', (e) => { e.preventDefault(); if (e.deltaY < 0) { zoomIn(e.clientX, e.clientY); } else { zoomOut(e.clientX, e.clientY); } }); drawMandelbrot(); </script> </body> </html> ``` You can save this content into a file named `index.html`. Let me create that file for you.
index.html (4225 bytes)Successfully wrote 4225 bytes to index.html
The file `index.html` has been created successfully with the Mandelbrot set rendering and interactions. You can open it in a web browser to view and interact with the Mandelbrot set. Enjoy exploring!
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
EVALUATION
Mandelbrot renders with harsh color banding; drag pans the view but click, wheel, and keyboard cause solid red blank frames.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.