2b:null 2c:["$","title",null,{"children":"Hypercomplex | nxrix | Observable"}] 31:T1bca,canvas = { const canvas = document.createElement("canvas"); canvas.style.maxWidth = "100%"; canvas.style.imageRendering = "pixelated"; canvas.style.border = "1px solid #8884"; canvas.style.borderRadius = "8px"; const renderer = new THREE.WebGLRenderer({ context: canvas.getContext("webgl2", { preserveDrawingBuffer: true }), antialias: false }); function handleSource(string, errorLine) { const lines = string.split("\n"); const lines2 = []; const from = Math.max(errorLine - 6, 0); const to = Math.min(errorLine + 6, lines.length); for (let i = from; i < to; i++) { const line = i + 1; lines2.push(`${line === errorLine ? ">" : " "} ${line}: ${lines[i]}`); } return lines2.join("\n"); } function getShaderErrors(gl, shader, type) { const status = gl.getShaderParameter(shader, gl.COMPILE_STATUS); const shaderInfoLog = gl.getShaderInfoLog(shader) || ""; const errors = shaderInfoLog.trim(); if (status && errors === "") return ""; const errorMatches = /ERROR: 0:(\d+)/.exec(errors); if (errorMatches) { const errorLine = parseInt(errorMatches[1]); return ( errors + "\n\n" + handleSource(gl.getShaderSource(shader), errorLine) ); } else { return errors; } } renderer.debug.onShaderError = ( gl, program, glVertexShader, glFragmentShader ) => { const programInfoLog = gl.getProgramInfoLog(program) || ""; const fragmentShaderInfoLog = gl.getShaderInfoLog(glFragmentShader) || ""; const programLog = programInfoLog.trim(); const fragmentLog = fragmentShaderInfoLog.trim(); if (gl.getProgramParameter(program, gl.LINK_STATUS) === false) { const fragmentErrors = getShaderErrors(gl, glFragmentShader, "fragment"); errors.innerText = fragmentErrors; errors.style.color = "red"; } }; const scene = new THREE.Scene(); const vs = ` varying vec3 vP; varying vec3 vW; varying vec3 vN; varying mat4 vM; void main() { vP = position; vN = normal; vW = (modelMatrix*vec4(position,1)).xyz; vM = projectionMatrix*modelViewMatrix; gl_Position = projectionMatrix*modelViewMatrix*vec4(position,1); }`; const cube = new THREE.Mesh( new THREE.BoxGeometry(2, 2, 2), new THREE.ShaderMaterial({ vertexShader: vs, fragmentShader: "void main(){ gl_FragColor = vec4(0); }", transparent: true, depthWrite: false, side: THREE.DoubleSide, uniforms: { iPerspective: { value: state.perspective }, iJ: { value: state.julia }, iC: { value: state.c } } }) ); canvas.cube = cube; scene.add(cube); /*scene.add( new THREE.LineSegments( new THREE.EdgesGeometry(new THREE.BoxGeometry(2.05, 2.05, 2.05)), new THREE.LineBasicMaterial({ color: 0x111111 }) ) );*/ const perspectiveCamera = new THREE.PerspectiveCamera( state.fov, 1, 0.125, 64 ); const orthographicCamera = new THREE.OrthographicCamera( -1, 1, 1, -1, -8, 128 ); perspectiveCamera.position.set(0, 0, 2); orthographicCamera.position.set(0, 0, 2); let camera = state.perspective ? perspectiveCamera : orthographicCamera; canvas.resize = (w, h, r = 1) => { renderer.setSize(w, h, true); canvas.width = w * r; canvas.height = h * r; canvas.style.width = w + "px"; renderer.setPixelRatio(r); const aspect = w / h; perspectiveCamera.aspect = aspect; perspectiveCamera.zoom = aspect <= 1 ? aspect : 1; perspectiveCamera.updateProjectionMatrix(); if (aspect <= 1) { const visibleHeight = orthographicCamera.left - orthographicCamera.right; orthographicCamera.top = -visibleHeight / aspect / 2; orthographicCamera.bottom = visibleHeight / aspect / 2; } else { const visibleHeight = orthographicCamera.top - orthographicCamera.bottom; orthographicCamera.left = (-visibleHeight * aspect) / 2; orthographicCamera.right = (visibleHeight * aspect) / 2; } orthographicCamera.updateProjectionMatrix(); renderer.render(scene, camera); }; canvas.resizeEvent = () => { const z = Math.min(window.innerWidth, 512); canvas.resize(z, z, devicePixelRatio); }; window.addEventListener("resize", canvas.resizeEvent); canvas.resizeEvent(); let needsRender = state.s; state.s = false; const controls = new THREE.OrbitControls(camera, canvas); controls.addEventListener("change", () => { needsRender = true; }); let disposed = false; function animate(t) { if (disposed) return; if (needsRender) { renderer.render(scene, camera); needsRender = false; } requestAnimationFrame(animate); } animate(0); invalidation.then(() => { disposed = true; window.removeEventListener("resize", canvas.resizeEvent); renderer.dispose(); renderer.forceContextLoss(); }); canvas.update = () => { needsRender = true; }; canvas.setFOV = (v) => { perspectiveCamera.fov = v; perspectiveCamera.updateProjectionMatrix(); needsRender = true; }; canvas.setCamera = (e) => { const target = controls.target.clone(); const position = camera.position.clone(); const aspect = canvas.width / canvas.height; const halfFovRad = (perspectiveCamera.fov * Math.PI) / 360; if (e) { const visibleHeight = (aspect <= 1 ? orthographicCamera.right - orthographicCamera.left : orthographicCamera.top - orthographicCamera.bottom) / orthographicCamera.zoom; const newDistance = visibleHeight / (2 * Math.tan(halfFovRad)); const direction = new THREE.Vector3() .subVectors(position, target) .normalize(); const newPosition = target .clone() .add(direction.multiplyScalar(newDistance)); perspectiveCamera.position.copy(newPosition); perspectiveCamera.updateProjectionMatrix(); } else { const distance = position.distanceTo(target); const visibleHeight = 2 * distance * Math.tan(halfFovRad); orthographicCamera.position.copy(position); if (aspect <= 1) { orthographicCamera.top = visibleHeight / aspect / 2; orthographicCamera.bottom = -visibleHeight / aspect / 2; orthographicCamera.left = -visibleHeight / 2; orthographicCamera.right = visibleHeight / 2; } else { orthographicCamera.left = (-visibleHeight * aspect) / 2; orthographicCamera.right = (visibleHeight * aspect) / 2; orthographicCamera.top = visibleHeight / 2; orthographicCamera.bottom = -visibleHeight / 2; } orthographicCamera.zoom = 1; orthographicCamera.updateProjectionMatrix(); } camera = e ? perspectiveCamera : orthographicCamera; cube.material.uniforms.iPerspective.value = e; controls.object = camera; controls.target.copy(target); controls.update(); needsRender = true; }; canvas.uniforms = cube.material.uniforms; return canvas; }32:T65d,{ const perms = [ [0, 1, 2], [0, 2, 1], [1, 0, 2], [1, 2, 0], [2, 0, 1], [2, 1, 0] ]; function sphere(i, size = 256) { const canvas = document.createElement("canvas"); canvas.width = canvas.height = size; const ctx = canvas.getContext("2d"); const img = ctx.createImageData(size, size); const d = img.data; const perm = perms[i >> 3]; const sign = i & 7; for (let py = 0; py < size; py++) { for (let px = 0; px < size; px++) { const x = ((px + 0.5) / size) * 2 - 1; const y = 1 - ((py + 0.5) / size) * 2; const r2 = x * x + y * y; if (r2 > 1) continue; const z = Math.sqrt(1 - r2); let n = [x, y, z]; n = [ n[perm[0]] * (sign & 1 ? -1 : 1), n[perm[1]] * (sign & 2 ? -1 : 1), n[perm[2]] * (sign & 4 ? -1 : 1) ]; const o = (py * size + px) * 4; d[o + 0] = (n[0] * 0.5 + 0.5) * 255; d[o + 1] = (n[1] * 0.5 + 0.5) * 255; d[o + 2] = (n[2] * 0.5 + 0.5) * 255; d[o + 3] = 255; } } ctx.putImageData(img, 0, 0); const url = canvas.toDataURL(); const e = html`

${i}

`; e.onclick = () => { viewof no.value = i; }; return e; } const o = html`

`; o.style.display = "grid"; o.style.gridTemplateColumns = "repeat(8,40px)"; o.style.gap = "4px"; for (let i = 0; i < 48; i++) o.appendChild(sphere(i)); return html`

${o}

`; }33:Tc69,viewof shader = { const shader = ` #define TAU 6.2831853 #define EPS ${eps} #define MAX_ITER ${max} #define s(p) (p).${form.o.slice(0, form.s) + "w" + form.o.slice(form.s)} #define ns(p) ((p).${permutations[no >> 3]}*vec3(${no & 1 ? -1 : 1},${ no & 2 ? -1 : 1 },${no & 4 ? -1 : 1})) uniform bool iJ; uniform vec4 iC; vec2 iHypersphere(vec4 o, vec4 d, float r) { float b = dot(o,d); float c = dot(o,o)-r*r; float h = b*b-c; if (h < 0.0) return vec2(-1); h = sqrt(h); return vec2(-b-h,-b+h); } vec2 iSphere(vec3 ro, vec3 rd, float r) { vec3 oc = ro; float b = dot(oc,rd); float c = dot(oc,oc)-r*r; float h = b*b-c; if (h<0.0) return vec2(-1); h = sqrt(h); return vec2(-b-h,-b+h); } ${mul} ${shape.it ? shape.it : ""} ${jacobian.f && shape.jf ? shape.jf : shape.af} ${four ? f3 : ""} ${jacobian.n && shape.jn ? shape.jn : four ? an4 : an3} vec3 turbo(float x) { const vec4 r4 = vec4(0.13572138, 4.61539260, -42.66032258, 132.13108234); const vec4 g4 = vec4(0.09140261, 2.19418839, 4.84296658, -14.18503333); const vec4 b4 = vec4(0.10667330, 12.64194608, -60.58204836, 110.36276771); const vec2 r2 = vec2(-152.94239396, 59.28637943); const vec2 g2 = vec2(4.27729857, 2.82956604); const vec2 b2 = vec2(-89.90310912, 27.34824973); x = clamp(x,0.0,1.0); vec4 v4 = vec4(1,x,x*x,x*x*x); vec2 v2 = v4.zw*v4.z; return vec3( dot(v4,r4)+dot(v2,r2), dot(v4,g4)+dot(v2,g2), dot(v4,b4)+dot(v2,b2) ); } void mainCube(out vec4 fragColor, vec3 ro, vec3 rd) { ro *= 2.0; vec2 b = iSphere(ro,rd,2.0); if (b.x>b.y||b.y<0.0) return; float t = max(0.0,b.x); for (int i=0;i<512;i++) { vec3 p = ro+rd*t; ${four ? "vec4 hp;" : ""} float d = ${four ? "f3(p,hp)" : "f(p)"}; if (d < EPS) { vec${four ? 4 : 3} n = n(${four ? "hp" : "p"}); vec4 t = trap(${four ? "hp" : "p"}); vec3 col = ${ trap ? "(ns(n)*0.5+0.5)*(cos(min(min(min(t.x,t.y),t.z),t.w)*32.0)*0.5+0.5)" : "ns(n)*0.5+0.5" }; fragColor = vec4(col,1); return; } t += d; if (t>=b.y) { ${ four ? "vec3 n = normalize(ro+rd*b.y);fragColor = vec4(n*0.5+0.5,1);" : "" } //fragColor = vec4(0,0,0,pow(1.0-abs(dot(rd,n)*0.5-0.125),64.0)); return; } } }`; const fs = ` varying vec3 vP; varying vec3 vW; varying vec3 vN; varying mat4 vM; uniform bool iPerspective; ${shader} void main() { vec3 ro = cameraPosition; vec3 rd; if (iPerspective) { rd = normalize(vW - ro); } else { ro = vW; rd = normalize(vec3(vM[0][2],vM[1][2],vM[2][2])); } mainCube(gl_FragColor, ro, rd); } `; const material = canvas.cube.material; if (material.fragmentShader !== fs) { errors.innerText = "No errors :)"; errors.style.color = "green"; material.fragmentShader = fs; material.needsUpdate = true; canvas.update(); } return glsl("shader", shader); }34:T1169,lc = { const d = four ? 4 : 3; const p = getPower(form.p, "z"); const ip = ` p *= 1.5; vec4 c, z; if (iJ) { ${form.p == 1 ? "p.x += 0.5;" : ""} c = s(vec4(abs(iC.x) > 0.1 ? iC.x : 1.0, iC.yzw)); z = s(${four ? "p" : "vec4(p,0)"}); } else { ${form.p == 1 ? "p.x += 1.0;" : ""} c = s(${four ? "p" : "vec4(p,0)"}); z = vec4(0.5,0,0,0); }`; const id3 = ` vec4 dz0, dz1, dz2; vec4 dc0, dc1, dc2; if (iJ) { dc0 = vec4(0); dc1 = vec4(0); dc2 = vec4(0); dz0 = s(vec4(1,0,0,0)); dz1 = s(vec4(0,1,0,0)); dz2 = s(vec4(0,0,1,0)); } else { dc0 = s(vec4(1,0,0,0)); dc1 = s(vec4(0,1,0,0)); dc2 = s(vec4(0,0,1,0)); dz0 = vec4(0); dz1 = vec4(0); dz2 = vec4(0); }`; const id4 = ` vec4 dz0, dz1, dz2, dz3; vec4 dc0, dc1, dc2, dc3; if (iJ) { dc0 = vec4(0); dc1 = vec4(0); dc2 = vec4(0); dc3 = vec4(0); dz0 = vec4(1,0,0,0); dz1 = vec4(0,1,0,0); dz2 = vec4(0,0,1,0); dz3 = vec4(0,0,0,1); } else { dc0 = vec4(1,0,0,0); dc1 = vec4(0,1,0,0); dc2 = vec4(0,0,1,0); dc3 = vec4(0,0,0,1); dz0 = vec4(0); dz1 = vec4(0); dz2 = vec4(0); dz3 = vec4(0); }`; const id = four ? id4 : id3; const a = `${2 ** form.p}.0/${form.p + 1}.0`; const it = ` #define j(z, d) (${getDerivative(form.p, "z", "d")}) vec4 step_d(vec4 dc, vec4 dz, vec4 z, vec4 k, vec4 m, vec4 c) { vec4 dk = -${a} * j(z,dz); vec4 dm = mul(dk, z) + mul(k, dz); return mul(dc, m) + mul(c, dm); } void jit3(vec4 c, inout vec4 z, inout vec4 dz0, inout vec4 dz1, inout vec4 dz2, inout vec4 dc0, inout vec4 dc1, inout vec4 dc2) { vec4 zn = ${p}; vec4 k = vec4(1,0,0,0) - (${a}) * zn; vec4 m = mul(k, z); dz0 = step_d(dc0, dz0, z, k, m, c); dz1 = step_d(dc1, dz1, z, k, m, c); dz2 = step_d(dc2, dz2, z, k, m, c); z = mul(c, m); } void jit4(vec4 c, inout vec4 z, inout vec4 dz0, inout vec4 dz1, inout vec4 dz2, inout vec4 dz3, inout vec4 dc0, inout vec4 dc1, inout vec4 dc2, inout vec4 dc3) { vec4 zn = ${p}; vec4 k = vec4(1,0,0,0) - (${a}) * zn; vec4 m = mul(k, z); dz0 = step_d(dc0, dz0, z, k, m, c); dz1 = step_d(dc1, dz1, z, k, m, c); dz2 = step_d(dc2, dz2, z, k, m, c); dz3 = step_d(dc3, dz3, z, k, m, c); z = mul(c, m); } vec4 trap(vec${d} p) { ${ip} vec4 o = vec4(1e10); for (int i = 0; i < MAX_ITER; i++) { float r2 = dot(z, z); if (r2 > 16.0) break; o = min(o, vec4(abs(length(z) - 0.5))); vec4 zn = ${p}; vec4 k = vec4(1,0,0,0) - (${a}) * zn; vec4 m = mul(k, z); z = mul(c, m); } return o; }`; const af = ` float f(vec${d} p) { ${ip} vec4 c2 = mul(c,c); float c_scale = sqrt(dot(c2,c2) / max(dot(c, c), 0.0001)); float d = iJ ? 1.0 : 0.0; for (int i = 0; i < MAX_ITER; i++) { float r2 = dot(z, z); if (r2 > 16.0) break; vec4 zn = ${p}; vec4 k = vec4(1,0,0,0) - ${2 ** form.p}.0 * zn; vec4 m = vec4(1,0,0,0) - (${a}) * zn; vec4 add_term = mul(m, z); vec4 k2 = mul(k, k); float k_scale = sqrt(dot(k2, k2) / max(dot(k, k), 0.0001)); d = c_scale * k_scale * d + (iJ ? 0.0 : length(add_term)); z = mul(c, mul(m, z)); } float zl = length(z); return 0.5 * zl * log(zl) / max(d, 0.0001) / 1.5; }`; const jf = ` float f(vec${d} p) { ${ip} ${id} for (int i = 0; i < MAX_ITER; i++) { float r2 = dot(z, z); if (r2 > 16.0) break; ${ four ? "jit4(c, z, dz0, dz1, dz2, dz3, dc0, dc1, dc2, dc3);" : "jit3(c, z, dz0, dz1, dz2, dc0, dc1, dc2);" } } float zl = length(z); float dl = sqrt(${ four ? "dot(dz0, dz0) + dot(dz1, dz1) + dot(dz2, dz2) + dot(dz3, dz3)" : "dot(dz0, dz0) + dot(dz1, dz1) + dot(dz2, dz2)" }); return 0.5 * zl * log(zl) / max(dl, 0.0001) / 1.5; }`; const jn = ` vec${d} n(vec${d} p) { ${ip} ${id} for (int i = 0; i < MAX_ITER; i++) { float r2 = dot(z,z); if (r2 > 16.0) break; ${ four ? "jit4(c,z,dz0,dz1,dz2,dz3,dc0,dc1,dc2,dc3);" : "jit3(c,z,dz0,dz1,dz2,dc0,dc1,dc2);" } } return normalize(vec${d}( dot(z,dz0), dot(z,dz1), dot(z,dz2) ${four ? ",dot(z,dz3)" : ""} )); }`; return { it, af, jf, jn }; }35:T1026,mc = ({ a0 = [0, 0, 0, 0], n0 = [0, 0, 0, 0], a1 = [0, 0, 0, 0], n1 = [0, 0, 0, 0] } = {}) => { const transform = (l, a, n) => { return ` vec4 ${l}(vec4 z){ return vec4( ${components .map((k, i) => `${n[i] ? "-" : ""}${a[i] ? `abs(z.${k})` : `z.${k}`}`) .join(",")} ); }`; }; const transformD = (name, a, n, d) => { const vars = d ? ["dx", "dy", "dz", "dw"] : ["dx", "dy", "dz"]; return ` void ${name}(vec4 z, ${vars.map((v) => `inout vec4 ${v}`).join(", ")}) { ${components .map((k, i) => { let s = null; if (a[i] && n[i]) s = `-(z.${k} >= 0.0 ? 1.0 : -1.0)`; else if (a[i]) s = `(z.${k} >= 0.0 ? 1.0 : -1.0)`; else if (n[i]) s = `-1.0`; if (!s) return ""; return vars.map((v) => `${v}.${k} *= ${s};`).join("\n"); }) .join("\n")} }`; }; const d = four ? 4 : 3; const p = getPower(form.p, "z"); const ip = `vec4 c,z; if (iJ) { c = s(iC); z = s(${four ? "p" : "vec4(p,0)"}); } else { c = s(${four ? "p" : "vec4(p,0)"}); z = vec4(0); }`; const id4 = ` vec4 dx,dy,dz,dw; if (iJ) { dx = vec4(1,0,0,0); dy = vec4(0,1,0,0); dz = vec4(0,0,1,0); dw = vec4(0,0,0,1); } else { dx = vec4(0); dy = vec4(0); dz = vec4(0); dw = vec4(0); }`; const id3 = ` vec4 dx,dy,dz; if (iJ) { dx = s(vec4(1,0,0,0)); dy = s(vec4(0,1,0,0)); dz = s(vec4(0,0,1,0)); } else { dx = vec4(0); dy = vec4(0); dz = vec4(0); }`; const id = four ? id4 : id3; const it = ` ${transform("pre", a0, n0)} ${transform("post", a1, n1)} ${transformD("preD3", a0, n0, 0)} ${transformD("postD3", a1, n1, 0)} ${transformD("preD4", a0, n0, 1)} ${transformD("postD4", a1, n1, 1)} #define j(z, d) (${getDerivative(form.p, "z", "d")}) void jit3(vec4 c, inout vec4 z, inout vec4 dx, inout vec4 dy, inout vec4 dz) { vec4 old = z; z = pre(z); preD3(old, dx, dy, dz); dx = j(z,dx); dy = j(z,dy); dz = j(z,dz); z = ${p}; vec4 old2 = z; z = post(z); postD3(old2, dx, dy, dz); if (!iJ) { dx += s(vec4(1,0,0,0)); dy += s(vec4(0,1,0,0)); dz += s(vec4(0,0,1,0)); } z += c; } void jit4(vec4 c, inout vec4 z, inout vec4 dx, inout vec4 dy, inout vec4 dz, inout vec4 dw) { vec4 old = z; z = pre(z); preD4(old, dx, dy, dz, dw); dx = j(z,dx); dy = j(z,dy); dz = j(z,dz); dw = j(z,dw); z = ${p}; vec4 old2 = z; z = post(z); postD4(old2, dx, dy, dz, dw); if (!iJ) { dx += vec4(1,0,0,0); dy += vec4(0,1,0,0); dz += vec4(0,0,1,0); dw += vec4(0,0,0,1); } z += c; } vec4 trap(vec${d} p) { ${ip} vec4 o = vec4(1e10); for (int i=0;i16.0) break; o = min(o,vec4(abs(length(z) - 0.5))); z = pre(z); z = ${p}; z = post(z); z = z + c; } return o; }`; const af = ` float f(vec${d} p) { ${ip} float d = 1.0; for (int i=0;i16.0) break; z = pre(z); z = ${p}; z = post(z); d = sqrt(dot(z,z)/max(r2,0.0001))*d*${form.p}.0+1.0; z = z + c; } float zl = length(z); return 0.5*zl*log(zl)/d; }`; const jf = ` float f(vec${d} p) { ${ip} ${id} for (int i=0;i16.0) break; ${four ? "jit4(c,z,dx,dy,dz,dw)" : "jit3(c,z,dx,dy,dz)"}; } float zl = length(z); return 0.5*zl*log(zl)/sqrt( dot(dx,dx)+ dot(dy,dy)+ dot(dz,dz) ${four ? "+dot(dw,dw)" : ""} ); }`; const jn = ` vec${d} n(vec${d} p) { ${ip} ${id} for (int i=0;i16.0) break; ${four ? "jit4(c,z,dx,dy,dz,dw)" : "jit3(c,z,dx,dy,dz)"}; } return normalize(vec${d}( dot(z,dx), dot(z,dy), dot(z,dz) ${four ? ",dot(z,dw)" : ""} )); }`; return { it, af, jf, jn }; }36:[] 2f:{"id":"31dc3657d3715768","slug":"hypercomplex","title":"Hypercomplex","thumbnail":"1510ca0d75a38cc9a4768712911662f41879e28369b779269365da335498b3dd","access_level":"public","create_time":"$D2026-06-15T16:12:29.077Z","update_time":"$D2026-09-04T20:52:04.221Z","view_time":null,"first_public_time":"$D2026-06-20T02:50:50.029Z","fork":false,"stars":7,"starred":false,"owner":{"type":"team","id":"d6840fab65eebcab","login":"nxrix","name":"nxrix","avatar_url":"https://avatars-next.observableusercontent.com/e64bf55bfe8edb531a8042147a84d2906d224f9102c11c06b67fae3be08b1a80","tier":"starter_2024"},"version":2032,"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":true,"trashed":false,"subscribed":null,"forks":1,"collection":{"id":"14ce59584b762c88","slug":"math","title":"Math","owner":{"id":"d6840fab65eebcab","login":"nxrix","name":"nxrix"}},"type":"notebook","body":{"title":"Hypercomplex","cells":[{"id":0,"value":"# Hypercomplex\n\n4D Latin-square hypercomplex fractal explorer \n[Github repository](https://github.com/nxrix/hypercomplex)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":775,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1478,"value":"html`

${viewof signs}${viewof julia}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":498,"value":"viewof form = Inputs.form({\n s: Inputs.radio([3, 2, 1, 0], {\n label: \"Slice\",\n format: (d) => `${components[d]} = 0`,\n value: 3\n }),\n o: Inputs.select(permutations, {\n label: \"Order\",\n format: (i) => i.toUpperCase()\n }),\n n: numberStepper({ label: \"Table Index\", value: 0, min: 0, max: 575 }),\n p: numberStepper({ label: \"Power\", value: 2, min: 1, max: 6 })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1480,"value":"{\n const i = Inputs.number({ placeholder: \"Size\", value: 512, min: 1, step: 1 });\n const d = Inputs.button(\"Download PNG\", {\n reduce() {\n const a = document.createElement(\"a\");\n const s = Number(i.value) || 512;\n canvas.resize(s, s, 1);\n a.href = canvas.toDataURL(\"image/png\");\n canvas.resizeEvent();\n a.download = `hypercomplex-fractal-n${form.n}.png`;\n a.click();\n }\n });\n i.style.width = \"100px\";\n return html`

${i}${d}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":528,"value":"{\n const p = Inputs.toggle({ label: \"Perspective\", value: state.perspective });\n const f = Inputs.range([30, 90], { label: \"FOV\", value: state.fov, step: 5 });\n const u = p.addEventListener(\"input\", () => {\n state.perspective = p.value;\n f.style.display = p.value ? \"flex\" : \"none\";\n canvas.setCamera(p.value);\n });\n f.addEventListener(\"input\", () => {\n state.fov = f.value;\n canvas.setFOV(f.value);\n });\n f.style.display = p.value ? \"flex\" : \"none\";\n return Inputs.form({ p, f });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1327,"value":"viewof shape = {\n const e = Inputs.select(shapes, {\n label: \"Shape\",\n value: shapes[state.shape],\n format: (i) => i.l\n });\n e.addEventListener(\"input\", () => {\n state.shape = shapes.indexOf(e.value);\n });\n return e;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":960,"value":"viewof jacobian = Inputs.form({\n f: Inputs.toggle({\n label: \"Jacobian Distance\",\n value: false\n }),\n n: Inputs.toggle({\n label: \"Jacobian Normals\",\n value: true\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":878,"value":"viewof four = Inputs.toggle({\n label: \"4D - Experimental - Click at your own risk!\",\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1926,"value":"viewof trap = Inputs.toggle({ label: \"Orbit Trap Coloring\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1066,"value":"viewof eps = Inputs.number({ label: \"EPS\", value: 0.001 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1070,"value":"viewof max = Inputs.number({ label: \"Max Iterations\", value: 16 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1875,"value":"viewof mask = Inputs.form(\n Array.from({ length: 4 }, (_, i) => {\n const r = Inputs.form(\n Array.from({ length: 4 }, (__, j) => {\n const l = components[j];\n const c = Inputs.toggle({\n label:\n ((i / 2) | 0 ? \"n\" : \"z\") + (i % 2 ? \"-\" + l : \"|\" + l + \"|\"),\n value: false\n });\n c.children[0].style.width = \"32px\";\n c.style.width = \"fit-content\";\n return c;\n })\n );\n r.style.display = \"flex\";\n r.style.gap = \"16px\";\n return r;\n })\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":824,"value":"viewof no = numberStepper({\n label: \"Normals Orientation\",\n value: 0,\n min: 0,\n max: 47\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":833,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":241,"value":"viewof signs = {\n const values = state.signs;\n const e = html`

`;\n e.style.display = \"grid\";\n e.style.width = \"fit-content\";\n e.style.gridTemplateColumns = `repeat(4, auto)`;\n e.style.gap = \"4px\";\n for (let i = 0; i < 16; i++) {\n const btn = html``;\n btn.style.fontFamily = \"var(--monospace)\";\n btn.style.aspectRatio = \"1\";\n btn.textContent =\n (values[i] ? \"-\" : \"+\") + [\"1\", \"i\", \"j\", \"k\"][tables[form.n][i]];\n btn.style.color = `light-dark(${values[i] ? \"#e24,#f88\" : \"#42e,#8af\"})`;\n btn.onclick = () => {\n state.signs[i] = values[i] ^= 1;\n btn.textContent =\n (values[i] ? \"-\" : \"+\") + [\"1\", \"i\", \"j\", \"k\"][tables[form.n][i]];\n btn.style.color = `light-dark(${values[i] ? \"#e24,#f88\" : \"#42e,#8af\"})`;\n e.value = values.slice();\n e.dispatchEvent(new Event(\"input\", { bubbles: true }));\n };\n e.appendChild(btn);\n }\n e.value = values.slice();\n return e;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":177,"value":"viewof julia = {\n const j = Inputs.toggle({ label: \"Julia\", value: state.julia });\n const e = Inputs.form({\n iJ: j,\n iC: Inputs.form(\n Object.fromEntries(\n components.slice(0, 4).map((c) => [\n c,\n Inputs.range([-2, 2], {\n label: c,\n value: state.c[c],\n step: 0.01\n })\n ])\n )\n )\n });\n const u = () => {\n e.children[1].style.display = e.value.iJ ? \"block\" : \"none\";\n canvas.uniforms.iJ.value = e.value.iJ;\n canvas.uniforms.iC.value = e.value.iC;\n state.julia = e.value.iJ;\n state.c = e.value.iC;\n canvas.update();\n };\n e.addEventListener(\"input\", u);\n u();\n return e;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1049,"value":"---\n## Core","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":892,"value":"errors = html`

Loading...

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":434,"value":"state = {\n return {\n signs: [0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 1, 1, 0, 1, 1, 1],\n julia: false,\n c: { x: 0, y: 0, z: 0, w: 0 },\n perspective: false,\n fov: 45,\n s: true,\n shape: 0\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1329,"value":"shapes = [\n {\n l: \"Mandelbrot\",\n ...mc({ a0: mask[0], n0: mask[1], a1: mask[2], n1: mask[3] })\n },\n { l: \"Lambda\", ...lc },\n { l: \"Burning Ship\", ...mc({ a1: [0, 1, 0, 0], n1: [0, 1, 0, 0] }) },\n { l: \"Celtic Heart\", ...mc({ a0: [1, 0, 0, 0] }) },\n { l: \"Buffalo\", ...mc({ a1: [1, 1, 0, 0], n1: [0, 1, 0, 0] }) },\n {\n l: \"Perpendicular Mandelbrot\",\n ...mc({ a0: [1, 0, 0, 0], n0: [0, 1, 0, 0] })\n },\n { l: \"Perpendicular Burning Ship\", ...mc({ a0: [0, 1, 0, 0] }) }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1714,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1680,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":964,"value":"viewof f3 = glsl(\"f3\",`\nfloat f3(vec3 p, inout vec4 hp) {\n vec4 ro = vec4(0,0,0,-2.5);\n vec4 rd = normalize(vec4(p,1));\n vec2 b = iHypersphere(ro,rd,2.0);\n float t = max(b.x,0.0);\n float m = 256.0;\n for (int i=0;i<128;i++) {\n vec4 p = ro+rd*t;\n hp = p;\n float d = f(p);\n if (d < m) { m = d; }\n if (d < EPS) { return 0.0; }\n t += d;\n if (t>=b.y) break;\n }\n return max(m*0.5,EPS);\n}\n`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1005,"value":"viewof an4 = glsl(\n \"an4 - Approximate Normals 4\",\n `vec4 n(vec4 p) {\n return normalize(vec4(\n f(p+vec4(EPS,0,0,0))-f(p-vec4(EPS,0,0,0)),\n f(p+vec4(0,EPS,0,0))-f(p-vec4(0,EPS,0,0)),\n f(p+vec4(0,0,EPS,0))-f(p-vec4(0,0,EPS,0)),\n f(p+vec4(0,0,0,EPS))-f(p-vec4(0,0,0,EPS))\n ));\n }`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1000,"value":"viewof an3 = glsl(\n \"an3 - Approximate Normals 3\",\n `vec3 n(vec3 p) {\n const vec2 k = vec2(1,-1)*EPS;\n return normalize( k.xyy*f( p + k.xyy ) +\n k.yyx*f( p + k.yyx ) +\n k.yxy*f( p + k.yxy ) +\n k.xxx*f( p + k.xxx ) );\n }`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":214,"value":"viewof mul = {\n const a = tables[form.n];\n const sums = Array.from({ length: 4 }, () => []);\n for (let i = 0; i < 16; i++) {\n const row = Math.floor(i / 4);\n const col = i % 4;\n const term = `${signs[i] ? \"-\" : \"+\"}a.${components[row]}*b.${\n components[col]\n }`;\n sums[a[i]].push(term);\n }\n let o = `vec4 mul(vec4 a, vec4 b) {\\n`;\n o += ` return vec4(\\n`;\n for (let r = 0; r < 4; r++) {\n const terms = sums[r];\n let expr;\n if (terms.length === 0) {\n expr = \"0.0\";\n } else {\n expr = terms.join(\" + \");\n }\n o += ` ${expr}`;\n if (r < 3) o += \",\";\n o += \"\\n\";\n }\n o += \" );\\n\";\n o += \"}\";\n return glsl(\"mul\", o);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":190,"value":"tables = {\n const tables = [];\n const gr = Array.from({ length: 4 }, () => Array(4).fill(-1));\n const ru = Array.from({ length: 4 }, () => Array(4).fill(false));\n const cu = Array.from({ length: 4 }, () => Array(4).fill(false));\n const backtrack = (p) => {\n if (p === 16) {\n tables.push(gr.map((r) => r.slice()).flat());\n return;\n }\n const r = Math.floor(p / 4);\n const c = p % 4;\n for (let s = 0; s < 4; s++) {\n if (!ru[r][s] && !cu[c][s]) {\n gr[r][c] = s;\n ru[r][s] = true;\n cu[c][s] = true;\n backtrack(p + 1);\n ru[r][s] = false;\n cu[c][s] = false;\n gr[r][c] = -1;\n }\n }\n };\n backtrack(0);\n return tables;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1640,"value":"getDerivative = (n,z,d) => {\n const t = [];\n for (let i = 0; i < n; i++) {\n const o = Array(n).fill(z);\n o[i] = d;\n let e = o[0];\n for (let j = 1; j < n; j++) {\n e = `mul(${e},${o[j]})`;\n }\n t.push(e);\n }\n return t.join(\"+\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1643,"value":"getPower = (n, z) => {\n return [...Array(n - 1)].reduce((a, _) => `mul(${a},${z})`, z);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":828,"value":"permutations = [\"xyz\", \"xzy\", \"yxz\", \"yzx\", \"zxy\", \"zyx\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":384,"value":"components = [\"x\", \"y\", \"z\", \"w\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":156,"value":"glsl = (l = \"\", t) => {\n return Object.assign(md`\\`${l} = glsl(~)\\``, { value: t });\n const c = md`\\`\\`\\`glsl\\n${t.trim()}\\n\\`\\`\\``;\n c.style.margin = \"0\";\n c.style.padding = \"8px\";\n const e = html`

${c}

`;\n e.style.width = \"fit-content\";\n e.style.maxWidth = \"100%\";\n e.style.maxHeight = \"400px\";\n e.style.overflow = \"auto\";\n e.style.borderRadius = \"4px\";\n e.style.border = \"1px solid #8884\";\n e.value = t;\n return e;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":443,"value":"import { numberStepper } from \"@nxrix/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"THREE = {\n try {\n const THREE = await import(\"three@0.184.0\");\n const { OrbitControls } = await import(\n \"three@0.184.0/examples/jsm/controls/OrbitControls.js\"\n );\n return { ...THREE, OrbitControls };\n } catch (e) {\n // IOS 15 issue\n const THREE = await import(\"https://esm.sh/three@0.184.0?target=es2020\");\n const { OrbitControls } = await import(\n \"https://esm.sh/three@0.184.0/examples/jsm/controls/OrbitControls.js?target=es2020\"\n );\n return { ...THREE, OrbitControls };\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W36","stdlib":"2","titling":"auto"}} 30:"$2f:body"