2e:null 2f:["$","title",null,{"children":"Buddhabrot | nxrix | Observable"}] 34:T3d7b,{ const preset = presets[mode]; const itb = 10000; const itn = 5000; const b0 = 53; const b1 = 107; const witb = 50000; const witn = 5000; const wb0 = b0; const wb1 = b1; const init = preset.init ?? [ ` zr = 0; zi = 0; cr = uvr; ci = uvi; `, ` zr = 0.0; zi = 0.0; cr = uvr; ci = uvi; ` ]; const iter = preset.iter; const skip = preset.skip ?? ["", ""]; const mirror = preset.mirror ?? "none"; const mirrorCode = { none: { index: "", r: "", g: "", b: "" }, x: { index: ` const idx1 = (h - 1 - py) * w + px; `, r: ` r[idx1]++; `, g: ` g[idx1]++; `, b: ` b[idx1]++; ` }, y: { index: ` const idx1 = py * w + (w - 1 - px); `, r: ` r[idx1]++; `, g: ` g[idx1]++; `, b: ` b[idx1]++; ` }, xy: { index: ` const idx1 = py * w + (w - 1 - px); const idx2 = (h - 1 - py) * w + px; const idx3 = (h - 1 - py) * w + (w - 1 - px); `, r: ` r[idx1]++; r[idx2]++; r[idx3]++; `, g: ` g[idx1]++; g[idx2]++; g[idx3]++; `, b: ` b[idx1]++; b[idx2]++; b[idx3]++; ` } }[mirror] ?? { index: "", r: "", g: "", b: "" }; const wgslMirror = { none: { index: "", inc: () => "" }, x: { index: ` let b1 = ((p.h - 1u - py) * p.w + px) << 2u; `, inc: () => ` atomicAdd(&h[b1 + t], 1u); ` }, y: { index: ` let b1 = (py * p.w + (p.w - 1u - px)) << 2u; `, inc: () => ` atomicAdd(&h[b1 + t], 1u); ` }, xy: { index: ` let b1 = (py * p.w + (p.w - 1u - px)) << 2u; let b2 = ((p.h - 1u - py) * p.w + px) << 2u; let b3 = ((p.h - 1u - py) * p.w + (p.w - 1u - px)) << 2u; `, inc: () => ` atomicAdd(&h[b1 + t], 1u); atomicAdd(&h[b2 + t], 1u); atomicAdd(&h[b3 + t], 1u); ` } }[mirror] ?? { index: "", inc: () => "" }; const render = new Function( "ctx","img","r","g","b","w","h","itb","itn","b0","b1", ` let mr = 1; let mg = 1; let mb = 1; const path = new Float32Array(itn << 1); let seed = 0; let frame = 0; const rand = () => { seed ^= seed << 13; seed ^= seed >>> 17; seed ^= seed << 5; return (seed >>> 0) * 2.3283064365386963e-10; }; const pcg = v => { const s = (Math.imul(v, 747796405) + 2891336453) >>> 0; const q = Math.imul((s >>> ((s >>> 28) + 4)) ^ s, 277803737) >>> 0; return ((q >>> 22) ^ q) >>> 0; }; const a = w < h ? w : h; const wo = (w - a) * 0.5; const ho = (h - a) * 0.5; const scale = a * 0.25; let raf = 0; let running = true; let disposed = false; const renderFrame = () => { raf = 0; if (!running || disposed) return; const f = frame++; for (let i = 0; i < itb; i++) { seed = pcg(i ^ pcg(f)); const uvr = rand() * 4 - 2; const uvi = rand() * 4 - 2; let zr = 0; let zi = 0; let cr = uvr; let ci = uvi; ${init[0]} ${skip[0]} let escaped = false; let pathLen = 0; for (let n = 0; n < itn; n++) { ${iter[0]} zr = tr; zi = ti; const p = n << 1; path[p] = zr; path[p + 1] = zi; pathLen = n + 1; if (zr * zr + zi * zi > 4) { escaped = true; break; } } if (!escaped) continue; const t = pathLen < b0 ? 2 : pathLen < b1 ? 1 : 0; for (let k = 0; k < pathLen; k++) { const pr = path[k << 1]; const pi = path[(k << 1) + 1]; const px = ((pr + 2) * scale + wo) | 0; const py = ((pi + 2) * scale + ho) | 0; if ( px < 0 || px >= w || py < 0 || py >= h ) continue; const idx0 = py * w + px; ${mirrorCode.index} if (t === 2) { const v = ++b[idx0]; if (v > mb) mb = v; ${mirrorCode.b} } else if (t === 1) { const v = ++g[idx0]; if (v > mg) mg = v; ${mirrorCode.g} } else { const v = ++r[idx0]; if (v > mr) mr = v; ${mirrorCode.r} } } } if (!running || disposed) return; const data = img.data; const rs = 255 / Math.sqrt(mr); const gs = 255 / Math.sqrt(mg); const bs = 255 / Math.sqrt(mb); for (let i = 0, p = 0; i < r.length; i++, p += 4) { data[p] = Math.sqrt(r[i]) * rs; data[p + 1] = Math.sqrt(g[i]) * gs; data[p + 2] = Math.sqrt(b[i]) * bs; data[p + 3] = 255; } ctx.putImageData(img, 0, 0); if (running && !disposed) { raf = requestAnimationFrame(renderFrame); } }; const controller = { toggle() { running = !running; if (running && !raf && !disposed) { raf = requestAnimationFrame(renderFrame); } else if (!running && raf) { cancelAnimationFrame(raf); raf = 0; } return running; }, dispose() { disposed = true; running = false; if (raf) { cancelAnimationFrame(raf); raf = 0; } } }; raf = requestAnimationFrame(renderFrame); return controller; ` ); const w = canvas.width; const h = canvas.height; const createGpu = (device) => { const format = navigator.gpu.getPreferredCanvasFormat(); const orbitModule = device.createShaderModule({ code: ` struct P { w: u32, h: u32, itn: u32, oc: u32, b0: u32, b1: u32, pad: u32, frame: u32, scale: f32, wo: f32, ho: f32 }; @group(0) @binding(0) var p: P; @group(0) @binding(1) var h: array>; var seed: u32; fn rand() -> f32 { seed ^= seed << 13u; seed ^= seed >> 17u; seed ^= seed << 5u; return f32(seed) * 2.3283064365386963e-10; } fn pcg(v: u32) -> u32 { let s = v * 747796405u + 2891336453u; let q = ((s >> ((s >> 28u) + 4u)) ^ s) * 277803737u; return (q >> 22u) ^ q; } @compute @workgroup_size(64) fn main(@builtin(global_invocation_id) gid: vec3u) { let li = gid.x; if (li >= p.oc) { return; } seed = pcg(li ^ pcg(p.frame)); let uvr = rand() * 4.0 - 2.0; let uvi = rand() * 4.0 - 2.0; var zr = 0.0; var zi = 0.0; var cr = uvr; var ci = uvi; ${init[1]} ${skip[1]} var n = 0u; var esc = false; while (n < p.itn) { var tr = 0.0; var ti = 0.0; ${iter[1]} zr = tr; zi = ti; n++; if (zr * zr + zi * zi > 4.0) { esc = true; break; } } if (!esc) { return; } var t = 0u; if (n < p.b0) { t = 2u; } else if (n < p.b1) { t = 1u; } zr = 0.0; zi = 0.0; cr = uvr; ci = uvi; ${init[1]} for (var k = 0u; k < n; k++) { var tr = 0.0; var ti = 0.0; ${iter[1]} zr = tr; zi = ti; let fx = (zr + 2.0) * p.scale + p.wo; let fy = (zi + 2.0) * p.scale + p.ho; if (fx < 0.0 || fy < 0.0 || fx >= f32(p.w) || fy >= f32(p.h)) { continue; } let px = u32(fx); let py = u32(fy); let bi = ((py * p.w + px) << 2u); ${wgslMirror.index} atomicAdd(&h[bi + t], 1u); ${wgslMirror.inc()} } } ` }); const reduceModule = device.createShaderModule({ code: ` struct M { r: atomic, g: atomic, b: atomic }; @group(0) @binding(0) var h: array; @group(0) @binding(1) var m: M; @compute @workgroup_size(256) fn main(@builtin(global_invocation_id) gid: vec3u) { var mr = 0u; var mg = 0u; var mb = 0u; let n = arrayLength(&h); for (var i = gid.x; i < n; i += 16384u) { let v = h[i]; mr = max(mr, v.x); mg = max(mg, v.y); mb = max(mb, v.z); } atomicMax(&m.r, mr); atomicMax(&m.g, mg); atomicMax(&m.b, mb); } ` }); const tonemapModule = device.createShaderModule({ code: ` struct M { r: u32, g: u32, b: u32 }; @group(0) @binding(0) var h: array; @group(0) @binding(1) var m: M; @vertex fn vs(@builtin(vertex_index) vi: u32) -> @builtin(position) vec4f { var pos = array(vec2f(-1.0, -1.0), vec2f(3.0, -1.0), vec2f(-1.0, 3.0)); return vec4f(pos[vi], 0.0, 1.0); } @fragment fn fs(@builtin(position) fp: vec4f) -> @location(0) vec4f { let i = u32(fp.y) * ${w}u + u32(fp.x); let v = h[i]; let mr = max(f32(m.r), 1.0); let mg = max(f32(m.g), 1.0); let mb = max(f32(m.b), 1.0); let rr = min(sqrt(f32(v.x) / mr), 1.0); let gg = min(sqrt(f32(v.y) / mg), 1.0); let bb = min(sqrt(f32(v.z) / mb), 1.0); return vec4f(rr, gg, bb, 1.0); } ` }); const orbitPipeline = device.createComputePipeline({ layout: "auto", compute: { module: orbitModule, entryPoint: "main" } }); const reducePipeline = device.createComputePipeline({ layout: "auto", compute: { module: reduceModule, entryPoint: "main" } }); const tonemapPipeline = device.createRenderPipeline({ layout: "auto", vertex: { module: tonemapModule, entryPoint: "vs" }, fragment: { module: tonemapModule, entryPoint: "fs", targets: [{ format }] } }); const hist = w * h * 16; const bu = globalThis.GPUBufferUsage; const hbuf = device.createBuffer({ size: hist, usage: bu?.STORAGE ?? 0x0080 }); const mbuf = device.createBuffer({ size: 16, usage: bu?.STORAGE ?? 0x0080 }); const ubuf = device.createBuffer({ size: 48, usage: (bu?.UNIFORM ?? 0x0040) | (bu?.COPY_DST ?? 0x0008) }); const orbitBind = device.createBindGroup({ layout: orbitPipeline.getBindGroupLayout(0), entries: [ { binding: 0, resource: { buffer: ubuf } }, { binding: 1, resource: { buffer: hbuf } } ] }); const reduceBind = device.createBindGroup({ layout: reducePipeline.getBindGroupLayout(0), entries: [ { binding: 0, resource: { buffer: hbuf } }, { binding: 1, resource: { buffer: mbuf } } ] }); const tonemapBind = device.createBindGroup({ layout: tonemapPipeline.getBindGroupLayout(0), entries: [ { binding: 0, resource: { buffer: hbuf } }, { binding: 1, resource: { buffer: mbuf } } ] }); const a = Math.min(w, h); const uarr = new Uint32Array(12); const farr = new Float32Array(uarr.buffer); uarr[0] = w; uarr[1] = h; uarr[2] = witn; uarr[3] = witb; uarr[4] = wb0; uarr[5] = wb1; farr[8] = a * 0.25; farr[9] = (w - a) * 0.5; farr[10] = (h - a) * 0.5; let frame = 0; let raf = 0; let running = true; let disposed = false; let context = null; const wg = Math.ceil(witb / 64); const renderFrame = () => { raf = 0; if (!running || disposed) return; uarr[7] = frame++; device.queue.writeBuffer(ubuf, 0, uarr); const enc = device.createCommandEncoder(); const cp = enc.beginComputePass(); cp.setPipeline(orbitPipeline); cp.setBindGroup(0, orbitBind); cp.dispatchWorkgroups(wg); cp.end(); const rc = enc.beginComputePass(); rc.setPipeline(reducePipeline); rc.setBindGroup(0, reduceBind); rc.dispatchWorkgroups(64); rc.end(); const rp = enc.beginRenderPass({ colorAttachments: [{ view: context.getCurrentTexture().createView(), loadOp: "clear", storeOp: "store", clearValue: { r: 0, g: 0, b: 0, a: 1 } }] }); rp.setPipeline(tonemapPipeline); rp.setBindGroup(0, tonemapBind); rp.draw(3); rp.end(); device.queue.submit([enc.finish()]); if (running && !disposed) { raf = requestAnimationFrame(renderFrame); } }; device.lost.then(() => { disposed = true; running = false; if (raf) { cancelAnimationFrame(raf); raf = 0; } }); const controller = { toggle() { running = !running; if (running && !raf && !disposed) { raf = requestAnimationFrame(renderFrame); } else if (!running && raf) { cancelAnimationFrame(raf); raf = 0; } return running; }, dispose() { disposed = true; running = false; if (raf) { cancelAnimationFrame(raf); raf = 0; } context.unconfigure(); device.destroy(); } }; context = canvas.getContext("webgpu"); if (!context) { device.destroy(); return null; } context.configure({ device, format, alphaMode: "opaque" }); raf = requestAnimationFrame(renderFrame); return controller; }; let controller = null; let gpu = false; if (navigator.gpu) { let device = null; try { const adapter = await navigator.gpu.requestAdapter({ powerPreference: "high-performance" }); if (adapter) { device = await adapter.requestDevice(); controller = createGpu(device); gpu = controller !== null; } } catch (e) {} if (!controller && device) device.destroy(); } if (!controller) { const ctx = canvas.getContext("2d", { alpha: false, desynchronized: true }); const img = ctx.createImageData(w, h); const r = new Uint32Array(w * h); const g = new Uint32Array(w * h); const b = new Uint32Array(w * h); controller = render( ctx, img, r, g, b, w, h, itb, itn, b0, b1 ); } const button = Inputs.button("Pause"); const click = () => { const running = controller.toggle(); button.children[0].textContent = running ? "Pause" : "Play"; }; button.addEventListener("click", click); invalidation.then(() => { button.removeEventListener("click", click); controller.dispose(); }); const download = Inputs.button("Download PNG", { reduce() { const a = document.createElement("a"); a.href = canvas.toDataURL(); a.download = "buddhabrot.png"; a.click(); } }); const tag = document.createElement("span"); tag.textContent = "Rendering with " + (gpu ? "WebGPU" : "JS"); tag.style.cssText = "font-family:var(--sans-serif);font-size:13px"; return html`${button}${download}${tag}`; }35:T572,presets = [ { name: "Mandelbrot", mirror: "x", skip: [ ` const q = (cr - 0.25) * (cr - 0.25) + ci * ci; if (q * (q + cr - 0.25) < 0.25 * ci * ci || (cr + 1) * (cr + 1) + ci * ci < 0.0625) continue; `, ` let q = (cr - 0.25) * (cr - 0.25) + ci * ci; if (q * (q + cr - 0.25) < 0.25 * ci * ci || (cr + 1.0) * (cr + 1.0) + ci * ci < 0.0625) { return; } ` ], iter: [ ` tr = zr * zr - zi * zi + cr; ti = 2 * zr * zi + ci; `, ` tr = zr * zr - zi * zi + cr; ti = 2.0 * zr * zi + ci; ` ] }, { name: "Tricorn", mirror: "x", iter: [ ` tr = zr * zr - zi * zi + cr; ti = -2 * zr * zi + ci; `, ` tr = zr * zr - zi * zi + cr; ti = -2.0 * zr * zi + ci; ` ] }, { name: "Burning Ship", iter: [ ` const ar = zr < 0 ? -zr : zr; const ai = zi < 0 ? -zi : zi; tr = ar * ar - ai * ai + cr; ti = 2 * ar * ai + ci; `, ` let ar = abs(zr); let ai = abs(zi); tr = ar * ar - ai * ai + cr; ti = 2.0 * ar * ai + ci; ` ] }, { name: "Celtic", mirror: "x", iter: [ ` tr = Math.abs(zr * zr - zi * zi) + cr; ti = 2 * zr * zi + ci; `, ` tr = abs(zr * zr - zi * zi) + cr; ti = 2.0 * zr * zi + ci; ` ] } ];36:[] 32:{"id":"3dd3997db3fd7d71","slug":"buddhabrot","title":"Buddhabrot","thumbnail":"ff119bba407cbcc00def876a1d09b7b1d6212cab4f9379f155477bc04286cd50","access_level":"public","create_time":"$D2026-09-19T09:52:43.035Z","update_time":"$D2026-09-22T21:29:20.487Z","view_time":null,"first_public_time":"$D2026-09-22T17:21:23.910Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"d6840fab65eebcab","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":"starter_2024"},"version":92,"publish_version":92,"role":null,"authored":false,"authors":[{"type":"individual","id":"9d8e4bfddc4592ef","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":null}],"members":[{"type":"team","id":"d6840fab65eebcab","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Buddhabrot","cells":[{"id":1,"value":"# Buddhabrot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"Instead of coloring points based on whether they escape or remain bounded, we draw the actual trajectories of the escaping points. By accumulating those paths, the Buddhabrot emerges - a fractal discovered by [Melinda Green](https://superliminal.com/fractals/bbrot/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"canvas = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"viewof res = Inputs.select([512,1024,1024+512,2048],{\n label: \"Resolution\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"viewof mode = Inputs.select(\n [0, 1, 2, 3],\n {\n label: \"Fractal\",\n format: i => [\n \"Mandelbrot\",\n \"Tricorn\",\n \"Burning Ship\",\n \"Celtic\"\n ][i]\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"2","titling":"auto"}} 33:"$32:body"