2d:null 2e:["$","title",null,{"children":"XYZINE | nxrix | Observable"}] 33:T679,viewof ui = { const ui = html`

${Object.assign(Inputs.button("Play"), { id: "iplay" })} ${Object.assign(Inputs.button("Save PNG"), { id: "isave" })} ${Object.assign(Inputs.button("RND"), { id: "irnd" })}

${Object.assign( Inputs.number({ label: "seed", value: 1401, min: 0, max: 9007199254740991, step: 1 }), { id: "iseed" } )} ${Object.assign( Inputs.range([-3, 3], { label: "depth:", step: 1, value: 0 }), { id: "idepth" } )} ${Object.assign(Inputs.range([-1, 1], { label: "px:" }), { id: "ipx" })} ${Object.assign(Inputs.range([-1, 1], { label: "py:" }), { id: "ipy" })} ${Object.assign( Inputs.select(["I", "II"], { label: "palette", value: "II" }), { id: "ipalette" } )}

Based on Picotron XYZINE demo by Lexaloffle

`; const iseed = ui.querySelector("#iseed"); const isave = ui.querySelector("#isave"); const save = (d, f) => { const link = document.createElement("a"); link.href = d; link.download = f; link.click(); }; isave.onclick = () => { save(viewof canvas.toDataURL(), "xyzine-" + iseed.value + ".png"); }; return ui; }34:T1d09,{ const canvas = viewof canvas; const output = document.querySelector("#ioutput"); const ui = viewof ui; const uiplay = ui.querySelector("#iplay"); const uiplayb = uiplay.querySelector("button"); const uirnd = ui.querySelector("#irnd"); //const ileft = ui.querySelector("#ileft"); //const iright = ui.querySelector("#iright"); const iseed = ui.querySelector("#iseed"); const idepth = ui.querySelector("#idepth"); const ipalette = ui.querySelector("#ipalette"); const ipx = ui.querySelector("#ipx"); const ipy = ui.querySelector("#ipy"); let raf = undefined; const anim = () => { if (raf) { uiplayb.innerText = "Play"; cancelAnimationFrame(raf); ipx.value = 0; ipy.value = 0; u(); t = 0; raf = undefined; } else { uiplayb.innerText = "Stop"; const r = () => { ipx.value = Math.sin(t / 60); ipy.value = Math.cos(t / 60); u(); t++; raf = requestAnimationFrame(r); }; r(); } }; uiplay.onclick = anim; invalidation.then(() => { uiplayb.innerText = "Play"; cancelAnimationFrame(raf); }); uirnd.onclick = () => { iseed.value = Math.floor(Math.random() * (Number.MAX_SAFE_INTEGER + 1)); localStorage.setItem("xyzine_0", parseInt(iseed.value) || 0); render(); }; iseed.value = localStorage.getItem("xyzine_0") || 1401; iseed.addEventListener("input", () => { iseed.value = Math.min( Math.max(parseInt(iseed.value) || 0, 0), 9007199254740991 ); localStorage.setItem("xyzine_0", parseInt(iseed.value) || 0); render(); }); const z = 128; const w = z; const h = z; const d = Math.min(w, h); const w2 = w / 2; const h2 = h / 2; const d2 = d / 2; canvas.width = w; canvas.height = h; canvas.style.width = w*1.5+"px"; const ctx = canvas.getContext("2d"); const s = [ "#5e513f", "#a5765c", "#ff7e6a", "#ffb47e", "#ffe694", "#b3eb9f", "#7ec4f6", "#bb87fa", "#5e513f" ]; const palette = [ [0x1d, 0x18, 0x26], [0x8b, 0x7f, 0xb0], [0xc3, 0xbe, 0xe5], [0xff, 0xe8, 0xe9], [0x65, 0x26, 0x4e], [0xa0, 0x1a, 0x3d], [0xde, 0x1b, 0x45], [0xf2, 0x63, 0x7b], [0x8b, 0x3f, 0x39], [0xbb, 0x45, 0x31], [0xef, 0x5d, 0x0e], [0xff, 0x95, 0x00], [0x00, 0xa0, 0x3d], [0x12, 0xd5, 0x00], [0xb4, 0xd8, 0x00], [0xff, 0xc3, 0x1f], [0x00, 0x6e, 0x69], [0x00, 0xae, 0x85], [0x00, 0xda, 0xa7], [0x4f, 0xd6, 0xff], [0x2b, 0x27, 0x54], [0x3c, 0x51, 0xaf], [0x18, 0x88, 0xde], [0x00, 0xa9, 0xe1], [0x59, 0x3c, 0x97], [0x89, 0x44, 0xcf], [0xb4, 0x4a, 0xff], [0xe9, 0x59, 0xff], [0xe7, 0x87, 0x6d], [0xff, 0xba, 0x8c], [0xff, 0xef, 0x5c], [0xff, 0x9c, 0xde] ]; const fa = [ 0, 20, 4, 5, 6, 10, 11, 15, 14, 13, 17, 18, 19, 23, 22, 21, 20, 0, 24, 25, 26, 27, 31, 3, 2, 1, 20 ].map( (i) => "#" + palette[i].map((x) => x.toString(16).padStart(2, "0")).join("") ); function h2r(h) { const n = parseInt(h.slice(1), 16); return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 }; } function l(a, b, t) { return Math.round(a + (b - a) * t); } function grad(v, p = s) { v = Math.min(1, Math.max(0, v)); const i = Math.min(Math.floor(v * (p.length - 1)), p.length - 2); const t = v * (p.length - 1) - i; const c1 = h2r(p[i]); const c2 = h2r(p[i + 1]); return [l(c1.r, c2.r, t), l(c1.g, c2.g, t), l(c1.b, c2.b, t)]; } function rot3(x, y, z, ax, ay, az) { let cx = Math.cos(ax), sx = Math.sin(ax); let cy = Math.cos(ay), sy = Math.sin(ay); let cz = Math.cos(az), sz = Math.sin(az); let x1 = x * cy + z * sy; let z1 = -x * sy + z * cy; x = x1; z = z1; let y1 = y * cx - z * sx; z1 = y * sx + z * cx; y = y1; z = z1; x1 = x * cz - y * sz; y1 = x * sz + y * cz; x = x1; y = y1; return [x, y, z]; } const XYZINE = eval( `${await ( await fetch( //"https://raw.githubusercontent.com/Nxrix/pixel-8/refs/heads/main/src/xyzine.js" "https://raw.githubusercontent.com/Nxrix/xyzine/refs/heads/main/js/xyzine.js" ) ).text()};XYZINE` ); const img = ctx.createImageData(w, h); const img_data = img.data; const zn = new XYZINE(); let exprf = () => 0; let t = 0; const vs = new Float32Array(w * h); //const zb = new Float32Array(w * h).fill(Infinity); const u = () => { let min = Infinity; let max = -Infinity; const px = ipx.value * w2; const py = ipy.value * h2; for (let i = 0; i < w; i++) { const xi = i - w2 - 0.5; for (let j = 0; j < h; j++) { const yi = j - h2 - 0.5; const v = func(exprf, xi, yi, px, py); vs[i + j * w] = v; if (v < min) min = v; if (v > max) max = v; } } img_data.fill(0); //zb.fill(Infinity); for (let i = 0; i < w; i++) { for (let j = 0; j < h; j++) { const norm = (vs[i + j * w] - min) / (max - min) || 0; const col = grad(norm, pal); const [r, g, b] = col; /*let [x, y, z] = [i - w2 - 0.5, norm * (d - 1) - d2 - 0.5, j - h2 - 0.5]; [x, y, z] = rot3(x,y,z,irotx.value*(Math.PI/180),iroty.value*(Math.PI/180),irotz.value*(Math.PI/180)); const s = (w - 1) / (w - 1 + z + w2 + 0.5); x = Math.floor(x * s + w2 + 0.5); y = Math.floor(y * s + w2 + 0.5); const n = x + y * w;*/ const n = i + j * w; //if (x >= 0 && x < w && y >= 0 && y < h && z < zb[n]) { //zb[n] = z; const n4 = n * 4; img_data[n4] = r; img_data[n4 + 1] = g; img_data[n4 + 2] = b; img_data[n4 + 3] = 255; //} } } ctx.putImageData(img, 0, 0); }; let pal = s; const render = () => { const seed = iseed.value; //9007199254740978 //9007199254740991 //9000991 zn.srnd(seed); const st = zn.rnd(fa.length) | 0; pal = ipalette.value == "I" ? s : fa.slice(st).concat(fa.slice(0, st)); zn.srnd(seed); const expr = zn.getx(parseInt(idepth.value) || 0, 1); output.innerHTML = `Expression:
${expr}`; try { const f = new Function("x", "y", "px", "py", `return ${expr};`); f(0, 0, 0, 0); exprf = f; u(); } catch (e) { output.innerHTML = `Error:
${e.toString()}`; } }; /*ileft.onclick = () => { iseed.value = Math.min(Math.max(iseed.value-1,0),9007199254740991); localStorage.setItem("xyzine_0",iseed.value); render(); }; iright.onclick = () => { iseed.value = Math.min(Math.max(iseed.value+1,0),9007199254740991); localStorage.setItem("xyzine_0",iseed.value); render(); };*/ /*const irotx = ui.querySelector("#irotx"); const iroty = ui.querySelector("#iroty"); const irotz = ui.querySelector("#irotz"); irotx.addEventListener("input", u); iroty.addEventListener("input", u); irotz.addEventListener("input", u); irotx.addEventListener("change", u); iroty.addEventListener("change", u); irotz.addEventListener("change", u);*/ idepth.addEventListener("change", render); ipalette.addEventListener("change", render); ipx.addEventListener("input", u); ipy.addEventListener("input", u); ipx.addEventListener("change", u); ipy.addEventListener("change", u); render(); return "^"; }35:[] 31:{"id":"83b69c3b23bb2d3a","slug":"xyzine","title":"XYZINE","thumbnail":"122b4ef0712f573fc1e20f6214d48e3cd91f01c7470edd88bb94544e73ff7f07","access_level":"public","create_time":"$D2025-07-21T17:25:52.192Z","update_time":"$D2026-09-04T20:57:29.368Z","view_time":null,"first_public_time":"$D2025-07-21T19:31:05.133Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"d6840fab65eebcab","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":"starter_2024"},"version":735,"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,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"XYZINE","cells":[{"id":0,"value":"# XYZINE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"viewof canvas = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"func = (f, x, y, px, py) => {\n return f(x, y, px, py);\n //return (x + px) ^ (y + py);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"2","titling":"auto"}} 32:"$31:body"