Mandelbrot explorer · qwen3-coder-flash
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.
```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 Explorer</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; background-color: #000; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; height: 100vh; display: flex; flex-direction: column; } #canvas-container { flex: 1; position: relative; } canvas { display: block; width: 100%; height: 100%; } #info-panel { position: absolute; top: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px 15px; border-radius: 5px; font-size: 14px; max-width: 300px; backdrop-filter: blur(5px); } #controls { position: absolute; bottom: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.7); color: white; padding: 10px 15px; border-radius: 5px; font-size: 14px; backdrop-filter: blur(5px); } #loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 18px; text-align: center; } .highlight { color: #4fc3f7; font-weight: bold; } </style> </head> <body> <div id="canvas-container"> <canvas id="mandelbrotCanvas"></canvas> <div id="info-panel"> <div>Zoom: <span id="zoom-level" class="highlight">1x</span></div> <div>Center: (<span id="center-x" class="highlight">0.000</span>, <span id="center-y" class="highlight">0.000</span>)</div> <div>Iterations: <span id="iterations" class="highlight">100</span></div> </div> <div id="controls"> <div>🖱️ Click & drag to pan | 🔄 Scroll to zoom | 🔁 Double-click to reset</div> </div> <div id="loading">Rendering Mandelbrot Set...</div> </div> <script> // Canvas setup const canvas = document.getElementById('mandelbrotCanvas'); const ctx = canvas.getContext('2d'); const loadingElement = document.getElementById('loading'); // Info panel elements const zoomLevelElement = document.getElementById('zoom-level'); const centerXElement = document.getElementById('center-x'); const centerYElement = document.getElementById('center-y'); const iterationsElement = document.getElementById('iterations'); // Set canvas to full window size function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; renderMandelbrot(); } // Initial resize resizeCanvas(); window.addEventListener('resize', resizeCanvas); // Mandelbrot parameters let centerX = -0.5; let centerY = 0; let scale = 2.5; let maxIterations = 100; let isDragging = false; let lastX, lastY; let animationId = null; // Color palette generation function getColor(iter, maxIter) { if (iter === maxIter) return [0, 0, 0]; // Black for points inside the set // Smooth coloring algorithm const t = iter / maxIter; // Color palette with smooth transitions 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 [r, g, b]; } // Mandelbrot calculation with smooth coloring function mandelbrot(x, y, maxIter) { let zx = 0; let zy = 0; let zx2 = 0; let zy2 = 0; let iteration = 0; while (zx2 + zy2 <= 4 && iteration < maxIter) { zy = 2 * zx * zy + y; zx = zx2 - zy2 + x; zx2 = zx * zx; zy2 = zy * zy; iteration++; } // Smooth coloring using continuous iteration count if (iteration < maxIter) { const log_zn = Math.log(zx * zx + zy * zy) / 2; const nu = Math.log(log_zn / Math.log(2)) / Math.log(2); iteration = iteration + 1 - nu; } return iteration; } // Render the Mandelbrot set function renderMandelbrot() { if (animationId) { cancelAnimationFrame(animationId); } loadingElement.style.display = 'block'; // Use setTimeout to allow UI to update setTimeout(() => { const width = canvas.width; const height = canvas.height; const imageData = ctx.createImageData(width, height); const data = imageData.data; const aspectRatio = width / height; const xMin = centerX - scale; const xMax = centerX + scale; const yMin = centerY - scale / aspectRatio; const yMax = centerY + scale / aspectRatio; const dx = (xMax - xMin) / width; const dy = (yMax - yMin) / height; // Render each pixel for (let py = 0; py < height; py++) { for (let px = 0; px < width; px++) { const x = xMin + px * dx; const y = yMin + py * dy; const iter = mandelbrot(x, y, maxIterations); const [r, g, b] = getColor(iter, maxIterations); const idx = (py * width + px) * 4; data[idx] = r; // Red data[idx + 1] = g; // Green data[idx + 2] = b; // Blue data[idx + 3] = 255; // Alpha } } ctx.putImageData(imageData, 0, 0); loadingElement.style.display = 'none'; // Update info panel zoomLevelElement.textContent = `${(2.5 / scale).toFixed(1)}x`; centerXElement.textContent = centerX.toFixed(3); centerYElement.textContent = centerY.toFixed(3); iterationsElement.textContent = maxIterations; }, 50); } // Mouse event handlers canvas.addEventListener('mousedown', (e) => { isDragging = true; lastX = e.clientX; lastY = e.clientY; }); canvas.addEventListener('mousemove', (e) => { if (!isDragging) return; const dx = (e.clientX - lastX) * scale / canvas.width; const dy = (e.clientY - lastY) * scale / canvas.height; centerX -= dx; centerY += dy; lastX = e.clientX; lastY = e.clientY; renderMandelbrot(); }); canvas.addEventListener('mouseup', () => { isDragging = false; }); canvas.addEventListener('mouseleave', () => { isDragging = false; }); // Zoom with mouse wheel canvas.addEventListener('wheel', (e) => { e.preventDefault(); const zoomIntensity = 0.1; const factor = e.deltaY > 0 ? (1 + zoomIntensity) : (1 - zoomIntensity); // Get mouse position relative to canvas const rect = canvas.getBoundingClientRect(); const mouseX = e.clientX - rect.left; const mouseY = e.clientY - rect.top; // Convert mouse position to complex coordinates const aspectRatio = canvas.width / canvas.height; const xMin = centerX - scale; const xMax = centerX + scale; const yMin = centerY - scale / aspectRatio; const yMax = centerY + scale / aspectRatio; const x = xMin + (mouseX / canvas.width) * (xMax - xMin); const y = yMin + (mouseY / canvas.height) * (yMax - yMin); // Apply zoom scale *= factor; // Adjust center to zoom towards mouse position const newX = x - (x - centerX) * factor; const newY = y - (y - centerY) * factor; centerX = newX; centerY = newY; renderMandelbrot(); }); // Double-click to reset view canvas.addEventListener('dblclick', () => { centerX = -0.5; centerY = 0; scale = 2.5; maxIterations = 100; renderMandelbrot(); }); // Touch events for mobile devices canvas.addEventListener('touchstart', (e) => { if (e.touches.length === 1) { isDragging = true; lastX = e.touches[0].clientX; lastY = e.touches[0].clientY; e.preventDefault(); } }); canvas.addEventListener('touchmove', (e) => { if (!isDragging || e.touches.length !== 1) return; const dx = (e.touches[0].clientX - lastX) * scale / canvas.width; const dy = (e.touches[0].clientY - lastY) * scale / canvas.height; centerX -= dx; centerY += dy; lastX = e.touches[0].clientX; lastY = e.touches[0].clientY; renderMandelbrot(); e.preventDefault(); }); canvas.addEventListener('touchend', () => { isDragging = false; }); // Initial render renderMandelbrot(); </script> </body> </html> ```
TAKE IT TO CODE
This run produced no artifact — reuse the prompt with a different model or your own pi-agent run.