2a:null 2b:["$","title",null,{"children":"Hypercomplex | nxrix | Observable"}] 30: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; }31:T66b,{ return ">"; 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}

`; }32:Tc6f,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 = "light-dark(green,lawngreen)"; material.fragmentShader = fs; material.needsUpdate = true; canvas.update(); } return glsl("shader", shader); }33: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 }; }34: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 }; }35:Tcb6,groups = [ [ 0,171,404,575 ], [ 1, 4, 6,170, 231,262,313,400, 431,432,548,569 ], [ 2, 8, 17, 24, 48,120,147,169, 177,184,217,241, 334,358,391,398, 406,428,455,527, 551,558,567,573 ], [ 3, 10, 23, 25, 50,125,146,168, 181,188,222,245, 330,353,387,394, 407,429,450,525, 550,552,565,572 ], [ 5, 7, 11, 14, 19, 22, 28, 30, 51, 54,122,124, 182,187,197,208, 232,235,236,249, 250,253,270,277, 289,308,312,332, 335,381,382,385, 399,409,415,421, 433,448,454,456, 473,497,503,528, 534,540,554,566 ], [ 9, 12, 15, 16, 18, 21, 72, 74, 77, 96, 98,102, 153,160,183,186, 207,216,223,230, 240,244,263,286, 306,322,325,328, 339,355,367,386, 401,408,420,424, 442,445,453,474, 480,508,523,529, 541,545,553,568 ], [ 13, 20, 76, 99, 178,191,196,271, 304,379,384,397, 476,499,555,562 ], [ 26, 56,138,145, 228,258,317,347, 430,437,519,549 ], [ 27, 62,143,144, 173,175,344,402, 405,513,571,574 ], [ 29, 31, 57, 60, 83, 85, 87,113, 116,118,139,141, 203,229,259,285, 288,319,375,427, 434,457,490,546 ], [ 32, 34, 35, 41, 46, 47, 49, 52, 63, 67, 68, 71, 78, 86, 95,101, 106,119,121,127, 130,133,134,142, 176,180,185,189, 193,219,247,265, 305,331,376,388, 389,396,403,426, 451,477,501,547, 556,557,563,570 ], [ 33, 40, 58, 64, 73, 80, 89, 97, 104,114,129,136, 152,161,192,204, 214,226,239,254, 260,264,279,282, 293,296,311,315, 321,336,349,361, 371,383,414,423, 439,446,461,471, 478,486,495,502, 511,517,535,542 ], [ 36, 45, 53, 70, 126,131,233,252, 333,413,449,530 ], [ 37, 44, 55, 65, 123,128,201,215, 224,257,278,280, 299,309,327,362, 365,411,440,468, 472,482,485,532 ], [ 38, 43, 61, 66, 75, 84, 88, 90, 93, 94,103,105, 107,108,111,117, 135,140,238,255, 329,412,452,531 ], [ 39, 42, 59, 69, 79, 81, 92,100, 109,115,132,137, 205,227,261,283, 307,324,364,410, 443,475,483,533 ], [ 82,112,202,284, 291,373,463,493 ], [ 91,110 ], [ 148,150,200,206, 225,256,281,287, 290,294,316,346, 350,369,372,425, 436,459,462,488, 492,515,518,544 ], [ 149,151,154,155, 166,167,172,174, 179,190,194,199, 220,243,267,269, 298,310,326,340, 343,345,352,356, 359,368,378,390, 392,393,395,422, 441,469,479,489, 498,504,507,512, 521,524,526,543, 559,560,561,564 ], [ 156,165,195,211, 234,251,268,274, 292,301,314,341, 348,370,380,419, 438,460,466,494, 496,506,516,536 ], [ 157,158,163,164, 198,209,210,213, 218,237,246,248, 266,272,275,276, 295,297,300,303, 318,320,337,338, 351,357,360,366, 374,377,417,418, 435,447,458,464, 467,470,481,487, 491,500,509,510, 514,520,537,538 ], [ 159,162,221,242, 323,342,354,416, 444,505,522,539 ], [ 212,273,302,363, 465,484 ] ].sort((a,b)=>a[0]-b[0]);36:[] 2e:{"id":"31dc3657d3715768","slug":"hypercomplex","title":"Hypercomplex","thumbnail":"1510ca0d75a38cc9a4768712911662f41879e28369b779269365da335498b3dd","access_level":"public","create_time":"$D2026-06-15T16:12:29.077Z","update_time":"$D2026-09-29T16:33:35.734Z","view_time":null,"first_public_time":"$D2026-06-20T02:50:50.029Z","has_unpublished_edits":null,"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":2087,"publish_version":2087,"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,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"14ce59584b762c88","slug":"math","title":"Math","owner":{"id":"d6840fab65eebcab","login":"nxrix","name":"nxrix"}},"type":"notebook","body":{"titling":"auto","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","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":775,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1478,"value":"html`

${viewof signs}${viewof julia}

${i}${d}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1926,"value":"viewof trap = Inputs.toggle({ label: \"Orbit Trap Coloring\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1066,"value":"viewof eps = Inputs.number({ label: \"EPS\", value: 0.001 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1070,"value":"viewof max = Inputs.number({ label: \"Max Iterations\", value: 16 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1928,"value":"{\n const s = 64;\n const u = [0,1,2,3,7,8];\n return html`

${Array.from({length:24},(_,i)=>html`

${i}

`)}

`;\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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"---\n## Core","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":892,"value":"errors = html`

Loading...

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1714,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1680,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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 groups.map(i=>tables[i[0]]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1927,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":828,"value":"permutations = [\"xyz\", \"xzy\", \"yxz\", \"yzx\", \"zxy\", \"zyx\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"components = [\"x\", \"y\", \"z\", \"w\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":443,"value":"import { numberStepper } from \"@nxrix/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"2"}} 2f:"$2e:body"