41:null 42:["$","title",null,{"children":"Complex-Dynamics Art | jmfbo | Observable"}] 48:T3583,(() => { const container = document.createElement('div'); container.style.cssText = 'position:relative;width:100%;height:80vh;background:#000;overflow:hidden;'; const glc = document.createElement('canvas'); const c2d = document.createElement('canvas'); const hud = document.createElement('div'); glc.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;'; c2d.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;display:none;cursor:crosshair;'; hud.style.cssText = 'position:absolute;left:12px;bottom:12px;font:12px/1.5 ui-monospace,monospace;color:#EDE8DF;background:rgba(0,0,0,.55);padding:8px 10px;border-radius:4px;pointer-events:none;white-space:pre-line;'; container.append(glc, c2d, hud); const VERT = `attribute vec2 a_pos;\nvoid main(){ gl_Position = vec4(a_pos, 0.0, 1.0); }`; const FRAG = `precision highp float; uniform vec2 u_res; uniform vec2 u_center; uniform float u_zoom; uniform vec2 u_c; uniform float u_mode; uniform float u_time; vec3 palette(float t){ return 0.5 + 0.5*cos(6.2831853*(t + vec3(0.0,0.33,0.67))); } void main(){ vec2 uv = (gl_FragCoord.xy - 0.5*u_res) / u_zoom + u_center; float iter = 0.0; float trap = 1e10; if (u_mode < 0.5) { vec2 z = vec2(0.0); vec2 c = uv; bool esc = false; for (int i=0;i<512;i++){ z = vec2(z.x*z.x - z.y*z.y, 2.0*z.x*z.y) + c; trap = min(trap, dot(z,z)); if (dot(z,z) > 16.0){ iter = float(i); esc = true; break; } } if (esc) { float logzn = log(dot(z,z)) * 0.5; float nu = log(logzn / log(2.0)) / log(2.0); float s = iter + 1.0 - nu; gl_FragColor = vec4(palette(s/64.0 + u_time*0.02) * (0.6 + 0.4*sin(3.0*log(trap+1.0))), 1.0); } else gl_FragColor = vec4(vec3(0.0), 1.0); } else if (u_mode < 1.5) { vec2 z = uv; vec2 c = u_c; bool esc = false; for (int i=0;i<512;i++){ z = vec2(z.x*z.x - z.y*z.y, 2.0*z.x*z.y) + c; trap = min(trap, dot(z,z)); if (dot(z,z) > 16.0){ iter = float(i); esc = true; break; } } if (esc) { float logzn = log(dot(z,z)) * 0.5; float nu = log(logzn / log(2.0)) / log(2.0); float s = iter + 1.0 - nu; gl_FragColor = vec4(palette(s/64.0 + u_time*0.02) * (0.6 + 0.4*sin(3.0*log(trap+1.0))), 1.0); } else gl_FragColor = vec4(vec3(0.0), 1.0); } else { vec2 z = uv; float root = -1.0; for (int i=0;i<64;i++){ vec2 z2 = vec2(z.x*z.x - z.y*z.y, 2.0*z.x*z.y); vec2 z3 = vec2(z2.x*z.x - z2.y*z.y, z2.x*z.y + z2.y*z.x); vec2 f = vec2(z3.x - 1.0, z3.y); vec2 fp = vec2(3.0*z2.x, 3.0*z2.y); float d = fp.x*fp.x + fp.y*fp.y; vec2 q = vec2((f.x*fp.x + f.y*fp.y)/d, (f.y*fp.x - f.x*fp.y)/d); z -= q; float d1 = length(z - vec2(1.0,0.0)); float d2 = length(z - vec2(-0.5, 0.8660254)); float d3 = length(z - vec2(-0.5,-0.8660254)); float m = min(min(d1,d2),d3); if (m < 0.001){ root = (d1==m) ? 0.0 : (d2==m) ? 1.0 : 2.0; break; } } if (root < -0.5) gl_FragColor = vec4(vec3(0.0),1.0); else if (root < 0.5) gl_FragColor = vec4(vec3(0.95,0.55,0.20),1.0); else if (root < 1.5) gl_FragColor = vec4(vec3(0.20,0.70,0.95),1.0); else gl_FragColor = vec4(vec3(0.60,0.95,0.50),1.0); } }`; function palette(t){ const c = [0.0, 0.33, 0.67]; return [0,1,2].map(k => { const v = 0.5 + 0.5*Math.cos(6.2831853*(t + c[k])); return Math.max(0, Math.min(1, v)); }); } const ctx2 = c2d.getContext('2d'); const gl = glc.getContext('webgl', {antialias:false, preserveDrawingBuffer:true}); function compile(type, src){ const s = gl.createShader(type); gl.shaderSource(s, src); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw gl.getShaderInfoLog(s); return s; } function program(vs, fs){ const p = gl.createProgram(); gl.attachShader(p, compile(gl.VERTEX_SHADER, vs)); gl.attachShader(p, compile(gl.FRAGMENT_SHADER, fs)); gl.linkProgram(p); return p; } const prog = program(VERT, FRAG); gl.useProgram(prog); const buf = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, buf); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 3,-1, -1,3]), gl.STATIC_DRAW); const loc = gl.getAttribLocation(prog, 'a_pos'); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0); const U = { res: gl.getUniformLocation(prog,'u_res'), center: gl.getUniformLocation(prog,'u_center'), zoom: gl.getUniformLocation(prog,'u_zoom'), c: gl.getUniformLocation(prog,'u_c'), mode: gl.getUniformLocation(prog,'u_mode'), time: gl.getUniformLocation(prog,'u_time'), }; const state = { center:[0,0], zoom:1, c:[-0.8,0.156] }; let mode = 0; function resize(){ const w = container.clientWidth || 800; const h = container.clientHeight || 600; const dpr = Math.min(devicePixelRatio || 1, 2); glc.width = w*dpr; glc.height = h*dpr; c2d.width = w*dpr; c2d.height = h*dpr; gl.viewport(0,0,glc.width,glc.height); if (mode === 5) dzInit(); } const bb = { W:600, H:400, maxIter:500, perFrame:1200, total:0, reMin:-2.2, reMax:1.2, imMin:-1.4, imMax:1.4, hist:null }; const dz = { P:0, cr:0n, ci:0n, ps:0n, RW:0, RH:0, refX:null, refY:null, refLen:0, renderY:0, img:null, oc:null }; function dzMaxIter(){ const scaleD = Number(dz.ps) * Math.pow(2, -dz.P); return Math.min(30000, Math.max(1000, Math.round(1000 + 80*Math.max(0, -Math.log2(scaleD))))); } function dzInit(){ dz.RW = Math.max(200, Math.min(300, Math.round(c2d.width/4))); dz.RW -= dz.RW%2; dz.RH = Math.max(120, Math.round(dz.RW*c2d.height/c2d.width)); dz.RH -= dz.RH%2; dz.P = 100; dz.cr = 0n; dz.ci = 0n; dz.ps = (4n << BigInt(dz.P)) / BigInt(dz.RW); dz.img = ctx2.createImageData(dz.RW, dz.RH); dz.oc = document.createElement('canvas'); dz.oc.width = dz.RW; dz.oc.height = dz.RH; dz.renderY = 0; computeRef(); } function computeRef(){ const P = dz.P; const maxIter = dzMaxIter(); const scale = Math.pow(2,-P); let zr = 0n, zi = 0n; dz.refX = new Float64Array(maxIter+1); dz.refY = new Float64Array(maxIter+1); dz.refX[0]=0; dz.refY[0]=0; let len = maxIter; for (let n=1; n<=maxIter; n++){ const nr = ((zr*zr - zi*zi) >> BigInt(P)) + dz.cr; const ni = ((2n*zr*zi) >> BigInt(P)) + dz.ci; zr=nr; zi=ni; dz.refX[n] = Number(zr)*scale; dz.refY[n] = Number(zi)*scale; if (zr*zr + zi*zi > (1n << BigInt(2*P+2))){ len=n; break; } } dz.refLen = len; } function dzZoom(sx, sy){ dz.cr += BigInt(sx - dz.RW/2) * dz.ps; dz.ci += BigInt(dz.RH/2 - sy) * dz.ps; dz.ps /= 2n; while (dz.ps < (1n << 40n)){ const f = 1n << BigInt(dz.P); dz.cr *= f; dz.ci *= f; dz.ps *= f; dz.P *= 2; } dz.renderY = 0; computeRef(); } function bigintPixel(x, y, maxIter){ const P = dz.P; const ccr = dz.cr + BigInt(x - dz.RW/2)*dz.ps; const cci = dz.ci + BigInt(dz.RH/2 - y)*dz.ps; let zr=0n, zi=0n; for (let i=0;i> BigInt(P)) + ccr; const ni = ((2n*zr*zi) >> BigInt(P)) + cci; zr=nr; zi=ni; const mag2 = zr*zr + zi*zi; if (mag2 > (1n << BigInt(2*P+2))){ const L = mag2.toString(2).length - 1 - 2*P; const s = i + 1 - Math.log2(Math.max(1,L)); return palette(s/64).map(v=>Math.round(v*255)); } } return [0,0,0]; } function perturbPixel(dcx, dcy){ let dx=dcx, dy=dcy; for (let i=0;i 0.1) return null; const fx=rx+dx, fy=ry+dy; if (fx*fx + fy*fy > 16){ const logz = Math.log(fx*fx+fy*fy)*0.5; const nu = Math.log(logz/Math.LN2)/Math.LN2; return palette((i+1-nu)/64).map(v=>Math.round(v*255)); } } return [0,0,0]; } function dzPixel(x, y, scaleD, maxIter){ const dcx = (x - dz.RW/2)*scaleD, dcy = (dz.RH/2 - y)*scaleD; const p = perturbPixel(dcx, dcy); return p ? p : bigintPixel(x, y, maxIter); } function dzRenderRows(rows){ const scaleD = Number(dz.ps) * Math.pow(2,-dz.P); const maxIter = dzMaxIter(); const data = dz.img.data; const end = Math.min(dz.RH, dz.renderY + rows); for (let y=dz.renderY; ymax) max=hist[i]; const img = ctx2.createImageData(W,H); const d = img.data; for (let i=0;i4) break; } if(n>=maxIter) continue; for(let k=0;k=0&&px=0&&py{ dragging=true; last=[e.clientX,e.clientY]; }); addEventListener('pointermove', e=>{ if(!dragging||mode!==0)return; const dx=e.clientX-last[0],dy=e.clientY-last[1]; last=[e.clientX,e.clientY]; state.center[0]-=dx/state.zoom; state.center[1]+=dy/state.zoom; }); addEventListener('pointerup', ()=>dragging=false); glc.addEventListener('wheel', e=>{ if(mode!==0)return; e.preventDefault(); state.zoom*=Math.exp(-e.deltaY*0.0015); }, {passive:false}); c2d.addEventListener('pointerdown', e=>{ if(mode!==5)return; const r=c2d.getBoundingClientRect(); const sx=Math.round((e.clientX-r.left)/r.width*dz.RW), sy=Math.round((e.clientY-r.top)/r.height*dz.RH); dzZoom(sx,sy); }); const onKey = e=>{ if(e.key==='1')setMode(0); if(e.key==='2'){state.c=[Math.random()*2-1,Math.random()*2-1];setMode(1);} if(e.key==='3')setMode(2); if(e.key==='4')setMode(3); if(e.key==='5')setMode(4); if(e.key==='6')setMode(5); if(e.key==='j'&&(mode===1||mode===3))state.c=[Math.random()*2-1,Math.random()*2-1]; if(e.key==='e')exportPNG(); }; addEventListener('keydown', onKey); function drawGL(t){ if(mode===3){ const th=t/4000; state.c=[0.7885*Math.cos(th),0.7885*Math.sin(th)]; } const sm=(mode===0)?0.0:(mode===2)?2.0:1.0; gl.uniform2f(U.res, glc.width, glc.height); gl.uniform2f(U.center, state.center[0], state.center[1]); gl.uniform1f(U.zoom, state.zoom); gl.uniform2f(U.c, state.c[0], state.c[1]); gl.uniform1f(U.mode, sm); gl.uniform1f(U.time, t/1000); gl.drawArrays(gl.TRIANGLES, 0, 3); } let raf = 0; function loop(t){ if(mode<4) drawGL(t); else if(mode===4){ buddhaStep(); drawBuddha(); } else if(mode===5 && dz.renderY