Mandelbrot explorer · mercury-2
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.
This one-shot run produced no runnable artifact.
agent produced no index.html
The transcript below shows what the model did — read it to see why the one shot fell short.
transcript · 2 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.
**index.html** ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Mandelbrot Explorer</title> <style> html, body { margin:0; padding:0; overflow:hidden; height:100%; background:#000; } canvas { display:block; width:100vw; height:100vh; } </style> </head> <body> <canvas id="c"></canvas> <script> (() => { const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); let width, height; const maxIter = 500; // View parameters let offsetX = -0.5; // centre in complex plane let offsetY = 0; let scale = 300; // pixels per unit // Interaction state let isDragging = false; let dragStartX, dragStartY, dragStartOffX, dragStartOffY; // Resize canvas to fill window const resize = () => { width = canvas.width = window.innerWidth; height = canvas.height = window.innerHeight; draw(); }; window.addEventListener('resize', resize); resize(); // Convert HSL to RGB (0‑255) const hslToRgb = (h, s, l) => { s /= 100; l /= 100; const k = n => (n + h / 30) % 12; const a = s * Math.min(l, 1 - l); const f = n => { const color = l - a * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))); return Math.round(255 * color); }; return [f(0), f(8), f(4)]; }; // Draw the Mandelbrot set const draw = () => { const img = ctx.createImageData(width, height); const data = img.data; for (let py = 0; py < height; ++py) { const y0 = (py - height / 2) / scale + offsetY; for (let px = 0; px < width; ++px) { const x0 = (px - width / 2) / scale + offsetX; let x = 0, y = 0; let iteration = 0; let x2 = 0, y2 = 0; while (x2 + y2 <= 4 && iteration < maxIter) { y = 2 * x * y + y0; x = x2 - y2 + x0; x2 = x * x; y2 = y * y; ++iteration; } // Smooth coloring let hue; if (iteration < maxIter) { const log_zn = Math.log(x2 + y2) / 2; const nu = Math.log(log_zn / Math.log(2)) / Math.log(2); const smoothIter = iteration + 1 - nu; hue = 360 * smoothIter / maxIter; } else { hue = 0; } const [r, g, b] = hslToRgb(hue, 100, iteration < maxIter ? 50 : 0); const idx = (py * width + px) * 4; data[idx] = r; data[idx + 1] = g; data[idx + 2] = b; data[idx + 3] = 255; } } ctx.putImageData(img, 0, 0); }; // Mouse wheel zoom canvas.addEventListener('wheel', e => { e.preventDefault(); const zoom = e.deltaY < 0 ? 1.2 : 0.8; const rect = canvas.getBoundingClientRect(); const mx = e.clientX - rect.left; const my = e.clientY - rect.top; const wx = (mx - width / 2) / scale + offsetX; const wy = (my - height / 2) / scale + offsetY; scale *= zoom; // Keep the point under the cursor stationary offsetX = wx - (mx - width / 2) / scale; offsetY = wy - (my - height / 2) / scale; draw(); }, { passive: false }); // Click‑and‑drag pan canvas.addEventListener('mousedown', e => { isDragging = true; dragStartX = e.clientX; dragStartY = e.clientY; dragStartOffX = offsetX; dragStartOffY = offsetY; }); canvas.addEventListener('mousemove', e => { if (!isDragging) return; const dx = e.clientX - dragStartX; const dy = e.clientY - dragStartY; offsetX = dragStartOffX - dx / scale; offsetY = dragStartOffY - dy / scale; draw(); }); canvas.addEventListener('mouseup', () => isDragging = false); canvas.addEventListener('mouseleave', () => isDragging = false); })(); </script> </body> </html> ``` The file is self‑contained: * **CSS** makes the canvas fill the whole viewport. * **JavaScript**: * Handles window resize, mouse‑wheel zoom (centered on cursor), and click‑and‑drag panning. * Renders the Mandelbrot set into an `ImageData` buffer using a smooth iteration count and maps it to an HSL‑based color gradient. * Updates the canvas whenever the view changes. Save this as `index.html` in the current directory and open it in a browser – the Mandelbrot set will be displayed full‑screen with interactive pan and zoom.
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.