Mandelbrot explorer · llama-4-scout
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.
[write(index.html, "<!DOCTYPE html>\n<html>\n<head>\n <title>Mandelbrot Set</title>\n <style>\n body {\n margin: 0;\n background-color: #f0f0f0;\n }\n #canvas {\n width: 100vw;\n height: 100vh;\n border: none;\n }\n </style>\n</head>\n<body>\n <canvas id=\"canvas\"></canvas>\n <script>\n const canvas = document.getElementById('canvas');\n const ctx = canvas.getContext('2d');\n let width = window.innerWidth;\n let height = window.innerHeight;\n canvas.width = width;\n canvas.height = height;\n let minX = -2.5;\n let maxX = 1.5;\n let minY = -1.5;\n let maxY = 1.5;\n let dragging = false;\n let lastX, lastY;\n let zoomFactor = 1.5;\n\n function drawMandelbrot() {\n for (let x = 0; x < width; x++) {\n for (let y = 0; y < height; y++) {\n let cReal = minX + (x / width) * (maxX - minX);\n let cImaginary = minY + (y / height) * (maxY - minY);\n let m = iterateMandelbrot(cReal, cImaginary);\n let color = getColor(m);\n ctx.fillStyle = color;\n ctx.fillRect(x, y, 1, 1);\n }\n }\n }\n\n function iterateMandelbrot(cReal, cImaginary) {\n let zReal = 0;\n let zImaginary = 0;\n let iteration = 0;\n while (zReal * zReal + zImaginary * zImaginary < 4 && iteration < 100) {\n let tempReal = zReal * zReal - zImaginary * zImaginary + cReal;\n let tempImaginary = 2 * zReal * zImaginary + cImaginary;\n zReal = tempReal;\n zImaginary = tempImaginary;\n iteration++;\n }\n return iteration;\n }\n\n function getColor(iteration) {\n let r, g, b;\n if (iteration === 100) {\n r = g = b = 0;\n } else {\n let h = iteration / 100;\n [r, g, b] = hslToRgb(h, 1, 0.5);\n }\n return `rgb(${r * 255}, ${g * 255}, ${b * 255})`;\n }\n\n function hslToRgb(h, s, l) {\n let r, g, b;\n if (s === 0) {\n r = g = b = l;\n } else {\n let q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n let p = 2 * l - q;\n r = hueToRgb(p, q, h + 1/3);\n g = hueToRgb(p, q, h);\n b = hueToRgb(p, q, h - 1/3);\n }\n return [r, g, b];\n }\n\n function hueToRgb(p, q, t) {\n if (t < 0) t += 1;\n if (t > 1) t -= 1;\n if (t < 1/6) return p + (q - p) * 6 * t;\n if (t < 1/2) return q;\n if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;\n return p;\n }\n\n canvas.addEventListener('mousedown', (e) => {\n dragging = true;\n lastX = e.clientX;\n lastY = e.clientY;\n });\n\n canvas.addEventListener('mousemove', (e) => {\n if (dragging) {\n let dx = e.clientX - lastX;\n let dy = e.clientY - lastY;\n let rangeX = (maxX - minX);\n let rangeY = (maxY - minY);\n minX -= dx / width * rangeX;\n maxX -= dx / width * rangeX;\n minY -= dy / height * rangeY;\n maxY -= dy / height * rangeY;\n lastX = e.clientX;\n lastY = e.clientY;\n ctx.clearRect(0, 0, width, height);\n drawMandelbrot();\n }\n });\n\n canvas.addEventListener('mouseup', () => {\n dragging = false;\n });\n\n canvas.addEventListener('wheel', (e) => {\n let zoomCenterX = minX + (e.clientX / width) * (maxX - minX);\n let zoomCenterY = minY + (e.clientY / height) * (maxY - minY);\n let rangeX = (maxX - minX);\n let rangeY = (maxY - minY);\n if (e.deltaY < 0) {\n rangeX /= zoomFactor;\n rangeY /= zoomFactor;\n } else {\n rangeX *= zoomFactor;\n rangeY *= zoomFactor;\n }\n minX = zoomCenterX - rangeX / 2;\n maxX = zoomCenterX + rangeX / 2;\n minY = zoomCenterY - rangeY / 2;\n maxY = zoomCenterY + rangeY / 2;\n ctx.clearRect(0, 0, width, height);\n drawMandelbrot();\n });\n\n drawMandelbrot();\n </script>\n</body>\n</html>")]
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.