2b:null 2c:["$","title",null,{"children":"Bitmask Fractals | nxrix | Observable"}] 31:T42f,viewof a = { if (!state.a[form.z]) state.a[form.z] = new Array(form.z * form.z).fill(0); const values = state.a[form.z]; const e = html`

`; e.style.display = "grid"; e.style.width = "fit-content"; e.style.gridTemplateColumns = `repeat(${form.z}, auto)`; e.style.gap = "4px"; for (let i = 0; i < form.z * form.z; i++) { const btn = html``; btn.style.fontFamily = "var(--monospace)"; btn.style.aspectRatio = "1"; btn.style.borderRadius = "2px"; btn.textContent = values[i] ? "1" : "0"; btn.style.color = values[i] ? "#000" : "#fff"; btn.style.background = values[i] ? "#fff" : "#000"; btn.style.border = "2px solid #888"; btn.onclick = () => { values[i] ^= 1; btn.textContent = values[i] ? "1" : "0"; btn.style.color = values[i] ? "#000" : "#fff"; btn.style.background = values[i] ? "#fff" : "#000"; e.value = values.slice(); e.dispatchEvent(new Event("input", { bubbles: true })); }; e.appendChild(btn); } e.value = values.slice(); return e; }32:Tde5,render = { const canvas = html`

`; const ctx = canvas.getContext("2d"); const av = (a) => { let x = 0; let y = 0; for (let i = 0; i < a.length; i++) { if (!a[i]) continue; const t = (2 * Math.PI * i) / a.length; x += Math.cos(t); y += Math.sin(t); } return Math.atan2(y, x); }; const accumulate = ({ p, v, b, z }) => { if (p > 0 || z === 0) { p += b; v += p; } else { p -= b; v -= p; } return v; }; const grayscale = (pw, ph, a, n, scw, sch, tw, th, width = 128) => { const cw = Math.round(pw * tw ** (n - 1)); const ch = Math.round(ph * th ** (n - 1)); const sx = scw / cw; const sy = sch / ch; const max = (n * (n + 1)) / 2; canvas.width = cw; canvas.height = ch; const image = ctx.createImageData(cw, ch); const data = image.data; let i = 0; for (let y = 0; y < ch; y++) { for (let x = 0; x < cw; x++) { let p = 0; //let p = 0.5; let v = 0; let ex = sx; let ey = sy; for (let z = 0; z < n; z++) { const px = (x * ex) | 0; const py = (y * ey) | 0; const b = a[(px % pw) + (py % ph) * pw]; //v += p * b; //p *= 0.5; if (p > 0 || z === 0) { p += b; v += p; } else { p -= b; v -= p; } ex *= tw; ey *= th; } const c = Math.round((v / max) * 255); //const c = Math.round(v * 255); data[i++] = c; data[i++] = c; data[i++] = c; data[i++] = 255; } } ctx.putImageData(image, 0, 0); return html`

`; }; const colored = ( pw, ph, a, n, scw, sch, tw, th, width = 128, chroma = 0, range = 0, shift = 0 ) => { const cw = Math.round(pw * tw ** (n - 1)); const ch = Math.round(ph * th ** (n - 1)); const sx = scw / cw; const sy = sch / ch; const max = (n * (n + 1)) / 2; const sv = av(a); canvas.width = cw; canvas.height = ch; const image = ctx.createImageData(cw, ch); const data = image.data; let i = 0; for (let y = 0; y < ch; y++) { for (let x = 0; x < cw; x++) { let p = 0; //let p = 0.5; let v = 0; let f = 0; let w = 0.5; let ex = sx; let ey = sy; for (let z = 0; z < n; z++) { const px = (x * ex) | 0; const py = (y * ey) | 0; const b = a[(px % pw) + (py % ph) * pw]; //v += p * b; //p *= 0.5; if (p > 0 || z === 0) { p += b; v += p; } else { p -= b; v -= p; } ex *= tw; ey *= th; f += b * w; w *= 0.5; } const h = f * Math.PI * 2 * range + sv + shift * Math.PI * 2; const rgb = oklab2rgb( v / max, chroma * Math.cos(h), chroma * Math.sin(h) ); data[i++] = Math.round(rgb[0] * 255); data[i++] = Math.round(rgb[1] * 255); data[i++] = Math.round(rgb[2] * 255); data[i++] = 255; } } ctx.putImageData(image, 0, 0); return html`

`; }; return { grayscale, colored }; }33:[] 2f:{"id":"e1573b7c91e6e43f","slug":"bitmask-fractals","title":"Bitmask Fractals","thumbnail":"09505841e745ce6d5b9cc23e2a9b0365439de21c51fe7f3ec56c960ff803bd9b","access_level":"public","create_time":"$D2026-07-08T07:16:34.139Z","update_time":"$D2026-09-04T20:53:43.279Z","view_time":null,"first_public_time":"$D2026-07-08T09:31:59.471Z","fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"d6840fab65eebcab","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":"starter_2024"},"version":608,"publish_version":null,"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":"individual","id":"9d8e4bfddc4592ef","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":null,"role":"editor"},{"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,"subscribed":null,"forks":0,"collection":{"id":"ecfdcc558913fcce","slug":"fractals","title":"Fractals","owner":{"id":"d6840fab65eebcab","login":"nxrix","name":"nxrix"}},"type":"notebook","body":{"title":"Bitmask Fractals","cells":[{"id":0,"value":"# Bitmask Fractals\nGenerated by repeatedly sampling a binary pattern at exponentially increasing scales.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"image = render.colored(\n form.z,\n form.z,\n a,\n form.n,\n form.z,\n form.z,\n form.t,\n form.t,\n 512,\n color.chroma,\n color.range,\n color.shift\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"Inputs.button(\"Download Image\", {\n reduce() {\n const a = document.createElement(\"a\");\n a.href = image.src;\n a.download = `bitmask-fractal-z${form.z}n${form.n}t${form.t}m${a.join(\n \"\"\n )}.png`;\n a.click();\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"## Pattern","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":495,"value":"viewof form = {\n const z = numberStepper({ label: \"Size\", value: 2, min: 2, max: 8 });\n const n = numberStepper({\n label: \"Iterations\",\n value: state.n,\n min: 1\n });\n const t = numberStepper({ label: \"Transform\", value: state.t, min: 1 });\n const e = Inputs.form({\n z,\n n,\n t\n });\n e.addEventListener(\"input\", () => {\n n.max = Math.max(\n 1,\n Math.floor(Math.log(1024 / e.value.z) / Math.log(e.value.t) + 1)\n );\n state.z = e.value.z;\n state.n = e.value.n;\n state.t = e.value.t;\n });\n return e;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"## Color","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":245,"value":"viewof color = Inputs.form({\n chroma: Inputs.range([0, 0.5], { label: \"Chroma\", value: 0, step: 0.01 }),\n range: Inputs.range([0, 1], { label: \"Hue Range\", value: 0, step: 0.01 }),\n shift: Inputs.range([0, 1], { label: \"Hue Shift\", value: 0, step: 0.01 })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"---\n

\n ${[1, 2, 3, 4, 5].map(n => render.grayscale(2,2, [0,1,1,0], n, 2,2, 2,2))}\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"state = {\n return {\n a: {\n 2: [0, 1, 1, 0],\n 3: [1, 1, 1, 1, 0, 1, 1, 1, 1]\n },\n n: 8,\n t: 2\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":312,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"oklab2rgb = (L, A, B) => {\n let l = L + 0.3963377774 * A + 0.2158037573 * B;\n let m = L - 0.1055613458 * A - 0.0638541728 * B;\n let s = L - 0.0894841775 * A - 1.291485548 * B;\n l = l * l * l;\n m = m * m * m;\n s = s * s * s;\n let r = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;\n let g = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;\n let b = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;\n return [toSRGB(r), toSRGB(g), toSRGB(b)];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":161,"value":"toSRGB = (x) =>\n clamp(x <= 0.0031308 ? 12.92 * x : 1.055 * Math.pow(x, 1 / 2.4) - 0.055)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"clamp = (x, a = 0, b = 1) => Math.min(b, Math.max(a, x))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"import { numberStepper } from \"@nxrix/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"2","titling":"auto"}} 30:"$2f:body"