Fractal Explorer

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Mandelbrot / Julia Explorer</title>
<style>
/* ── css: base ── */
*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden;background:#03050b;color:#d9efff;font:12px ui-monospace,SFMono-Regular,Consolas,monospace}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}#overlay{pointer-events:none}#hud,#controls{position:absolute;z-index:3;background:linear-gradient(135deg,#102238b8,#07111ec4);border:1px solid #90d7f044;box-shadow:0 12px 36px #0008;backdrop-filter:blur(13px);transition:opacity .5s}#hud{left:22px;top:20px;padding:13px 16px;border-radius:10px;min-width:285px}.brand{letter-spacing:.24em;font-weight:800;color:#eafaff;margin-bottom:10px}.brand span{color:#62d8ff}#metrics{display:flex;gap:12px;align-items:baseline;color:#84a9c5}#metrics b{font-size:16px;color:#f8feff}#coords{color:#b9e9ff}#hint{margin-top:10px;color:#7895ac;font-size:10px}#controls{right:20px;top:20px;width:245px;padding:14px;border-radius:11px;display:grid;gap:12px}.control-head{display:flex;align-items:center;gap:7px;color:#73dcff;letter-spacing:.1em}.control-head strong{margin-right:auto}button,select,input{font:inherit;color:inherit}button,select{background:#10283b;border:1px solid #86d9f266;border-radius:5px;padding:6px 8px;cursor:pointer}button:hover{background:#1c455e;border-color:#b7efff}label{display:grid;gap:6px;color:#9cc1d8}input[type=range]{width:100%;accent-color:#62d8ff}output{float:right;color:#fff}.chips{display:flex;gap:7px}.chip{width:30px;height:17px;padding:0;border-radius:4px;border:2px solid #ffffff44}.chip.active{border-color:white;box-shadow:0 0 10px #c7f7ff}.actions{display:flex;gap:7px}.actions button{flex:1;font-size:10px}kbd{opacity:.6}#bookmarks{width:100%}#notice{min-height:13px;margin:0;color:#ffcd77;font-size:10px}#reticle{display:none;position:absolute;width:23px;height:23px;z-index:2;pointer-events:none;border:1px solid #dfffff;border-radius:50%;mix-blend-mode:difference;transform:translate(-50%,-50%)}#reticle:before,#reticle:after{content:'';position:absolute;background:#fff;opacity:.8}#reticle:before{width:1px;height:29px;left:10px;top:-4px}#reticle:after{height:1px;width:29px;top:10px;left:-4px}body.idle #hud,body.idle #controls{opacity:.25}body.idle #controls:hover,body.idle #hud:hover{opacity:1}@media(max-width:700px){#controls{top:auto;bottom:14px;right:12px;width:220px}#hud{left:12px;top:12px}.brand,#hint{display:none}}
</style>
</head>
<body>
<main id="app"><canvas id="fractalCanvas" aria-label="Interactive fractal canvas"></canvas><canvas id="overlay" aria-hidden="true"></canvas><section id="hud"><div class="brand">FRACTAL <span>LAB</span></div><div id="metrics"><b id="mag">×1.00</b><span id="coords">−0.500000, 0.000000</span><span id="iterLabel">256 iterations</span><span id="fps">-- fps</span></div><div id="hint">Wheel to zoom · drag to pan · Shift-drag to frame · J for Julia</div></section><aside id="controls" aria-label="Fractal controls"><div class="control-head"><strong id="modeLabel">MANDELBROT</strong><button id="backBtn" title="Back to previous view">↶</button><button id="resetBtn" title="Reset view">Reset</button></div><label>Palette <div id="palettes" class="chips"></div></label><label>Color drift <input id="drift" type="range" min="0" max="100" value="0"></label><label>Iterations <input id="iterations" type="range" min="80" max="1800" step="10" value="0"><output id="iterOut">auto</output></label><div class="actions"><button id="juliaBtn">Julia from cursor <kbd>J</kbd></button><button id="saveBtn">Save view</button></div><select id="bookmarks" aria-label="Saved bookmarks"><option value="">Bookmarks…</option></select><p id="notice"></p></aside><div id="reticle"><i></i></div></main>
<script>
(function () {
'use strict';
var __mods = {};
var __cache = {};
var __map = {};
function __require(id) {
  if (__cache[id]) return __cache[id].exports;
  var module = __cache[id] = { exports: {} };
  var factory = __mods[id];
  if (!factory) throw new Error("Module not found: " + id);
  factory(module.exports, function (spec) {
    var target = (__map[id] && __map[id][spec]) || spec;
    return __require(target);
  }, module);
  return module.exports;
}

// ── module: src/main.ts ──
__mods["src/main.ts"] = function (exports, require, module) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
// FRACTAL LAB — allocation-free escape loop, progressive passes, and interaction
const CONFIG = { baseIter: 180, iterPerZoom: 42, maxIter: 1800, maxScale: 1e13, wheelSpeed: .0017, passes: [4, 2, 1], escape: 256 };
const canvas = document.querySelector('#fractalCanvas'), overlay = document.querySelector('#overlay');
const ctx = canvas.getContext('2d', { alpha: false }), ox = overlay.getContext('2d');
const $ = (s) => document.querySelector(s);
const mag = $('#mag'), coords = $('#coords'), iterLabel = $('#iterLabel'), fps = $('#fps'), notice = $('#notice'), reticle = $('#reticle');
const iterInput = document.querySelector('#iterations'), drift = document.querySelector('#drift'), bookmarks = document.querySelector('#bookmarks');
let view = { re: -.5, im: 0, scale: 1, palette: 0, manual: 0, type: 'mandelbrot', jr: 0, ji: 0 }, history = [];
let W = 0, H = 0, pixels, job = 0, pass = 0, lastTime = performance.now(), frameCount = 0, hover = { x: 0, y: 0, re: 0, im: 0 };
const palettes = [[[8, 13, 30], [20, 76, 120], [36, 185, 194], [241, 232, 146], [250, 89, 55]], [[3, 8, 25], [7, 46, 94], [13, 132, 181], [80, 216, 209], [232, 251, 210]], [[4, 4, 7], [70, 54, 110], [205, 109, 158], [255, 211, 128], [250, 249, 235]], [[14, 3, 30], [104, 15, 154], [255, 54, 158], [255, 216, 72], [20, 222, 198]]];
function iterations() { return view.manual || Math.min(CONFIG.maxIter, Math.round(CONFIG.baseIter + CONFIG.iterPerZoom * Math.log10(view.scale))); }
function resize() { const d = Math.min(devicePixelRatio, 1.5); W = Math.floor(innerWidth * d); H = Math.floor(innerHeight * d); for (const c of [canvas, overlay]) {
    c.width = W;
    c.height = H;
} pixels = ctx.createImageData(W, H); schedule(); }
function map(x, y) { const unit = 4 / (Math.min(W, H) * view.scale); return { re: view.re + (x - W / 2) * unit, im: view.im + (y - H / 2) * unit }; }
function paintOverlay(box) { ox.clearRect(0, 0, W, H); if (box) {
    ox.save();
    ox.strokeStyle = '#e9ffff';
    ox.lineWidth = 1.5;
    ox.setLineDash([7, 4]);
    ox.strokeRect(box.x, box.y, box.w, box.h);
    ox.fillStyle = '#a5efff16';
    ox.fillRect(box.x, box.y, box.w, box.h);
    ox.restore();
} }
function selectionBox(x, y) { if (!down)
    return { x, y, w: 0, h: 0 }; let dx = x - down.x, dy = y - down.y; const ratio = W / H; if (Math.abs(dx) / Math.max(1, Math.abs(dy)) > ratio)
    dy = (dy < 0 ? -1 : 1) * Math.abs(dx) / ratio;
else
    dx = (dx < 0 ? -1 : 1) * Math.abs(dy) * ratio; return { x: down.x, y: down.y, w: dx, h: dy }; }
function render(token) { if (token !== job)
    return; const step = CONFIG.passes[pass], data = pixels.data, max = iterations(), pal = palettes[view.palette], offset = Number(drift.value) / 100; const unit = 4 / (Math.min(W, H) * view.scale); for (let y = 0; y < H; y += step) {
    const cim0 = view.im + (y - H / 2) * unit;
    for (let x = 0; x < W; x += step) {
        let zr = view.type === 'julia' ? view.re + (x - W / 2) * unit : 0, zi = view.type === 'julia' ? cim0 : 0;
        const cr = view.type === 'julia' ? view.jr : view.re + (x - W / 2) * unit, ci = view.type === 'julia' ? view.ji : cim0;
        let n = 0, zr2 = 0, zi2 = 0;
        while (zr2 + zi2 <= CONFIG.escape && n < max) {
            zi = 2 * zr * zi + ci;
            zr = zr2 - zi2 + cr;
            zr2 = zr * zr;
            zi2 = zi * zi;
            n++;
        }
        let r = 0, g = 0, b = 0;
        if (n < max) {
            const smooth = n + 1 - Math.log2(Math.log(Math.sqrt(zr2 + zi2)));
            let t = ((smooth / max * 3 + offset) % 1 + 1) % 1 * (pal.length - 1), i = Math.floor(t), f = t - i, a = pal[i], q = pal[Math.min(i + 1, pal.length - 1)];
            r = a[0] + (q[0] - a[0]) * f;
            g = a[1] + (q[1] - a[1]) * f;
            b = a[2] + (q[2] - a[2]) * f;
        }
        for (let yy = y; yy < Math.min(H, y + step); yy++)
            for (let xx = x; xx < Math.min(W, x + step); xx++) {
                const k = (yy * W + xx) * 4;
                data[k] = r;
                data[k + 1] = g;
                data[k + 2] = b;
                data[k + 3] = 255;
            }
    }
} ctx.putImageData(pixels, 0, 0); if (++pass < CONFIG.passes.length)
    setTimeout(() => render(token), 0); }
function schedule() { job++; pass = 0; updateHUD(); requestAnimationFrame(() => render(job)); }
function updateHUD() { mag.textContent = '×' + (view.scale < 1000 ? view.scale.toFixed(2) : view.scale.toExponential(2)); coords.textContent = `${view.re.toFixed(9)}, ${view.im.toFixed(9)}`; iterLabel.textContent = iterations() + ' iterations'; $('#modeLabel').textContent = view.type.toUpperCase(); document.querySelector('#backBtn').disabled = !history.length; reticle.style.display = view.type === 'mandelbrot' ? 'block' : 'none'; }
function commit(next) { history.push({ ...view }); view = { ...view, ...next }; if (view.scale > CONFIG.maxScale) {
    view.scale = CONFIG.maxScale;
    notice.textContent = 'Precision ceiling reached ×1e13';
} schedule(); }
function zoomAt(x, y, factor) { const before = map(x, y), ns = Math.min(CONFIG.maxScale, view.scale * factor); commit({ scale: ns, re: before.re - (before.re - view.re) / factor, im: before.im - (before.im - view.im) / factor }); }
// Input: plain drag pans; Shift-drag frames exact selected geometry
let down = null;
canvas.addEventListener('pointerdown', e => { canvas.setPointerCapture(e.pointerId); down = { x: e.offsetX * W / canvas.clientWidth, y: e.offsetY * H / canvas.clientHeight, ...map(e.offsetX * W / canvas.clientWidth, e.offsetY * H / canvas.clientHeight), shift: e.shiftKey }; });
canvas.addEventListener('pointermove', e => { const x = e.offsetX * W / canvas.clientWidth, y = e.offsetY * H / canvas.clientHeight, m = map(x, y); hover = { x, y, ...m }; reticle.style.left = (e.offsetX) + 'px'; reticle.style.top = e.offsetY + 'px'; if (!down)
    return; if (down.shift) {
    paintOverlay(selectionBox(x, y));
}
else {
    view.re = down.re - (m.re - view.re);
    view.im = down.im - (m.im - view.im);
    schedule();
} });
canvas.addEventListener('pointerup', e => { if (!down)
    return; const x = e.offsetX * W / canvas.clientWidth, y = e.offsetY * H / canvas.clientHeight; if (down.shift && Math.abs(x - down.x) > 6 && Math.abs(y - down.y) > 6) {
    const box = selectionBox(x, y), a = map(box.x, box.y), b = map(box.x + box.w, box.y + box.h);
    const worldWidth = Math.abs(b.re - a.re);
    commit({ re: (a.re + b.re) / 2, im: (a.im + b.im) / 2, scale: 4 / (worldWidth * Math.min(W, H) / W) }); /* aspect-locked selection maps exactly to viewport */
} paintOverlay(); down = null; });
canvas.addEventListener('wheel', e => { e.preventDefault(); zoomAt(e.offsetX * W / canvas.clientWidth, e.offsetY * H / canvas.clientHeight, Math.exp(-e.deltaY * CONFIG.wheelSpeed)); }, { passive: false });
addEventListener('keydown', e => { if (e.key === '+' || e.key === '=')
    zoomAt(W / 2, H / 2, 1.7); if (e.key === '-')
    zoomAt(W / 2, H / 2, 1 / 1.7); const d = 4 / (Math.min(W, H) * view.scale) * .14; if (e.key === 'ArrowLeft')
    commit({ re: view.re - d }); if (e.key === 'ArrowRight')
    commit({ re: view.re + d }); if (e.key === 'ArrowUp')
    commit({ im: view.im - d }); if (e.key === 'ArrowDown')
    commit({ im: view.im + d }); if (e.key.toLowerCase() === 'j' && view.type === 'mandelbrot')
    commit({ type: 'julia', jr: hover.re, ji: hover.im }); });
// Controls and persistence
const chips = $('#palettes');
palettes.forEach((p, i) => { const b = document.createElement('button'); b.className = 'chip' + (!i ? ' active' : ''); b.style.background = `linear-gradient(90deg,rgb(${p[0]}),rgb(${p[2]}),rgb(${p[4]}))`; b.title = 'Palette ' + (i + 1); b.onclick = () => { view.palette = i; document.querySelectorAll('.chip').forEach(x => x.classList.remove('active')); b.classList.add('active'); schedule(); }; chips.append(b); });
drift.oninput = () => schedule();
iterInput.oninput = () => { view.manual = Number(iterInput.value); $('#iterOut').textContent = view.manual ? 'manual' : 'auto'; schedule(); };
$('#resetBtn').onclick = () => { history = []; view = { re: -.5, im: 0, scale: 1, palette: view.palette, manual: 0, type: 'mandelbrot', jr: 0, ji: 0 }; schedule(); };
$('#backBtn').onclick = () => { const old = history.pop(); if (old) {
    view = old;
    schedule();
} };
$('#juliaBtn').onclick = () => { if (view.type === 'mandelbrot')
    commit({ type: 'julia', jr: hover.re, ji: hover.im });
else
    commit({ type: 'mandelbrot' }); };
function saved() { return JSON.parse(localStorage.getItem('fractal-views') || '{}'); }
function populate() { const s = saved(); bookmarks.innerHTML = '<option value="">Bookmarks…</option>'; Object.keys(s).forEach(k => bookmarks.add(new Option(k, k))); }
$('#saveBtn').onclick = () => { const name = prompt('Bookmark name'); if (name) {
    const s = saved();
    s[name] = { ...view };
    localStorage.setItem('fractal-views', JSON.stringify(s));
    populate();
    notice.textContent = 'Saved ' + name;
} };
bookmarks.onchange = () => { const v = saved()[bookmarks.value]; if (v) {
    history.push({ ...view });
    view = { ...v };
    schedule();
    notice.textContent = 'Restored ' + bookmarks.value;
} };
let renderFrames = 0;
const originalPut = ctx.putImageData.bind(ctx);
ctx.putImageData = ((...args) => { renderFrames++; return originalPut(...args); });
setInterval(() => { const now = performance.now(); if (now - lastTime > 1000) {
    fps.textContent = Math.round(renderFrames * 1000 / (now - lastTime)) + ' render/s';
    renderFrames = 0;
    lastTime = now;
} }, 250);
let idleTimer = 0;
addEventListener('pointermove', () => { document.body.classList.remove('idle'); clearTimeout(idleTimer); idleTimer = setTimeout(() => document.body.classList.add('idle'), 3000); });
window.fractal = { iterationsAt: (re, im) => { let zr = view.type === 'julia' ? re : 0, zi = view.type === 'julia' ? im : 0, cr = view.type === 'julia' ? view.jr : re, ci = view.type === 'julia' ? view.ji : im, n = 0; while (zr * zr + zi * zi <= 256 && n < iterations()) {
        const a = zr * zr - zi * zi + cr;
        zi = 2 * zr * zi + ci;
        zr = a;
        n++;
    } return n; }, setView: (v) => { view = { ...view, ...v }; schedule(); }, getView: () => ({ ...view }), save: (name) => { const s = saved(); s[name] = { ...view }; localStorage.setItem('fractal-views', JSON.stringify(s)); populate(); }, load: (name) => { const v = saved()[name]; if (v) {
        view = { ...v };
        schedule();
    } } };
populate();
addEventListener('resize', resize);
resize();
};

// ── entry ──
__require("src/main.ts");
})();
</script>
</body>
</html>
<!-- agent-meta {"model":"openai/gpt-5.6-terra","provider":"openrouter","persona":"typescript","sessionId":"8c4091d9-7dff-46ad-88df-f280dbb92a4a","tokensIn":159797,"tokensOut":6316,"tokensTotal":166113,"turns":18,"toolCalls":20,"failedToolCalls":2,"timestamp":"2026-07-31T17:44:54.435Z"} -->