Fractal Explorer

<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Fractal Atlas</title>
<style>
:root{--glass:rgba(10,14,27,.66);--line:rgba(205,226,255,.25);--text:#eef6ff;--muted:#aab9ce;--accent:#79dfff}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#02040b;color:var(--text);font:12px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}canvas{display:block}#fractal{width:100vw;height:100vh;cursor:crosshair}#zoomBox{position:fixed;display:none;pointer-events:none;border:1px solid white;box-shadow:0 0 0 1px #000,0 0 16px #fff;mix-blend-mode:difference;z-index:5}.hud{position:fixed;z-index:6;background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(12px);border-radius:10px;box-shadow:0 10px 35px #0008;transition:opacity .45s}.top{top:15px;left:15px;padding:10px 12px;line-height:1.6;min-width:258px}.name{letter-spacing:.16em;color:#fff;font-weight:bold}.readout{color:var(--muted)}.readout b{color:var(--accent);font-weight:500}.controls{right:15px;bottom:15px;padding:10px;display:flex;gap:7px;align-items:center}.buttons{display:flex;gap:5px}button,select,input{font:inherit;color:var(--text);background:#131c30cc;border:1px solid var(--line);border-radius:6px;height:27px}button{padding:0 9px;cursor:pointer}button:hover{border-color:var(--accent);background:#1a2945}select{padding:0 5px;max-width:110px}input[type=range]{width:85px;accent-color:#6ddcff}.lab{color:var(--muted);white-space:nowrap}.palettes{display:flex;gap:4px}.chip{width:20px;height:20px;border-radius:5px;border:2px solid #ffffff22;padding:0}.chip.active{border-color:#fff;box-shadow:0 0 8px #bceaff}.hint{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:5;color:#c6d4e7;background:#0c1220aa;border:1px solid #ffffff1a;border-radius:20px;padding:7px 12px;transition:opacity .7s}.julia{position:fixed;right:15px;top:15px;width:min(31vw,360px);aspect-ratio:1.35;z-index:7;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#05070e;box-shadow:0 8px 30px #0009;display:none}.julia canvas{width:100%;height:100%}.julia header{position:absolute;left:0;right:0;top:0;padding:7px 9px;background:#07101ab8;color:#dff7ff;display:flex;justify-content:space-between}.julia button{height:20px}.hud.idle{opacity:.15}.hud:hover{opacity:1}@media(max-width:680px){.controls{left:10px;right:10px;bottom:10px;flex-wrap:wrap}.top{top:8px;left:8px}.julia{width:44vw;right:8px;top:8px}.hint{display:none}}
</style></head><body>
<canvas id="fractal" aria-label="Interactive Mandelbrot explorer"></canvas><div id="zoomBox"></div>
<div class="hud top" id="readout"><div class="name">FRACTAL ATLAS <span id="mode">MANDELBROT</span></div><div class="readout">MAG <b id="mag">×1.00</b> &nbsp; ITER <b id="iter">240</b> &nbsp; <b id="fps">—</b> FPS</div><div class="readout">RE <b id="coordRe">−0.500000000000</b><br>IM <b id="coordIm">0.000000000000</b></div></div>
<div class="hud controls" id="controls"><div class="buttons"><button id="back" title="Back (Backspace)">←</button><button id="reset" title="Reset (R)">Reset</button><button id="juliaBtn" title="Julia mode (J)">Julia</button><button id="save" title="Save bookmark">Save</button><select id="bookmarks" title="Bookmarks"><option>Bookmarks…</option></select></div><div class="palettes" id="palettes"></div><label class="lab">Cycle <input id="cycle" type="range" min="0" max="100" value="0"></label><label class="lab">Iter <input id="iterSlider" type="range" min="80" max="2000" value="240"></label></div>
<div class="julia" id="juliaPane"><canvas id="juliaCanvas"></canvas><header><span>JULIA <b id="juliaC"></b></span><button id="closeJulia">×</button></header></div><div class="hint" id="hint">Drag to frame & zoom · right-drag / Space+drag pans · wheel zooms · J then click selects Julia</div>
<script>
'use strict';
/* ==================== TUNABLE CONSTANTS ==================== */
const CFG={baseIterations:240,iterationPerZoom:52,maxIterations:2400,maxMagnification:1e13,zoomSpeed:.0018,passes:[4,2,1],escapeRadius:256,chunkRows:22,previewInterval:45};
const PALETTES=[
 {name:'Fire',stops:[[0,4,15],[18,8,52],[102,19,84],[224,70,56],[255,190,80],[255,249,210]]},
 {name:'Ocean',stops:[[1,9,30],[5,38,93],[13,104,160],[48,193,203],[191,245,230],[249,252,210]]},
 {name:'Mono',stops:[[0,0,0],[32,45,66],[110,143,166],[220,235,239],[255,255,255]]},
 {name:'Prism',stops:[[20,0,55],[0,74,173],[0,217,190],[246,234,50],[250,67,53],[172,0,154]]}
];
/* ==================== STATE & CANVAS ==================== */
const canvas=document.querySelector('#fractal'),ctx=canvas.getContext('2d',{alpha:false});
const jc=document.querySelector('#juliaCanvas'),jctx=jc.getContext('2d',{alpha:false});
let W=0,H=0,DPR=1,img,buf,job=0,rendering=false,pass=0,row=0,manualIter=240,palette=0,cycle=0;
let view={re:-.5,im:0,scale:3}; const initial={re:-.5,im:0,scale:3}; let history=[];
let juliaOn=false,juliaC={re:-.5,im:0},jW=0,jH=0,jImg,jBuf,jTimer=0;
let pointer=null,drag=null,lastInput=performance.now(),fps=0,lastFrame=performance.now();
const $=s=>document.querySelector(s), zoomBox=$('#zoomBox');
function fmt(n){return (Math.abs(n)>=1e5||Math.abs(n)>0&&Math.abs(n)<1e-5)?n.toExponential(6):n.toFixed(12)}
function magnification(){return initial.scale/view.scale}
function maxIter(){return Math.min(CFG.maxIterations,Math.max(manualIter,Math.round(CFG.baseIterations+Math.log10(Math.max(1,magnification()))*CFG.iterationPerZoom)))}
function resize(){DPR=Math.min(devicePixelRatio||1,1.5);W=Math.round(innerWidth*DPR);H=Math.round(innerHeight*DPR);canvas.width=W;canvas.height=H;img=ctx.createImageData(W,H);buf=img.data; schedule();if(juliaOn)renderJulia()}
addEventListener('resize',resize);
function pointAt(x,y,v=view,w=W,h=H){const aspect=w/h;return {re:v.re+(x/w-.5)*v.scale*aspect,im:v.im+(.5-y/h)*v.scale}}
function viewForRect(a,b){let x1=Math.min(a.x,b.x)*DPR,x2=Math.max(a.x,b.x)*DPR,y1=Math.min(a.y,b.y)*DPR,y2=Math.max(a.y,b.y)*DPR;let pw=x2-x1,ph=y2-y1;if(pw<3||ph<3)return null;const center=pointAt((x1+x2)/2,(y1+y2)/2);return {re:center.re,im:center.im,scale:view.scale*ph/H}}
function updateReadout(){const m=magnification();$('#mag').textContent='×'+(m>=1e4?m.toExponential(3):m.toFixed(2));$('#iter').textContent=maxIter();$('#coordRe').textContent=fmt(view.re);$('#coordIm').textContent=fmt(view.im);$('#back').disabled=!history.length}
/* ==================== ESCAPE MATH (allocation-free pixel loop) ==================== */
function iterate(re,im,cr,ci,limit,isJulia){let zr=isJulia?re:0,zi=isJulia?im:0,cRe=isJulia?cr:re,cIm=isJulia?ci:im,n=0,zr2=0,zi2=0;while(n<limit&&zr2+zi2<=CFG.escapeRadius){zi=2*zr*zi+cIm;zr=zr2-zi2+cRe;zr2=zr*zr;zi2=zi*zi;n++}if(n===limit)return limit;return n+1-Math.log2(Math.log(Math.sqrt(zr2+zi2)))}
function paletteColor(t,target,outIndex){const st=PALETTES[palette].stops,L=st.length; t=((t+cycle)%1+1)%1*(L-1);const i=Math.min(L-2,t|0),f=t-i,a=st[i],b=st[i+1];target[outIndex]=a[0]+(b[0]-a[0])*f;target[outIndex+1]=a[1]+(b[1]-a[1])*f;target[outIndex+2]=a[2]+(b[2]-a[2])*f;target[outIndex+3]=255}
function renderRows(step,from,to,target,w,h,v,isJulia=false,cr=0,ci=0){const lim=maxIter(),asp=w/h,sc=v.scale;let y,x,i,pt,mu;for(y=from;y<to;y+=step){const im=v.im+(.5-y/h)*sc;for(x=0;x<w;x+=step){const re=v.re+(x/w-.5)*sc*asp;mu=iterate(re,im,cr,ci,lim,isJulia);for(let yy=y;yy<Math.min(y+step,h);yy++)for(let xx=x;xx<Math.min(x+step,w);xx++){i=(yy*w+xx)*4;if(mu>=lim){target[i]=target[i+1]=target[i+2]=0;target[i+3]=255}else paletteColor(.025*mu,target,i)}}}}
/* ==================== PROGRESSIVE MAIN RENDER ==================== */
function schedule(){job++;rendering=true;pass=0;row=0;requestAnimationFrame(renderStep);updateReadout()}
function renderStep(){const token=job,step=CFG.passes[pass],end=Math.min(H,row+CFG.chunkRows*step);renderRows(step,row,end,buf,W,H,view,false);ctx.putImageData(img,0,0,0,row,W,end-row);row=end;if(token!==job)return;if(row<H){requestAnimationFrame(renderStep)}else if(pass<CFG.passes.length-1){pass++;row=0;requestAnimationFrame(renderStep)}else{rendering=false;let now=performance.now();fps=Math.round(1000/(now-lastFrame));lastFrame=now;$('#fps').textContent=fps}}
function colorOnly(){if(!img)return;const oldCycle=cycle; schedule()}
/* ==================== NAVIGATION ==================== */
function commit(next){if(next.scale<initial.scale/CFG.maxMagnification){flash('Precision cap ×1e13');return}history.push({...view});if(history.length>40)history.shift();view=next;schedule();hashState()}
function wheel(e){e.preventDefault();touch();const p=pointAt(e.clientX*DPR,e.clientY*DPR),factor=Math.exp(e.deltaY*CFG.zoomSpeed),nextScale=Math.min(20,view.scale*factor);if(nextScale<initial.scale/CFG.maxMagnification){flash('Precision cap ×1e13');return}history.push({...view});view={re:p.re+(view.re-p.re)*factor,im:p.im+(view.im-p.im)*factor,scale:nextScale};schedule();hashState()}
canvas.addEventListener('wheel',wheel,{passive:false});
canvas.addEventListener('pointerdown',e=>{canvas.setPointerCapture(e.pointerId);touch();pointer={x:e.clientX,y:e.clientY};let pan=e.button===2||e.shiftKey||e.getModifierState('Space');drag={x:e.clientX,y:e.clientY,pan,base:{...view}};if(!pan){zoomBox.style.display='block';zoomBox.style.left=e.clientX+'px';zoomBox.style.top=e.clientY+'px';zoomBox.style.width='0';zoomBox.style.height='0'}});
canvas.addEventListener('pointermove',e=>{touch();if(juliaOn&&!drag){let p=pointAt(e.clientX*DPR,e.clientY*DPR);juliaC=p;$('#juliaC').textContent=fmt(p.re)+' '+fmt(p.im)+'i';debouncedJulia()}if(!drag)return;let dx=e.clientX-drag.x,dy=e.clientY-drag.y;if(drag.pan){let asp=W/H;view={re:drag.base.re-dx*DPR/W*drag.base.scale*asp,im:drag.base.im+dy*DPR/H*drag.base.scale,scale:drag.base.scale};schedule()}else{zoomBox.style.left=Math.min(drag.x,e.clientX)+'px';zoomBox.style.top=Math.min(drag.y,e.clientY)+'px';zoomBox.style.width=Math.abs(dx)+'px';zoomBox.style.height=Math.abs(dy)+'px'}});
canvas.addEventListener('pointerup',e=>{if(!drag)return;let d=drag;drag=null;zoomBox.style.display='none';let dist=Math.hypot(e.clientX-d.x,e.clientY-d.y);if(d.pan){hashState();return}if(dist<4){if(juliaOn){juliaC=pointAt(e.clientX*DPR,e.clientY*DPR);renderJulia();return}return}let n=viewForRect({x:d.x,y:d.y},{x:e.clientX,y:e.clientY});if(n)commit(n)});canvas.addEventListener('contextmenu',e=>e.preventDefault());
function panKey(dx,dy){history.push({...view});view={re:view.re+dx*view.scale*(W/H)*.08,im:view.im+dy*view.scale*.08,scale:view.scale};schedule();hashState()}
addEventListener('keydown',e=>{if(e.target.matches('input,select'))return;touch();if(e.key==='ArrowLeft')panKey(-1,0);if(e.key==='ArrowRight')panKey(1,0);if(e.key==='ArrowUp')panKey(0,1);if(e.key==='ArrowDown')panKey(0,-1);if(e.key==='+'||e.key==='=')zoomCenter(.65);if(e.key==='-')zoomCenter(1.55);if(e.key==='Backspace'){e.preventDefault();goBack()}if(e.key.toLowerCase()==='r')reset();if(e.key.toLowerCase()==='j')toggleJulia()});
function zoomCenter(f){let n={re:view.re,im:view.im,scale:view.scale*f};commit(n)}function goBack(){if(history.length){view=history.pop();schedule();hashState()}}function reset(){history=[];view={...initial};schedule();hashState()}
/* ==================== JULIA PREVIEW ==================== */
function debouncedJulia(){clearTimeout(jTimer);jTimer=setTimeout(renderJulia,CFG.previewInterval)}
function renderJulia(){if(!juliaOn)return;const r=jc.getBoundingClientRect();jW=Math.max(1,Math.round(r.width*DPR));jH=Math.max(1,Math.round(r.height*DPR));if(jc.width!==jW||jc.height!==jH){jc.width=jW;jc.height=jH;jImg=jctx.createImageData(jW,jH);jBuf=jImg.data}let jv={re:0,im:0,scale:3};renderRows(2,0,jH,jBuf,jW,jH,jv,true,juliaC.re,juliaC.im);renderRows(1,0,jH,jBuf,jW,jH,jv,true,juliaC.re,juliaC.im);jctx.putImageData(jImg,0,0);$('#juliaC').textContent=fmt(juliaC.re)+' '+fmt(juliaC.im)+'i'}
function toggleJulia(){juliaOn=!juliaOn;$('#juliaPane').style.display=juliaOn?'block':'none';$('#juliaBtn').classList.toggle('active',juliaOn);$('#mode').textContent=juliaOn?'MANDELBROT + JULIA':'MANDELBROT';if(juliaOn)renderJulia()}
$('#closeJulia').onclick=toggleJulia;
/* ==================== UI, PALETTES & BOOKMARKS ==================== */
function makePalettes(){let box=$('#palettes');PALETTES.forEach((p,i)=>{let b=document.createElement('button');b.className='chip'+(!i?' active':'');b.title=p.name;b.style.background=`linear-gradient(135deg,${p.stops.map(x=>`rgb(${x})`).join(',')})`;b.onclick=()=>{palette=i;document.querySelectorAll('.chip').forEach((x,k)=>x.classList.toggle('active',k===i));schedule();hashState()};box.appendChild(b)})}makePalettes();
$('#back').onclick=goBack;$('#reset').onclick=reset;$('#juliaBtn').onclick=toggleJulia;$('#cycle').oninput=e=>{cycle=+e.target.value/100;schedule()};$('#iterSlider').oninput=e=>{manualIter=+e.target.value;schedule()};
function getState(){return {re:view.re,im:view.im,scale:view.scale,palette,manualIter,juliaOn,jr:juliaC.re,ji:juliaC.im}}
function applyState(s){view={re:+s.re,im:+s.im,scale:+s.scale};palette=+s.palette||0;manualIter=+s.manualIter||240;juliaC={re:+s.jr||-.5,im:+s.ji||0};if(!!s.juliaOn!==juliaOn)toggleJulia();$('#iterSlider').value=manualIter;document.querySelectorAll('.chip').forEach((x,k)=>x.classList.toggle('active',k===palette));schedule()}
function loadBookmarks(){let data=JSON.parse(localStorage.getItem('fractal-atlas-bookmarks')||'{}'),sel=$('#bookmarks');Object.keys(data).forEach(n=>{let o=new Option(n,n);sel.add(o)});return data}
let bookmarks=loadBookmarks();$('#save').onclick=()=>{let n=prompt('Bookmark this view as:');if(n){bookmarks[n]=getState();localStorage.setItem('fractal-atlas-bookmarks',JSON.stringify(bookmarks));let o=new Option(n,n);$('#bookmarks').add(o);$('#bookmarks').value=n}};$('#bookmarks').onchange=e=>{if(bookmarks[e.target.value])applyState(bookmarks[e.target.value])};
function hashState(){let s=getState();location.hash=[s.re,s.im,s.scale,s.palette,s.manualIter,s.juliaOn?1:0,s.jr,s.ji].map(encodeURIComponent).join(',')}
function loadHash(){if(!location.hash)return;let a=location.hash.slice(1).split(',');if(a.length>=5)applyState({re:a[0],im:a[1],scale:a[2],palette:a[3],manualIter:a[4],juliaOn:a[5]==='1',jr:a[6],ji:a[7]})}
function touch(){lastInput=performance.now();$('.top').classList.remove('idle');$('.controls').classList.remove('idle');clearTimeout(touch.t);touch.t=setTimeout(()=>{$('.top').classList.add('idle');$('.controls').classList.add('idle')},3500)}function flash(s){let h=$('#hint');h.textContent=s;h.style.opacity=1;setTimeout(()=>h.style.opacity='',1100)}
/* ==================== DEBUG API ==================== */
window.fractal={iterationsAt(re,im){return iterate(re,im,0,0,maxIter(),false)},setView(v){view={re:+v.re,im:+v.im,scale:+v.scale};schedule()},getView(){return {...view}},getState,applyState,saveBookmark(n){bookmarks[n]=getState();localStorage.setItem('fractal-atlas-bookmarks',JSON.stringify(bookmarks))},loadBookmark(n){applyState(bookmarks[n])},viewForRect};
loadHash();resize();touch();
</script></body></html>
<!-- agent-meta {"model":"openai/gpt-5.6-terra","provider":"openrouter","persona":"full","sessionId":"adb460ec-b977-47b0-b867-a8a2f0a1af64","tokensIn":143169,"tokensOut":6856,"tokensTotal":150025,"turns":12,"toolCalls":12,"failedToolCalls":0,"timestamp":"2026-07-31T19:19:44.764Z"} -->