Mandelbrot explorer · qwen3-coder-next

Successfully wrote to /tmp/job-A3C2NO/index.html

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -1500.500000, Im: -1000.000000 Zoom: 0.40x Iterations: 73","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -1500.500000, Im: -1000.000000 Zoom: 0.40x Iterations: 73","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -1500.500000, Im: -1000.000000 Zoom: 0.40x Iterations: 73","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -1500.500000, Im: -1000.000000 Zoom: 0.40x Iterations: 73","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -1500.500000, Im: -1000.000000 Zoom: 0.40x Iterations: 73","images":"model does not support images"}

return hslToRgb(hue, saturation, lightness); } function hslToRgb(h, s, l) { h = h / 360; s = s / 100; l = l / 100; let r, g, b; if (s === 0) { r = g = b = l; } else { const hue2rgb = (p, q, t) => { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1/6) return p + (q - p) * 6 * t; if (t < 1/2) return q; if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; }; const q = l < 0.5 ? l * (1 + s) : l + s - l * s; const p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }; } // Render the Mandelbrot set function render() { const imageData = ctx.createImageData(width, height); const data = imageData.data; // Adjust iterations based on zoom level maxIterations = Math.floor(100 + Math.log2(1 / zoom) * 20); maxIterations = Math.min(Math.max(maxIterations, 50), 1000); // Render with progress const startY = 0; const rowsPerFrame = Math.max(1, Math.floor(height / 50)); [129 more lines in file. Use offset=250 to continue.]

Successfully replaced 1 block(s) in /tmp/job-A3C2NO/index.html.

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -0.500000, Im: 0.000000 Zoom: 0.40x Iterations: 73","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -0.500000, Im: 0.000000 Zoom: 0.40x Iterations: 73","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -0.500000, Im: 0.000000 Zoom: 0.40x Iterations: 73","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -0.500000, Im: 0.000000 Zoom: 0.33x Iterations: 67","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -0.500000, Im: 0.000000 Zoom: 0.33x Iterations: 67","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -1221.902758, Im: -610.701379 Zoom: 0.33x Iterations: 67","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -1221.902758, Im: -610.701379 Zoom: 0.33x Iterations: 67","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -1295.186924, Im: -558.791762 Zoom: 0.33x Iterations: 67","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -1182.207169, Im: -528.256693 Zoom: 0.33x Iterations: 67","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -0.500000, Im: 0.000000 Zoom: 0.40x Iterations: 73","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -0.500000, Im: 0.000000 Zoom: 0.40x Iterations: 73","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -750.500000, Im: -250.000000 Zoom: 0.40x Iterations: 73","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -0.500000, Im: 0.000000 Zoom: 0.24x Iterations: 59","images":"model does not support images"}

<!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: #000; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } canvas { display: block; width: 100vw; height: 100vh; cursor: grab; } canvas:active { cursor: grabbing; } .controls { position: fixed; top: 20px; left: 20px; z-index: 100; background: rgba(0, 0, 0, 0.7); padding: 15px 20px; border-radius: 8px; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.1); } .controls h1 { color: #fff; font-size: 18px; margin-bottom: 10px; font-weight: 600; } .controls p { color: #ccc; font-size: 12px; margin-bottom: 8px; } button { background: #3a6ea5; color: white; border: none; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 14px; font-weight: 600; transition: background 0.2s; } button:hover { background: #4a7eb5; } button:active { transform: translateY(1px); } .info { position: fixed; bottom: 20px; left: 20px; z-index: 100; background: rgba(0, 0, 0, 0.7); padding: 10px 15px; border-radius: 8px; backdrop-filter: blur(5px); border: 1px solid rgba(255, 255, 255, 0.1); color: #ccc; font-size: 12px; } .info span { margin-right: 15px; } </style> </head> <body> <canvas id="mandelbrotCanvas"></canvas> <div class="controls"> <h1>Mandelbrot Set Explorer</h1> <p>🖱️ Drag to pan</p> <p>🎨 Scroll to zoom (centered on cursor)</p> <p>⚡ Dynamic iteration count</p> <button id="resetBtn">Reset View</button> </div> <div class="info"> <span id="position">Re: 0.000000, Im: 0.000000</span> <span id="zoomLevel">Zoom: 1.00x</span> <span id="iterations">Iterations: 100</span> </div> <script> const canvas = document.getElementById('mandelbrotCanvas'); const ctx = canvas.getContext('2d'); // Reset button const resetBtn = document.getElementById('resetBtn'); // Info elements const positionEl = document.getElementById('position'); const zoomLevelEl = document.getElementById('zoomLevel'); const iterationsEl = document.getElementById('iterations'); // State let width, height; let centerX = -0.5; let centerY = 0.0; let zoom = 2.5; // Initial zoom level (complex units per pixel) let maxIterations = 100; let isDragging = false; let dragStartX, dragStartY; let dragStartCenterX, dragStartCenterY; let renderId = 0; // Initialize canvas function resize() { width = window.innerWidth; height = window.innerHeight; canvas.width = width; canvas.height = height; render(); } // Convert pixel coordinates to complex plane function pixelToComplex(x, y) { return { re: centerX + (x - width / 2) * zoom, im: centerY + (y - height / 2) * zoom }; } // Convert complex coordinates to pixel function complexToPixel(re, im) { return { x: (re - centerX) / zoom + width / 2, y: (im - centerY) / zoom + height / 2 }; } // Smooth escape-time coloring function getColor(re, im) { let zRe = 0, zIm = 0; let iter = 0; let zRe2 = 0, zIm2 = 0; // Optimization: check for main cardioid and period-2 bulb // Main cardioid check const q = (re - 0.25) * (re - 0.25) + im * im; if (q * (q + (re - 0.25)) < 0.25 * im * im) { return { r: 0, g: 0, b: 0 }; // Inside the set } // Period-2 bulb check (circle centered at -1, radius 1/4) if ((re + 1) * (re + 1) + im * im < 0.0625) { return { r: 0, g: 0, b: 0 }; } // Escape time algorithm while (iter < maxIterations && zRe2 + zIm2 < 4) { zIm = 2 * zRe * zIm + im; zRe = zRe2 - zIm2 + re; zRe2 = zRe * zRe; zIm2 = zIm * zIm; iter++; } if (iter === maxIterations) { return { r: 0, g: 0, b: 0 }; // Inside the set } // Smooth coloring const log_zn = Math.log(zRe2 + zIm2) / 2; const nu = Math.log(log_zn / Math.log(2)) / Math.log(2); const smoothedIter = iter + 1 - nu; // Color palette using trigonometric functions const hue = (smoothedIter * 0.05 +Date.now() * 0.0001) % 360; const saturation = 80; const lightness = 50; return hslToRgb(hue, saturation, lightness); } function hslToRgb(h, s, l) { h = h / 360; s = s / 100; l = l / 100; let r, g, b; if (s === 0) { r = g = b = l; } else { const hue2rgb = (p, q, t) => { if (t < 0) t += 1; if (t > 1) t -= 1; if (t < 1/6) return p + (q - p) * 6 * t; if (t < 1/2) return q; if (t < 2/3) return p + (q - p) * (2/3 - t) * 6; return p; }; const q = l < 0.5 ? l * (1 + s) : l + s - l * s; const p = 2 * l - q; r = hue2rgb(p, q, h + 1/3); g = hue2rgb(p, q, h); b = hue2rgb(p, q, h - 1/3); } return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) }; } // Render the Mandelbrot set function render() { const imageData = ctx.createImageData(width, height); const data = imageData.data; // Adjust iterations based on zoom level maxIterations = Math.floor(100 + Math.log2(1 / zoom) * 20); maxIterations = Math.min(Math.max(maxIterations, 50), 1000); // Render with progress const startY = 0; const rowsPerFrame = Math.max(1, Math.floor(height / 50)); let row = startY; function renderRows() { const frameEndRow = Math.min(row + rowsPerFrame, height); for (let y = row; y < frameEndRow; y++) { for (let x = 0; x < width; x++) { const complex = pixelToComplex(x, y); const color = getColor(complex.re, complex.im); const idx = (y * width + x) * 4; data[idx] = color.r; data[idx + 1] = color.g; data[idx + 2] = color.b; data[idx + 3] = 255; // Alpha } } ctx.putImageData(imageData, 0, 0); row = frameEndRow; if (row < height) { requestAnimationFrame(renderRows); } } renderRows(); // Update info positionEl.textContent = `Re: ${centerX.toFixed(6)}, Im: ${centerY.toFixed(6)}`; zoomLevelEl.textContent = `Zoom: ${ (1 / zoom).toFixed(2)}x`; iterationsEl.textContent = `Iterations: ${maxIterations}`; } // Drag handling canvas.addEventListener('mousedown', (e) => { isDragging = true; dragStartX = e.clientX; dragStartY = e.clientY; dragStartCenterX = centerX; dragStartCenterY = centerY; }); window.addEventListener('mousemove', (e) => { if (isDragging) { const dx = e.clientX - dragStartX; const dy = e.clientY - dragStartY; centerX = dragStartCenterX - dx * zoom; centerY = dragStartCenterY - dy * zoom; render(); } // Update position display const complex = pixelToComplex(e.clientX, e.clientY); positionEl.textContent = `Re: ${complex.re.toFixed(6)}, Im: ${complex.im.toFixed(6)}`; }); window.addEventListener('mouseup', () => { isDragging = false; }); // Wheel zoom handling canvas.addEventListener('wheel', (e) => { e.preventDefault(); const zoomFactor = Math.exp(-e.deltaY * 0.001); const oldZoom = zoom; zoom *= zoomFactor; // Clamp zoom limits zoom = Math.max(zoom, 1e-15); zoom = Math.min(zoom, 10); // Zoom toward cursor const cursorComplex = pixelToComplex(e.clientX, e.clientY); centerX = cursorComplex.re - (e.clientX - width / 2) * zoom; centerY = cursorComplex.im - (e.clientY - height / 2) * zoom; render(); }, { passive: false }); // Reset view resetBtn.addEventListener('click', () => { centerX = -0.5; centerY = 0.0; zoom = 2.5; render(); }); // Keyboard controls window.addEventListener('keydown', (e) => { switch (e.key) { case 'Escape': if (isDragging) { isDragging = false; } break; case 'r': case 'R': centerX = -0.5; centerY = 0.0; zoom = 2.5; render(); break; case 'ArrowLeft': centerX -= zoom * 50; render(); break; case 'ArrowRight': centerX += zoom * 50; render(); break; case 'ArrowUp': centerY -= zoom * 50; render(); break; case 'ArrowDown': centerY += zoom * 50; render(); break; } }); // Initial render window.addEventListener('resize', resize); // Update initial position display after canvas is sized requestAnimationFrame(() => { const initialPos = pixelToComplex(width / 2, height / 2); positionEl.textContent = `Re: ${initialPos.re.toFixed(6)}, Im: ${initialPos.im.toFixed(6)}`; resize(); }); </script> </body> </html>

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -0.500000, Im: 0.000000 Zoom: 0.40x Iterations: 73","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -0.500000, Im: 0.000000 Zoom: 0.40x Iterations: 73","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -0.500000, Im: 0.000000 Zoom: 0.33x Iterations: 67","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -0.500000, Im: 0.000000 Zoom: 0.33x Iterations: 67","images":"model does not support images"}

{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"Mandelbrot Set Explorer\n\n🖱️ Drag to pan\n\n🎨 Scroll to zoom (centered on cursor)\n\n⚡ Dynamic iteration count\n\nReset View\nRe: -0.500000, Im: 0.000000 Zoom: 0.40x Iterations: 73","images":"model does not support images"}

-rw-r--r-- 1 node node 11753 Oct 16 01:32 /tmp/job-A3C2NO/index.html