2b:null 2c:["$","title",null,{"children":"Fractal Merkabah | Lao | Observable"}] 31:T58ae,scene = { // ---------------- Container with external slider above canvas ---------------- const n=5 const container = html`

Iterations ${n}

`; const iterSlider = container.querySelector('#iter'); const iterValue = container.querySelector('#iterValue'); // Canvas host -- ResizeObserver watches this for width changes. We intentionally // do NOT reference Observable's `width` (doing so would re-run the cell on resize, // tearing down the WebGL context). Instead we observe our own container. // We make it `position: relative` so we can place sentinel elements inside it // for IntersectionObserver to track top / middle / bottom visibility. // In portrait the canvas is constrained so it's never taller than 1 wide : 2 high. // On a phone (very narrow) this lands exactly at 1:2 (height = 2 * width); on wider // viewports the height tops out at BASE_HEIGHT and the canvas reads as landscape. const BASE_HEIGHT = 850; const PORTRAIT_MAX_TALLNESS = 2; // cap on height / width const computeHeight = (w) => Math.min(BASE_HEIGHT, PORTRAIT_MAX_TALLNESS * w); const canvasHost = html`

`; container.appendChild(canvasHost); // ---------------- Visibility sentinels ---------------- // Three zero-size, non-interactive markers at the top, middle, and bottom of the // canvas host. An IntersectionObserver tracks which (if any) are in the viewport. // The render loop only draws when at least one sentinel is visible -- this avoids // burning GPU cycles when the user has scrolled the scene off-screen. const sentinelStyle = ` position: absolute; left: 0; width: 1px; height: 1px; pointer-events: none; visibility: hidden; `; const sentinelTop = html`

`; const sentinelMid = html`

`; const sentinelBot = html`

`; canvasHost.appendChild(sentinelTop); canvasHost.appendChild(sentinelMid); canvasHost.appendChild(sentinelBot); const visibleSentinels = new Set(); const intersectionObserver = new IntersectionObserver((entries) => { for (const entry of entries) { if (entry.isIntersecting) visibleSentinels.add(entry.target); else visibleSentinels.delete(entry.target); } }); intersectionObserver.observe(sentinelTop); intersectionObserver.observe(sentinelMid); intersectionObserver.observe(sentinelBot); // Initial size from the container's actual rendered width. const initialRect = canvasHost.getBoundingClientRect(); let curW = Math.max(1, Math.floor(initialRect.width)) || 960; let curH = computeHeight(curW); canvasHost.style.height = curH + 'px'; // ---------------- Scene setup ---------------- const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(45, curW / curH, 0.1, 2000000); camera.position.set(0, 3*.8, -7*.8); const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: 'high-performance', }); renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); renderer.setSize(curW, curH); renderer.outputColorSpace = THREE.SRGBColorSpace; renderer.toneMapping = THREE.ACESFilmicToneMapping; renderer.toneMappingExposure = 0.9; renderer.domElement.style.display = 'block'; canvasHost.appendChild(renderer.domElement); const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableDamping = true; controls.dampingFactor = 0.04; // lower = smoother, longer glide (default 0.05) controls.zoomSpeed = 1; // larger zoom step per wheel tick (default 1.0) controls.rotateSpeed = 1; // gentler rotate -> smoother feel when paired with low damping controls.enablePan = false; // panning disabled entirely (no right-drag, no two-finger pan) controls.target.set(0, 0, 0); // ---------------- Zoom-to-fit (handles portrait aspect ratios) ---------------- // The default camera position frames the (roughly spherical) scene so it fits // top-to-bottom -- i.e. against the vertical FOV. In portrait (aspect < 1) the // *horizontal* FOV is narrower than the vertical one, so the sphere overflows // left/right. For a perspective camera the on-screen width fraction of an object // of radius R at distance d is R / (d * aspect * tan(vFOV/2)) , so to hold that // fraction constant below square we pull the camera back by exactly 1/aspect. // At/above square the factor is 1 (no change) -> the crossover is a square viewport. const BASE_VIEW_DIST = camera.position.distanceTo(controls.target); function fitDistanceForAspect(aspect) { const factor = aspect < 1 ? 1 / aspect : 1; return BASE_VIEW_DIST * factor; } // Smooth zoom state: each wheel tick adjusts `zoomTargetDist` (the distance // from controls.target we're easing toward), and the render loop interpolates // the camera's actual distance toward it each frame. This gives wheel zoom // its own inertia, independent of OrbitControls' rotate damping. let zoomTargetDist = BASE_VIEW_DIST; const ZOOM_SMOOTH = 0.18; // per-frame easing factor toward target (higher = snappier) // `userZooming` is true only while WE are driving the zoom (wheel / middle-drag). // When it's false the render loop leaves the distance to OrbitControls (e.g. a // touch pinch) and just keeps `zoomTargetDist` synced to the actual distance -- // so the smooth-ease never yanks the camera back after a pinch ends. let userZooming = false; // True once the user rotates / zooms / pinches. After that we stop auto-fitting // on resize so a device rotation never overrides the view they chose. let userHasInteracted = false; controls.addEventListener('start', () => { userHasInteracted = true; }); function clampZoomTarget() { zoomTargetDist = Math.max(controls.minDistance, Math.min(controls.maxDistance, zoomTargetDist)); } // Re-frame the scene for the current aspect ratio, preserving the camera's // current view direction. Called once on init and again on resize until the // user interacts (covers portrait<->landscape device rotation). function applyFitToView() { const aspect = curW / curH; const targetDist = fitDistanceForAspect(aspect); const dir = camera.position.clone().sub(controls.target); const len = dir.length() || 1; dir.multiplyScalar(targetDist / len); camera.position.copy(controls.target).add(dir); zoomTargetDist = targetDist; clampZoomTarget(); } applyFitToView(); // Stop the page from scrolling when the user wheels over the canvas, and // drive the zoom ourselves. We can't rely on OrbitControls' built-in wheel // handler here: it has a known quirk where it bails out if `state !== NONE // && state !== ROTATE`, and the state machine can get stuck (e.g. when a // drag is released off-canvas, see three.js #24566). Driving the dolly // directly sidesteps the state check entirely. // // `stopImmediatePropagation` + capture-phase registration ensures our // listener runs first and OrbitControls' listener never sees the event -- // otherwise both would fire and zoom would be doubled. // `passive: false` is required for preventDefault to take effect on wheel. // // Mouse wheel vs trackpad: browsers fire `wheel` for both, and there's no // clean API to tell them apart. The reliable heuristic is the delta // magnitude: real mouse wheels fire discrete events with large jumps // (typically |deltaY| >= 100 in pixel mode, or notch-y multiples of ~120), // while trackpads fire many small fractional deltas as the user scrolls. // We also treat pinch-zoom (ctrlKey set synthetically by the browser) as // trackpad. Trackpad/pinch get 1x; mouse wheel gets 3x. const WHEEL_PIXEL_THRESHOLD = 50; const onCanvasWheel = (e) => { e.preventDefault(); e.stopImmediatePropagation(); const isTrackpad = e.ctrlKey || (e.deltaMode === 0 && Math.abs(e.deltaY) < WHEEL_PIXEL_THRESHOLD); const strength = isTrackpad ? 1 : 3; const zoomScale = Math.pow(0.95, controls.zoomSpeed * strength); if (e.deltaY < 0) { zoomTargetDist *= zoomScale; // wheel up -> zoom in } else if (e.deltaY > 0) { zoomTargetDist *= 1 / zoomScale; // wheel down -> zoom out } userZooming = true; userHasInteracted = true; clampZoomTarget(); }; renderer.domElement.addEventListener('wheel', onCanvasWheel, { passive: false, capture: true }); // Middle mouse: swallow OrbitControls' own handling (which would otherwise // latch its state machine into DOLLY and break subsequent wheel events), and // implement middle-drag-to-zoom ourselves. Vertical drag distance is mapped // to a multiplicative zoom factor and pushed into `zoomTargetDist`, so it // composes with the same smoothing as the wheel. Tuned so a drag spanning // the full canvas height roughly doubles or halves the distance. let middleDragLastY = null; const MIDDLE_DRAG_PIXELS_PER_DOUBLING = 200; const onCanvasMouseDown = (e) => { if (e.button === 1) { e.preventDefault(); e.stopPropagation(); middleDragLastY = e.clientY; } }; renderer.domElement.addEventListener('mousedown', onCanvasMouseDown, true); // mousemove + mouseup are on `window` so we keep tracking even if the // cursor leaves the canvas mid-drag. const onWindowMouseMove = (e) => { if (middleDragLastY === null) return; const dy = e.clientY - middleDragLastY; middleDragLastY = e.clientY; // Drag down -> zoom out (distance grows). Sign matches typical 3D apps. const factor = Math.pow(2, dy / MIDDLE_DRAG_PIXELS_PER_DOUBLING); zoomTargetDist *= factor; userZooming = true; userHasInteracted = true; clampZoomTarget(); }; const onWindowMouseUp = (e) => { if (e.button === 1) middleDragLastY = null; }; window.addEventListener('mousemove', onWindowMouseMove); window.addEventListener('mouseup', onWindowMouseUp); // ---------------- Sky + environment ---------------- const sky = new THREE.Sky(); sky.scale.setScalar(450000); const skyU = sky.material.uniforms; skyU.turbidity.value = 10; skyU.rayleigh.value = 3; skyU.mieCoefficient.value = 0; skyU.mieDirectionalG.value = 0; const sunElevation = 3; const sunAzimuth = 180; const phi = THREE.MathUtils.degToRad(90 - sunElevation); const theta = THREE.MathUtils.degToRad(sunAzimuth); const sun = new THREE.Vector3().setFromSphericalCoords(1, phi, theta); skyU.sunPosition.value.copy(sun); scene.add(sky); // Bake sky into a PMREM (one-time) const pmrem = new THREE.PMREMGenerator(renderer); const skyScene = new THREE.Scene(); skyScene.add(sky.clone()); const envRT = pmrem.fromScene(skyScene); pmrem.dispose(); scene.environment = envRT.texture; // ---------------- Lights ---------------- const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 2); hemiLight.color.setHSL(0.6, 1, 0.6); hemiLight.groundColor.setHSL(0.095, 1, 0.75); hemiLight.position.set(0, 50, 0); scene.add(hemiLight); const rectLight = new THREE.RectAreaLight(0xfff0d0, 18, 18, 8); rectLight.position.copy(sun).multiplyScalar(20); // closer than the old dirLight; intensity falls off with distance rectLight.lookAt(0, 0, 0); scene.add(rectLight); // ---------------- Materials ---------------- const upMaterial = new THREE.MeshStandardMaterial({ color: 0xffe988, metalness: 1.0, roughness: 0.1, envMapIntensity: 3, emissive: 0xffaa33, emissiveIntensity: 0, }); const downMaterial = new THREE.MeshStandardMaterial({ color: 0xffffff, metalness: 1.0, roughness: 0.75, envMapIntensity: 1.3, }); downMaterial.onBeforeCompile = (shader) => { shader.vertexShader = shader.vertexShader .replace( '#include ', `#include attribute vec3 aBranchColor; varying vec3 vBranchColor;` ) .replace( '#include ', `#include vBranchColor = aBranchColor;` ); shader.fragmentShader = shader.fragmentShader .replace( '#include ', `#include varying vec3 vBranchColor;` ) .replace( '#include ', `#include diffuseColor.rgb *= vBranchColor;` ); }; const apexCapMaterial = new THREE.MeshStandardMaterial({ color: 0xd09870, metalness: 1.0, roughness: 0.75, envMapIntensity: 1.3, }); const TETRA_SIZE = constants.TETRA_SIZE; const BEVEL_FRAC = constants.BEVEL_FRAC; const merkaba = new THREE.Group(); scene.add(merkaba); const upGroup = new THREE.Group(); const downGroup = new THREE.Group(); merkaba.add(upGroup); merkaba.add(downGroup); // Reusable temp objects const _m = new THREE.Matrix4(); const _q = new THREE.Quaternion(); const _s = new THREE.Vector3(); const _p = new THREE.Vector3(); const _UP = new THREE.Vector3(0, 1, 0); function clearGroup(g) { while (g.children.length) { const c = g.children.pop(); if (c.geometry) c.geometry.dispose(); } } // ---------------- Build geometry (called on slider change) ---------------- function rebuild(iterations) { clearGroup(upGroup); clearGroup(downGroup); // -------- Upward Sierpinski -------- const sierpInstances = []; collectSierpinski(upwardTetraVertices(TETRA_SIZE), iterations, sierpInstances); const { geometry: unitTetraGeom, sizeBoost: tetraSizeBoost } = makeUnitTetraGeometry(BEVEL_FRAC); const tetraInst = new THREE.InstancedMesh(unitTetraGeom, upMaterial, sierpInstances.length); for (let i = 0; i < sierpInstances.length; i++) { const { center, size } = sierpInstances[i]; const s = size * tetraSizeBoost; _s.set(s, s, s); _q.identity(); _m.compose(center, _q, _s); tetraInst.setMatrixAt(i, _m); } tetraInst.instanceMatrix.needsUpdate = true; upGroup.add(tetraInst); // -------- Downward fractal tree -------- const N = iterations; const apex = new THREE.Vector3(0, -TETRA_SIZE, 0); const topR = TETRA_SIZE * Math.sqrt(8 / 9); const H_total = TETRA_SIZE + TETRA_SIZE / 3; const r1 = topR / (2 * (1 - Math.pow(0.5, N))); const r_levels = Array.from({ length: N }, (_, i) => r1 * Math.pow(0.5, i)); const H1 = H_total / (2 * (1 - Math.pow(0.5, N))); const H_levels = Array.from({ length: N }, (_, i) => H1 * Math.pow(0.5, i)); const branchLen1 = Math.sqrt(r_levels[0] * r_levels[0] + H_levels[0] * H_levels[0]); // Thickness baselines are tuned for N=8. Lower N -> thicker, higher N -> finer. // Trunk uses a gentler 1.5^(8-N) curve so sparse trees don't look like sausages; // tips use a stronger 2.0^(8-N) curve so coarse branches still read as branches. const trunkScale = Math.pow(1.25, 8 - N); const tipScale = Math.pow(2.0, 8 - N); const TRUNK_RATIO = 0.0366; const trunkR = TRUNK_RATIO * branchLen1 * trunkScale; const topR_tube = 0.0025 * tipScale; const ringRadii = Array.from({ length: N + 1 }, (_, i) => trunkR * Math.pow(topR_tube / trunkR, i / N) ); const perLevelInstances = Array.from({ length: N }, () => []); collectTree(apex, 1, N, r_levels, H_levels, perLevelInstances, new THREE.Color(0xd09870)); for (let k = 0; k < N; k++) { const instArr = perLevelInstances[k]; if (instArr.length === 0) continue; const rBottom = ringRadii[k]; const rTop = ringRadii[k + 1]; const geom = makeBranchGeometry(r_levels[k], H_levels[k], rBottom, rTop, k === N - 1); const mesh = new THREE.InstancedMesh(geom, downMaterial, instArr.length); const colorArr = new Float32Array(instArr.length * 3); for (let i = 0; i < instArr.length; i++) { const { from, theta, tint } = instArr[i]; _q.setFromAxisAngle(_UP, -theta); _p.copy(from); _s.set(1, 1, 1); _m.compose(_p, _q, _s); mesh.setMatrixAt(i, _m); colorArr[i * 3 + 0] = tint.r; colorArr[i * 3 + 1] = tint.g; colorArr[i * 3 + 2] = tint.b; } geom.setAttribute('aBranchColor', new THREE.InstancedBufferAttribute(colorArr, 3)); mesh.instanceMatrix.needsUpdate = true; downGroup.add(mesh); } // Bottom cap const apexCapRadius = ringRadii[0]; const apexCapGeom = new THREE.SphereGeometry( apexCapRadius, 64, 32, 0, Math.PI * 2, Math.PI / 2, Math.PI / 2 ); const apexCap = new THREE.Mesh(apexCapGeom, apexCapMaterial); apexCap.position.copy(apex); downGroup.add(apexCap); } // Wire up the slider -- rebuild geometry only, NOT the renderer. iterSlider.addEventListener('input', () => { const n = parseInt(iterSlider.value, 10); iterValue.textContent = n; rebuild(n); }); // Initial build rebuild(parseInt(iterSlider.value, 10)); // ---------------- Keyboard rotation ---------------- const pressedKeys = new Set(); const ROTATE_SPEED = 1.2; let lastFrameTime = performance.now(); function keyToDir(key) { if (key === 'ArrowLeft' || key === 'a' || key === 'A') return -1; if (key === 'ArrowRight' || key === 'd' || key === 'D') return +1; return 0; } const onKeyDown = (e) => { if (keyToDir(e.key) !== 0) { pressedKeys.add(e.key); e.preventDefault(); } }; const onKeyUp = (e) => { pressedKeys.delete(e.key); }; const onBlur = () => pressedKeys.clear(); window.addEventListener('keydown', onKeyDown); window.addEventListener('keyup', onKeyUp); window.addEventListener('blur', onBlur); // ---------------- Resize handling ---------------- // Observe the canvas host's width and update renderer/camera in place. // No `width` reference -> no cell re-run on viewport changes. const resizeObserver = new ResizeObserver((entries) => { for (const entry of entries) { const newW = Math.max(1, Math.floor(entry.contentRect.width)); if (newW === curW) continue; curW = newW; curH = computeHeight(curW); // keep portrait no taller than 1:2 canvasHost.style.height = curH + 'px'; renderer.setSize(curW, curH); camera.aspect = curW / curH; camera.updateProjectionMatrix(); // Re-frame for the new aspect (e.g. phone rotated) -- but only until the // user has taken control of the view, so we never override their zoom. if (!userHasInteracted) applyFitToView(); } }); resizeObserver.observe(canvasHost); // ---------------- Render loop ---------------- // We always pump `requestAnimationFrame` so the loop can resume the moment a // sentinel scrolls back into view, but we skip the actual three.js render // (and the `controls.update()` that drives damping) when nothing is visible. // `lastFrameTime` is reset whenever we wake back up so the next `dt` doesn't // include the time spent off-screen. let stopped = false; let wasVisible = true; function animate(now) { if (stopped) return; const isVisible = visibleSentinels.size > 0; if (!isVisible) { wasVisible = false; requestAnimationFrame(animate); return; } if (!wasVisible) { // Just became visible again -- reset the clock so dt doesn't spike. lastFrameTime = now; wasVisible = true; } const dt = Math.min((now - lastFrameTime) / 1000, 0.1); lastFrameTime = now; let dir = 0; for (const k of pressedKeys) dir += keyToDir(k); if (dir !== 0) { const angle = dir * ROTATE_SPEED * dt; const offset = camera.position.clone().sub(controls.target); offset.applyAxisAngle(_UP, angle); camera.position.copy(controls.target).add(offset); camera.lookAt(controls.target); } // Smooth zoom. Two regimes: // * userZooming -> WE are driving (wheel / middle-drag): ease the camera's // current distance toward `zoomTargetDist`. Using `1 - exp(-k*dt)` makes // the easing rate frame-rate-independent (at 60fps with k=12 this is // ~18% per frame, matching ZOOM_SMOOTH). When we reach the target we hand // control back by clearing the flag. // * otherwise -> OrbitControls is driving the distance (most importantly a // touch PINCH, plus its dolly damping). We don't touch the camera; we just // keep `zoomTargetDist` synced to the actual distance so the ease never // springs the camera back to a stale target after the pinch ends. const offsetVec = camera.position.clone().sub(controls.target); const curDist = offsetVec.length(); if (userZooming) { if (curDist > 1e-6 && Math.abs(curDist - zoomTargetDist) > 1e-5) { const k = -Math.log(1 - ZOOM_SMOOTH) * 60; // converts per-frame@60fps to per-second const alpha = 1 - Math.exp(-k * dt); const newDist = curDist + (zoomTargetDist - curDist) * alpha; offsetVec.multiplyScalar(newDist / curDist); camera.position.copy(controls.target).add(offsetVec); } else { userZooming = false; // reached target -- let OrbitControls own the distance again } } else if (curDist > 1e-6) { zoomTargetDist = curDist; } controls.update(); renderer.render(scene, camera); requestAnimationFrame(animate); } requestAnimationFrame(animate); // ---------------- Cleanup on cell invalidation ---------------- invalidation.then(() => { stopped = true; resizeObserver.disconnect(); intersectionObserver.disconnect(); window.removeEventListener('keydown', onKeyDown); window.removeEventListener('keyup', onKeyUp); window.removeEventListener('blur', onBlur); renderer.domElement.removeEventListener('wheel', onCanvasWheel, { capture: true }); renderer.domElement.removeEventListener('mousedown', onCanvasMouseDown, true); window.removeEventListener('mousemove', onWindowMouseMove); window.removeEventListener('mouseup', onWindowMouseUp); controls.dispose(); renderer.dispose(); envRT.dispose(); }); return container; }32:Tf53,makeUnitTetraGeometry = function makeUnitTetraGeometry(bevelFrac) { const verts = upwardTetraVertices(1); // 4 vertices on unit sphere // Faces, CCW from outside. Indices into `verts`. const FACES = [ [1, 2, 3], // opposite vertex 0 (apex) [0, 3, 2], // opposite vertex 1 [0, 1, 3], // opposite vertex 2 [0, 2, 1], // opposite vertex 3 ]; // Edge length E of unit tetra (vertices on unit sphere): sqrt(8/3). const E = Math.sqrt(8 / 3); const w = bevelFrac * E; // perpendicular distance edges pushed inward const bisectorOffset = 2 * w; // distance from vertex to shrunken-near-vertex const shrunken = {}; const faceNormal = []; for (let f = 0; f < 4; f++) { const [i0, i1, i2] = FACES[f]; const A = verts[i0], B = verts[i1], C = verts[i2]; const n = new THREE.Vector3().subVectors(B, A) .cross(new THREE.Vector3().subVectors(C, A)) .normalize(); faceNormal.push(n); for (const cornerIdx of [i0, i1, i2]) { const P = verts[cornerIdx]; const others = [i0, i1, i2].filter(j => j !== cornerIdx); const Q = verts[others[0]], R = verts[others[1]]; const mid = Q.clone().add(R).multiplyScalar(0.5); const dir = mid.clone().sub(P).normalize(); const pt = P.clone().addScaledVector(dir, bisectorOffset); shrunken[`${f}_${cornerIdx}`] = pt; } } const positions = []; const normals = []; const pushTri = (p1, p2, p3, n1, n2, n3) => { positions.push(p1.x, p1.y, p1.z, p2.x, p2.y, p2.z, p3.x, p3.y, p3.z); normals.push(n1.x, n1.y, n1.z, n2.x, n2.y, n2.z, n3.x, n3.y, n3.z); }; // --- Main faces --- for (let f = 0; f < 4; f++) { const [i0, i1, i2] = FACES[f]; const p0 = shrunken[`${f}_${i0}`]; const p1 = shrunken[`${f}_${i1}`]; const p2 = shrunken[`${f}_${i2}`]; const n = faceNormal[f]; pushTri(p0, p1, p2, n, n, n); } // --- Edge bevels --- const EDGES = [[0, 1], [0, 2], [0, 3], [1, 2], [1, 3], [2, 3]]; const centroid = new THREE.Vector3(); for (const [a, b] of EDGES) { const adjFaces = []; for (let f = 0; f < 4; f++) { if (FACES[f].includes(a) && FACES[f].includes(b)) adjFaces.push(f); } const [F1, F2] = adjFaces; const p_F1a = shrunken[`${F1}_${a}`]; const p_F1b = shrunken[`${F1}_${b}`]; const p_F2a = shrunken[`${F2}_${a}`]; const p_F2b = shrunken[`${F2}_${b}`]; const n1 = faceNormal[F1]; const n2 = faceNormal[F2]; const testN = new THREE.Vector3().subVectors(p_F1b, p_F1a) .cross(new THREE.Vector3().subVectors(p_F2b, p_F1a)); const edgeMid = verts[a].clone().add(verts[b]).multiplyScalar(0.5); const outward = edgeMid.sub(centroid); if (testN.dot(outward) > 0) { pushTri(p_F1a, p_F1b, p_F2b, n1, n1, n2); pushTri(p_F1a, p_F2b, p_F2a, n1, n2, n2); } else { pushTri(p_F1a, p_F2b, p_F1b, n1, n2, n1); pushTri(p_F1a, p_F2a, p_F2b, n1, n2, n2); } } // --- Corner facets --- for (let v = 0; v < 4; v++) { const adjFaces = []; for (let f = 0; f < 4; f++) { if (FACES[f].includes(v)) adjFaces.push(f); } const p0 = shrunken[`${adjFaces[0]}_${v}`]; const p1 = shrunken[`${adjFaces[1]}_${v}`]; const p2 = shrunken[`${adjFaces[2]}_${v}`]; const n = new THREE.Vector3().subVectors(p1, p0) .cross(new THREE.Vector3().subVectors(p2, p0)).normalize(); const outward = verts[v].clone().sub(centroid); if (n.dot(outward) < 0) { n.negate(); pushTri(p0, p2, p1, n, n, n); } else { pushTri(p0, p1, p2, n, n, n); } } const geom = new THREE.BufferGeometry(); geom.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3)); geom.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3)); const inwardPull = bisectorOffset * (2 * Math.sqrt(2) / 3); const sizeBoost = 1 / (1 - inwardPull); return { geometry: geom, sizeBoost }; }33:Tf95,makeBranchGeometry = function makeBranchGeometry(r, H, rBottom, rTop, withDome) { const N_SEG = 14; // Branch axis: from origin (base) to tip at (r, H, 0). Length = branchLen. // We build the cylinder rings perpendicular to this axis (a true tapered // cylinder), then add a hemisphere dome at the tip whose flat side sits // perpendicular to the axis. The base of the cylinder is left open -- // the parent branch's tip dome (or the apex hemisphere cap on the trunk) // is what visually "closes" it. const branchLen = Math.sqrt(r * r + H * H); // Unit vector along the axis. const ax = r / branchLen; const ay = H / branchLen; // Perpendicular basis for the ring plane: // perp1 lies in the XY plane (rotate axis 90 degrees): (-ay, ax, 0) // perp2 is the world -Z axis: (0, 0, -1). Negating Z (vs the natural (0,0,1)) // reverses ring traversal direction so rings wind CCW when viewed from // outside the surface, which matches the standard outward-normal winding // used by both the cylinder side wall and the dome. const p1x = -ay, p1y = ax, p1z = 0; const p2x = 0, p2y = 0, p2z = -1; const positions = []; const indices = []; // Ring at parametric distance s along the axis (s=0 at base, s=branchLen at tip), // with radius rad, written into the positions buffer. function pushRing(s, rad) { const cx = ax * s; const cy = ay * s; const cz = 0; for (let i = 0; i < N_SEG; i++) { const phi = (i / N_SEG) * Math.PI * 2; const c = Math.cos(phi); const s2 = Math.sin(phi); positions.push( cx + rad * (c * p1x + s2 * p2x), cy + rad * (c * p1y + s2 * p2y), cz + rad * (c * p1z + s2 * p2z), ); } } // -------- Tapered cylinder side wall -------- const bottomRingStart = positions.length / 3; pushRing(0, rBottom); const topRingStart = positions.length / 3; pushRing(branchLen, rTop); for (let i = 0; i < N_SEG; i++) { const i1 = (i + 1) % N_SEG; const b0 = bottomRingStart + i, b1 = bottomRingStart + i1; const t0 = topRingStart + i, t1 = topRingStart + i1; indices.push(b0, t0, t1); indices.push(b0, t1, b1); } // -------- Hemisphere cap at the tip, oriented along the branch axis -------- // Only applied when withDome=true (i.e. the leaf-level branches at the very // tips of the tree). Intermediate branches stay as open-ended hollow cylinders // -- the children that emerge from each tip visually fill the opening. if (withDome) { const N_LAT = 12; const ringStartIdx = []; // Smoothness trick: lat=0 (the dome equator) reuses the cylinder's top ring // vertices. computeVertexNormals will then average the side-wall and dome // normals at those shared vertices, eliminating the visible seam between // the cylinder tip and the dome. ringStartIdx.push(topRingStart); for (let lat = 1; lat <= N_LAT; lat++) { const t = lat / N_LAT; const lambda = t * Math.PI / 2; const s_lat = branchLen + rTop * Math.sin(lambda); const ringR = rTop * Math.cos(lambda); ringStartIdx.push(positions.length / 3); if (lat < N_LAT) { pushRing(s_lat, ringR); } else { positions.push(ax * s_lat, ay * s_lat, 0); } } for (let lat = 0; lat < N_LAT; lat++) { const r0 = ringStartIdx[lat]; const r1 = ringStartIdx[lat + 1]; if (lat < N_LAT - 1) { for (let i = 0; i < N_SEG; i++) { const i1 = (i + 1) % N_SEG; indices.push(r0 + i, r1 + i, r1 + i1); indices.push(r0 + i, r1 + i1, r0 + i1); } } else { for (let i = 0; i < N_SEG; i++) { const i1 = (i + 1) % N_SEG; indices.push(r0 + i, r1, r0 + i1); } } } } const geom = new THREE.BufferGeometry(); geom.setAttribute('position', new THREE.Float32BufferAttribute(positions, 3)); geom.setIndex(indices); geom.computeVertexNormals(); return geom; }34:[{"id":"e4a83ce1f4748630c994e7ea95709af7a404d245a35efc3932857396cc2850d906d1e702a3dd4280bf120156b1eea133db532a3029dbdf88e90a80d2414fe4e6","href":"https://static.observableusercontent.com/files/e4a83ce1f4748630c994e7ea95709af7a404d245a35efc3932857396cc2850d906d1e702a3dd4280bf120156b1eea133db532a3029dbdf88e90a80d2414fe4e6","name":"image@3.png","type":"image/png","lastModified":1779222735670.909,"size":973924},{"id":"1005ce5fd1123341aed0345067753375e40f10e0cc7771b3505022e4cb019f869f048f2d9e807b1ae801b26ad70273b506f3897005fcf4e1ab7d5881ee53f089","href":"https://static.observableusercontent.com/files/1005ce5fd1123341aed0345067753375e40f10e0cc7771b3505022e4cb019f869f048f2d9e807b1ae801b26ad70273b506f3897005fcf4e1ab7d5881ee53f089","name":"image@2.png","type":"image/png","lastModified":1779220616031.145,"size":2132894},{"id":"9164f80c247fbdd42a2440dea5f92479b8707ec1b31790a5cdea41d6e2c313f6c1aabecf35df9c88481e2e65ab982bd2596bdef959534d430777e74d24f7ed00","href":"https://static.observableusercontent.com/files/9164f80c247fbdd42a2440dea5f92479b8707ec1b31790a5cdea41d6e2c313f6c1aabecf35df9c88481e2e65ab982bd2596bdef959534d430777e74d24f7ed00","name":"image@4.png","type":"image/png","lastModified":1779223540784.342,"size":1739923}] 2f:{"id":"1f1e526de8158cce","slug":null,"title":"Fractal Merkabah","thumbnail":"4bb5201c420ca865dad93e9530bf0631bcd71786e92c32ef7314ed13e6314193","access_level":"public","create_time":"$D2026-05-19T05:42:33.768Z","update_time":"$D2026-09-10T20:41:30.045Z","view_time":null,"first_public_time":"$D2026-05-19T06:02:32.639Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":180,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null}],"members":[{"type":"individual","id":"5da1d0646b8496ac","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/9c14da488e1a68ca1868ed025eb7edcce3d300c8a9f3fbcdae66a3daa9ccca63","tier":null,"role":"editor"},{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Fractal Merkabah","cells":[{"id":0,"value":"# Fractal Merkabah\n## Duality between how mountains and trees symbolize unity and diversity","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"As you climb a mountain, the many starting points converge to higher and higher peaks. As a tree grows, the trunk branches into a wider canopy. These embody two opposite types of hierarchical relationship between the one and the many.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"I was inspired by this painting of Yggdrasil by Oluf Olufsen Bagge, which has many symbols of the relationships between the one and many.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":132,"value":"![image@2.png](${await FileAttachment(\"image@2.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"I am also a huge fan of Jonathan Blow's indie game, [The Witness](https://store.steampowered.com/app/210970/The_Witness/), where you travel around a Myst like island, solving puzzles by learning a symbolic language. At the end of the orchard section, there is a work bench with medical drawings with images of the circulatory and nervous system, which is a branch like arterial diverge to individual capillaries, and then a veinic converge back towards the heart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":150,"value":"![image@4.png](${await FileAttachment(\"image@4.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"THREE = {\n const THREE = await import(\"https://esm.sh/three@0.160.0\");\n const { OrbitControls } = await import(\"https://esm.sh/three@0.160.0/examples/jsm/controls/OrbitControls.js\");\n const { Sky } = await import(\"https://esm.sh/three@0.160.0/examples/jsm/objects/Sky.js\");\n const { RectAreaLightUniformsLib } = await import(\"https://esm.sh/three@0.160.0/examples/jsm/lights/RectAreaLightUniformsLib.js\");\n RectAreaLightUniformsLib.init();\n const ns = { ...THREE, OrbitControls, Sky, RectAreaLightUniformsLib };\n window.THREE = ns;\n return ns;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"constants = ({\n TETRA_SIZE: 2.0,\n BEVEL_FRAC: 0.1,\n CLUSTER_ANGLES: [\n Math.PI / 2 + Math.PI / 3,\n Math.PI / 2 + Math.PI / 3 + 2 * Math.PI / 3,\n Math.PI / 2 + Math.PI / 3 + 4 * Math.PI / 3,\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"tintTargets = [\n new THREE.Color(0xff6060), // cluster angle 0 -> red (lightened)\n new THREE.Color(0xfff898), // cluster angle 1 -> yellow (lightened)\n new THREE.Color(0x80f080), // cluster angle 2 -> green (lightened)\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"TINT_STEP = 0.16","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"upwardTetraVertices = function upwardTetraVertices(size, center = new THREE.Vector3(0, 0, 0)) {\n const apex = new THREE.Vector3(0, size, 0);\n const baseY = -size / 3;\n const baseR = size * Math.sqrt(8 / 9);\n const a0 = Math.PI / 2;\n const v1 = new THREE.Vector3(baseR * Math.cos(a0), baseY, baseR * Math.sin(a0));\n const v2 = new THREE.Vector3(baseR * Math.cos(a0 + 2*Math.PI/3), baseY, baseR * Math.sin(a0 + 2*Math.PI/3));\n const v3 = new THREE.Vector3(baseR * Math.cos(a0 + 4*Math.PI/3), baseY, baseR * Math.sin(a0 + 4*Math.PI/3));\n return [apex, v1, v2, v3].map(v => v.clone().add(center));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"collectSierpinski = function collectSierpinski(corners, depth, out) {\n if (depth === 1) {\n const center = new THREE.Vector3()\n .add(corners[0]).add(corners[1]).add(corners[2]).add(corners[3])\n .multiplyScalar(0.25);\n const size = corners[0].distanceTo(center);\n out.push({ center, size });\n return;\n }\n const mid = (p, q) => p.clone().add(q).multiplyScalar(0.5);\n for (let i = 0; i < 4; i++) {\n const others = [0, 1, 2, 3].filter(j => j !== i);\n const sub = [\n corners[i].clone(),\n mid(corners[i], corners[others[0]]),\n mid(corners[i], corners[others[1]]),\n mid(corners[i], corners[others[2]]),\n ];\n collectSierpinski(sub, depth - 1, out);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"collectTree = function collectTree(base, level, N, r_levels, H_levels, perLevelInstances, parentTint) {\n const r = r_levels[level - 1];\n const H = H_levels[level - 1];\n const tips = constants.CLUSTER_ANGLES.map(theta => new THREE.Vector3(\n base.x + r * Math.cos(theta),\n base.y + H,\n base.z + r * Math.sin(theta),\n ));\n const childTints = (level === 1)\n ? [parentTint.clone(), parentTint.clone(), parentTint.clone()]\n : [0, 1, 2].map(i => parentTint.clone().lerp(tintTargets[i], TINT_STEP));\n for (let i = 0; i < 3; i++) {\n perLevelInstances[level - 1].push({\n from: base.clone(),\n theta: constants.CLUSTER_ANGLES[i],\n tint: childTints[i],\n });\n }\n if (level < N) {\n for (let i = 0; i < 3; i++) {\n collectTree(tips[i], level + 1, N, r_levels, H_levels, perLevelInstances, childTints[i]);\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 30:"$2f:body"