29:null 2a:["$","title",null,{"children":"3D Yijing Hexagrams | Lao | Observable"}] 2f:T8bee,kleinFour = { const { dimensionVectors, thicknessHypercube, bgColor, sceneHeight, autoRotate, rotateSpeed, animDurationCube, centeringMaxOffset, reverseCircleColor, isoclineCircleColor, hoverOutlineColor, nodeDimOpacity, edgeBaseOpacity, edgeDimMultiplier, outlineThickness } = config; const { negativeNode, reverseNode, isoclineNode, getHighlightSet, kleinFourSet, easeInOutCubic, plateFade, lookTilt, computeTiltX, makeBtn, makeSelect, addField, makeBarBtn, FONT, HEX_FONT, labelTextFor, makeNameTexture, setOrbitCircle, hideOrbitCircle, setNegLineObj, kleinArrs } = kfHelp; const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); renderer.domElement.style.touchAction = "none"; renderer.domElement.style.display = "block"; const container = document.createElement("div"); container.style.position = "relative"; container.style.width = "100%"; container.style.height = sceneHeight + "px"; const btnBar = document.createElement("div"); btnBar.style.cssText = ` position:absolute; top:12px; left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:10; `; const btnInvert = makeBtn("Negative"); const btnReverse = makeBtn("Reverse"); const btnIsocline = makeBtn("Isocline"); btnBar.append(btnInvert, btnReverse, btnIsocline); container.appendChild(btnBar); container.appendChild(renderer.domElement); const controls = document.createElement("div"); controls.style.cssText = `display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 10px;`; const arrSel = makeSelect( kleinArrs.map(a => `${a[0]}`).join("") + `` ); addField(controls, "arrangements", arrSel); const customOpt = arrSel.options[arrSel.options.length - 1]; const shapeSelect = makeSelect( `` + `` + `` ); addField(controls, "shape", shapeSelect); const labelSelect = makeSelect( `` + `` + `` + `` + `` + `` + `` + `` ); addField(controls, "label", labelSelect); const linesSelect = makeSelect( `` + `` ); addField(controls, "lines", linesSelect); const btnFull = makeBarBtn("Full screen"); btnFull.style.marginLeft = "auto"; controls.appendChild(btnFull); const outer = document.createElement("div"); outer.style.cssText = `width:100%; display:flex; flex-direction:column;`; outer.appendChild(controls); outer.appendChild(container); const scene = new THREE.Scene(); scene.background = new THREE.Color(bgColor); const camera = new THREE.PerspectiveCamera(50, 16 / 9, 0.1, 200); camera.position.set(1, 4, 7); const hemiLight = new THREE.HemisphereLight(0xffffff, 0x080818, 0.8); scene.add(hemiLight); const dirLight = new THREE.DirectionalLight(0xffffff, 0.5); dirLight.position.set(0, 50, 0); scene.add(dirLight); const dimVecs = dimensionVectors.map(v => new THREE.Vector3(v[0], v[1], v[2])); const { KX, KZ } = kfHelp.fitScale(dimVecs); const nodePositions = kfHelp.latticePositions(dimVecs, []); let NODE_X_MIN, NODE_X_MAX, NODE_Z_MIN, NODE_Z_MAX; let LATTICE_RADIUS, maxNodeDist, FRAME_FULL, FRAME_SCALE; const axisY = new THREE.Vector3(0, 1, 0); const axisX = new THREE.Vector3(1, 0, 0); const axisZ = new THREE.Vector3(0, 0, 1); const hypercubeGroup = new THREE.Group(); const nodeMeshes = [], hitSpheres = [], nodeMaterialsCache = []; for (let n = 0; n < 64; n++) { const pleated = buildNode(n, thicknessHypercube); pleated.position.copy(nodePositions[n]); const mats = []; pleated.traverse(ch => { if (ch.isMesh && ch.material) { ch.material.polygonOffset = true; ch.material.polygonOffsetFactor = -1; ch.material.polygonOffsetUnits = -1; if (ch.material.visible !== false) { ch.material.transparent = true; ch.material.opacity = 1.0; ch.material.depthWrite = true; mats.push(ch.material); } } }); nodeMaterialsCache[n] = mats; hypercubeGroup.add(pleated); nodeMeshes[n] = pleated; const hitMesh = new THREE.Mesh( new THREE.SphereGeometry(0.18, 8, 8), new THREE.MeshBasicMaterial({ visible: false }) ); hitMesh.position.copy(nodePositions[n]); hitMesh.userData.nodeIndex = n; hypercubeGroup.add(hitMesh); hitSpheres.push(hitMesh); } const shapes = { circular: { builder: buildDiscNode, nodes: [], outls: [], mats: [], built: false }, chevron: { builder: buildChevronNode, nodes: [], outls: [], mats: [], built: false }, }; const outlineMat = new THREE.MeshBasicMaterial({ color: hoverOutlineColor, side: THREE.BackSide, transparent: true, opacity: 1.0, depthWrite: false, depthTest: true, }); const outlineMeshes = kfHelp.rectOutlines(outlineMat, nodePositions); for (const w of outlineMeshes) hypercubeGroup.add(w); function ensureShapeNodes() { const s = shapes[shapeMode]; if (!s || s.built) return; s.built = true; for (let n = 0; n < 64; n++) { const wrap = s.builder(n, thicknessHypercube); wrap.position.copy(nodePositions[n]); wrap.visible = false; hypercubeGroup.add(wrap); s.nodes[n] = wrap; const mats = []; wrap.traverse(child => { if (child.isMesh && child.material) { child.material.polygonOffset = true; child.material.polygonOffsetFactor = -1; child.material.polygonOffsetUnits = -1; child.material.transparent = true; child.material.opacity = 1.0; child.material.depthWrite = true; mats.push(child.material); } }); s.mats[n] = mats; const oWrap = s.builder.outline( n, thicknessHypercube, outlineThickness, outlineMat); oWrap.position.copy(nodePositions[n]); oWrap.visible = false; hypercubeGroup.add(oWrap); s.outls[n] = oWrap; } requestRender(); } let shapeMode = shapeSelect.value; function activeNodeMeshes() { const s = shapes[shapeMode]; return s ? s.nodes : nodeMeshes; } function activeOutlineMeshes() { const s = shapes[shapeMode]; return s ? s.outls : outlineMeshes; } function activeMatsCache() { const s = shapes[shapeMode]; return s ? s.mats : nodeMaterialsCache; } const texByMode = {}; function getTex(mode, v) { const arr = texByMode[mode] || (texByMode[mode] = []); return arr[v] || (arr[v] = makeNameTexture(labelTextFor(mode, v), mode === "hexagram" ? HEX_FONT : FONT)); } const digitTex = {}; function getDigitTex(ch) { return digitTex[ch] || (digitTex[ch] = makeNameTexture(ch, FONT, ch === "0" ? "#000000" : "#ffffff")); } const plateGeo = new THREE.PlaneGeometry(1, 1); const P = kfHelp.plates(plateGeo, nodePositions, getDigitTex); const { wr: plateWrappers, sets: segSets, tf: topFronts, tb: topBacks, bf: botFronts, bb: botBacks } = P; for (const w of plateWrappers) hypercubeGroup.add(w); let isolatedCenter = -1; let isolatedSet = null; let labelMode = labelSelect.value; const updatePlateLabels = () => kfHelp.plateLabels(labelMode, isolatedSet, shapeMode, P, getTex, getDigitTex); labelSelect.addEventListener("change", () => { labelMode = labelSelect.value; updatePlateLabels(); requestRender(); }); function applyShapeVisibility() { for (let n = 0; n < 64; n++) { nodeMeshes[n].visible = false; outlineMeshes[n].visible = false; for (const key in shapes) if (shapes[key].built) { shapes[key].nodes[n].visible = false; shapes[key].outls[n].visible = false; } } currentOutlineIdx = -1; applyIsolation(isolatedSet); if (isolatedCenter < 0) clearHighlight(true); updatePlateLabels(); requestRender(); } shapeSelect.addEventListener("change", () => { shapeMode = shapeSelect.value; ensureShapeNodes(); applyShapeVisibility(); }); updatePlateLabels(); const edgeLines = kfHelp.buildEdges(nodePositions); for (const l of edgeLines) hypercubeGroup.add(l); scene.add(hypercubeGroup); const setCenteredEdges = () => kfHelp.centerEdges(edgeLines, nodePositions); let linesMode = linesSelect.value; linesSelect.addEventListener("change", () => { linesMode = linesSelect.value; if (linesMode === "centered") setCenteredEdges(); requestRender(); }); const overlayGroup = new THREE.Group(); overlayGroup.renderOrder = 999; hypercubeGroup.add(overlayGroup); const mkCircle = c => kfHelp.makeOrbitCircle(c, overlayGroup); const mkNeg = () => kfHelp.makeNegLine(overlayGroup); const negativeLine = mkNeg(); const reverseCircle = mkCircle(reverseCircleColor); const isoclineCircle = mkCircle(isoclineCircleColor); const setNegLines = [mkNeg(), mkNeg(), mkNeg(), mkNeg()]; const setRevCircles = [mkCircle(reverseCircleColor), mkCircle(reverseCircleColor), mkCircle(reverseCircleColor), mkCircle(reverseCircleColor)]; const setIsoCircles = [mkCircle(isoclineCircleColor), mkCircle(isoclineCircleColor), mkCircle(isoclineCircleColor), mkCircle(isoclineCircleColor)]; function hideSetOverlays() { for (const l of setNegLines) l.visible = false; for (const c of setRevCircles) hideOrbitCircle(c); for (const c of setIsoCircles) hideOrbitCircle(c); } function drawSetOverlays(members) { hideSetOverlays(); negativeLine.visible = false; hideOrbitCircle(reverseCircle); hideOrbitCircle(isoclineCircle); let i = 0; members.forEach(m => { if (i >= 4) return; const posM = nodePositions[m]; const neg = negativeNode(m); if (neg !== m) setNegLineObj(setNegLines[i], posM, nodePositions[neg]); const rev = reverseNode(m); if (rev !== m) setOrbitCircle(setRevCircles[i], posM, axisX); const iso = isoclineNode(m); if (iso !== m) setOrbitCircle(setIsoCircles[i], posM, axisZ); i++; }); } let currentOutlineIdx = -1; function updateOverlays(hoveredIdx) { const outl = activeOutlineMeshes(); if (currentOutlineIdx >= 0) outl[currentOutlineIdx].visible = false; if (hoveredIdx >= 0) outl[hoveredIdx].visible = true; currentOutlineIdx = hoveredIdx; if (hoveredIdx < 0) { negativeLine.visible = false; hideOrbitCircle(reverseCircle); hideOrbitCircle(isoclineCircle); return; } const posH = nodePositions[hoveredIdx]; const negIdx = negativeNode(hoveredIdx); if (negIdx !== hoveredIdx) setNegLineObj(negativeLine, posH, nodePositions[negIdx]); else negativeLine.visible = false; const revIdx = reverseNode(hoveredIdx); if (revIdx !== hoveredIdx) setOrbitCircle(reverseCircle, posH, axisX); else hideOrbitCircle(reverseCircle); const isoIdx = isoclineNode(hoveredIdx); if (isoIdx !== hoveredIdx) setOrbitCircle(isoclineCircle, posH, axisZ); else hideOrbitCircle(isoclineCircle); } let highlightedSet = null; let hoveredNodeIndex = -1; let lockedHighlight = null; let unselectedOpacity = 1.0; let lastActiveSet = null; let lastActiveCenter = -1; function applyHighlight(activeSet) { } const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function updateMouseFromEvent(e) { const rect = renderer.domElement.getBoundingClientRect(); mouse.x = ((e.clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((e.clientY - rect.top) / rect.height) * 2 + 1; } function raycastNode() { raycaster.setFromCamera(mouse, camera); const hits = raycaster.intersectObjects(hitSpheres); for (const h of hits) { const ni = h.object.userData.nodeIndex; if (!isolatedSet || isolatedSet.has(ni)) return ni; } return -1; } let isDragging = false; let prevMouse = { x: 0, y: 0 }; let panMode = false; let zoomMode = false; let dragN = -1, dragOn = false; let downX = 0, downY = 0; let lastTapTime = 0, lastTapX = 0, lastTapY = 0; let needsRender = true, onScreen = true, pointerInside = false; renderer.domElement.style.cursor = "grab"; function requestRender() { needsRender = true; } renderer.domElement.addEventListener("pointerenter", () => { onScreen = true; pointerInside = true; requestRender(); }); renderer.domElement.addEventListener("pointerleave", () => { pointerInside = false; }); let spherical = { theta: Math.atan2(camera.position.x, camera.position.z), phi: Math.acos(camera.position.y / camera.position.length()), r: camera.position.length() }; const lookAtTarget = new THREE.Vector3(0, 0, 0); const panOffset = new THREE.Vector3(); const panTarget = new THREE.Vector3(); let rTarget = spherical.r; const CAM_EASE_FAST = 0.25, CAM_EASE_SLOW = 0.125; let camEase = CAM_EASE_FAST; let firstTapNode = -1; const ZOOM_MIN = 1, ZOOM_MAX = 80; const WHEEL_GAIN = 0.0008; const DRAG_ZOOM_GAIN = 0.004; const clampZoom = z => Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, z)); const START_DIST = spherical.r; const FOCUS_DIST = clampZoom(spherical.r * 0.3); function isolateDist(node) { if (node < 0 || maxNodeDist <= 0) return START_DIST; const t = Math.min(1, nodePositions[node].length() / maxNodeDist); return clampZoom(FOCUS_DIST + t * (START_DIST - FOCUS_DIST)); } let framingAmt = 1, framingTarget = 1; const HALF_VFOV = camera.fov * Math.PI / 360; const CENTER_AMP = centeringMaxOffset; function fitStats() { NODE_X_MIN = NODE_Z_MIN = Infinity; NODE_X_MAX = NODE_Z_MAX = -Infinity; LATTICE_RADIUS = 0; for (const p of nodePositions) { if (p.x < NODE_X_MIN) NODE_X_MIN = p.x; if (p.x > NODE_X_MAX) NODE_X_MAX = p.x; if (p.z < NODE_Z_MIN) NODE_Z_MIN = p.z; if (p.z > NODE_Z_MAX) NODE_Z_MAX = p.z; LATTICE_RADIUS = Math.max(LATTICE_RADIUS, p.length()); } maxNodeDist = LATTICE_RADIUS; FRAME_FULL = Math.max(START_DIST, LATTICE_RADIUS / Math.tan(HALF_VFOV)); FRAME_SCALE = FRAME_FULL / 3; } fitStats(); function updateCamera() { const r = spherical.r, theta = spherical.theta, phi = spherical.phi; const sp = Math.sin(phi), cp = Math.cos(phi); camera.position.set( panOffset.x + r * sp * Math.sin(theta), panOffset.y + r * cp, panOffset.z + r * sp * Math.cos(theta) ); const el = Math.PI / 2 - phi; const zoomFade = 1 - Math.exp(-r / FRAME_SCALE); const dy = -CENTER_AMP * Math.sin(2 * el) * framingAmt * zoomFade; lookAtTarget.set(panOffset.x, panOffset.y + dy, panOffset.z); camera.up.set(0, 1, 0); camera.lookAt(lookAtTarget); requestRender(); } const _mdDir = new THREE.Vector3(), _mdT = new THREE.Vector3(), _mdD = new THREE.Vector3(); function matchDefaultToNormal() { const C = camera.position, L = lookAtTarget; _mdDir.copy(L).sub(C); let hx, hz; const t = Math.abs(_mdDir.y) > 1e-6 ? -C.y / _mdDir.y : -1; if (t > 0) { hx = C.x + t * _mdDir.x; hz = C.z + t * _mdDir.z; } else { hx = L.x; hz = L.z; } hx = Math.max(NODE_X_MIN, Math.min(NODE_X_MAX, hx)); hz = Math.max(NODE_Z_MIN, Math.min(NODE_Z_MAX, hz)); _mdT.set(hx, 0, hz); _mdD.copy(C).sub(_mdT); const r = _mdD.length() || spherical.r; spherical.r = r; rTarget = r; spherical.phi = Math.acos(Math.max(-1, Math.min(1, _mdD.y / r))); spherical.theta = Math.atan2(_mdD.x, _mdD.z); panOffset.copy(_mdT); panTarget.copy(_mdT); framingAmt = 0; framingTarget = 0; } const _pr = new THREE.Vector3(), _pf = new THREE.Vector3(); function pan2D(dxPixels, dyPixels) { if (framingTarget === 1) matchDefaultToNormal(); const wpp = 2 * spherical.r * Math.tan(HALF_VFOV) / Math.max(1, renderer.domElement.clientHeight); _pr.set(Math.cos(spherical.theta), 0, -Math.sin(spherical.theta)); _pf.set(-Math.sin(spherical.theta), 0, -Math.cos(spherical.theta)); panOffset.addScaledVector(_pr, -dxPixels * wpp).addScaledVector(_pf, dyPixels * wpp); panTarget.copy(panOffset); framingTarget = 0; updateCamera(); } function centerOnNode(idx) { if (idx >= 0) { hypercubeGroup.updateMatrixWorld(); panTarget.copy(nodePositions[idx]).applyMatrix4(hypercubeGroup.matrixWorld); rTarget = FOCUS_DIST; framingTarget = 0; } else { panTarget.set(0, 0, 0); rTarget = isolatedCenter >= 0 ? isolateDist(isolatedCenter) : START_DIST; framingTarget = isolatedCenter >= 0 ? 0 : 1; } camEase = CAM_EASE_SLOW; requestRender(); } updateCamera(); function layoutAll() { kfHelp.latticePositions(dimVecs, nodePositions); for (let n = 0; n < 64; n++) { const p = nodePositions[n]; nodeMeshes[n].position.copy(p); hitSpheres[n].position.copy(p); outlineMeshes[n].position.copy(p); plateWrappers[n].position.copy(p); for (const k in shapes) if (shapes[k].built) { shapes[k].nodes[n].position.copy(p); shapes[k].outls[n].position.copy(p); } } fitStats(); if (linesMode === "centered") setCenteredEdges(); if (isolatedCenter >= 0) { updateOverlays(isolatedCenter); drawSetOverlays(isolatedSet); } else if (hoveredNodeIndex >= 0) updateOverlays(hoveredNodeIndex); requestRender(); } const DIM_DUR = 1; let customDims = null; const dimAnims = [], dimBase = [], dimPend = []; function startDimAnim(tgt) { if (!dimAnims.length) for (let b = 0; b < 6; b++) { dimBase[b] = (dimBase[b] || new THREE.Vector3()).copy(dimVecs[b]); dimPend[b] = (dimPend[b] || new THREE.Vector3()).copy(dimVecs[b]); } const d = []; for (let b = 0; b < 6; b++) { d[b] = tgt[b].clone().sub(dimPend[b]); dimPend[b].copy(tgt[b]); } dimAnims.push({ d, el: 0 }); requestRender(); } arrSel.addEventListener("change", () => { const tgt = arrSel.value === "custom" ? customDims : kfHelp.arrDims(arrSel.value, KX, KZ); if (tgt) startDimAnim(tgt); }); const _dO = new THREE.Vector3(), _dD = new THREE.Vector3(); function dragTile() { dimAnims.length = 0; raycaster.setFromCamera(mouse, camera); hypercubeGroup.updateMatrixWorld(); invGroupMat.getInverse(hypercubeGroup.matrixWorld); _dO.copy(raycaster.ray.origin).applyMatrix4(invGroupMat); _dD.copy(raycaster.ray.direction).transformDirection(invGroupMat); if (Math.abs(_dD.y) < 1e-6) return; const t = -_dO.y / _dD.y; if (t <= 0) return; kfHelp.kleinDrag(dragN, dimVecs, nodePositions[dragN], _dO.x + t * _dD.x, _dO.z + t * _dD.z); customOpt.disabled = false; arrSel.value = "custom"; if (!customDims) customDims = dimVecs.map(v => v.clone()); else for (let j = 0; j < 6; j++) customDims[j].copy(dimVecs[j]); layoutAll(); } let mouseOverButtons = false; btnBar.addEventListener("pointerenter", () => { mouseOverButtons = true; if (isolatedCenter < 0) clearHighlight(true); }); btnBar.addEventListener("pointerleave", () => { mouseOverButtons = false; }); function clearHighlight(instant) { hoveredNodeIndex = -1; highlightedSet = null; applyHighlight(null); updateOverlays(-1); hideSetOverlays(); if (instant) { lastActiveSet = null; lastActiveCenter = -1; for (const cache of [nodeMaterialsCache, shapes.circular.mats, shapes.chevron.mats]) { for (let n = 0; n < cache.length; n++) { if (!cache[n]) continue; for (const mat of cache[n]) { mat.opacity = 1.0; mat.depthWrite = true; } } } for (let i = 0; i < edgeLines.length; i++) edgeLines[i].material.opacity = edgeBaseOpacity; } requestRender(); } function highlightSuppressed() { return mouseOverButtons || activeAnimations.length > 0; } function applyIsolation(prevSet) { const iso = isolatedCenter >= 0; const nodes = activeNodeMeshes(), outl = activeOutlineMeshes(); for (let n = 0; n < 64; n++) { const vis = !iso || isolatedSet.has(n); nodes[n].visible = vis; if (!vis) outl[n].visible = false; } for (let i = 0; i < edgeLines.length; i++) edgeLines[i].visible = !iso; updatePlateLabels(); if (iso) { hoveredNodeIndex = isolatedCenter; highlightedSet = new Set(isolatedSet); updateOverlays(isolatedCenter); drawSetOverlays(isolatedSet); } else { hoveredNodeIndex = -1; highlightedSet = null; lockedHighlight = null; updateOverlays(-1); hideSetOverlays(); if (prevSet) lastActiveSet = new Set(prevSet); } requestRender(); } function setIsolation(center) { const prevSet = isolatedSet; isolatedCenter = center; isolatedSet = center >= 0 ? kleinFourSet(center) : null; applyIsolation(prevSet); } function toggleIsolation(node) { if (isolatedCenter >= 0) { if (node >= 0) { setIsolation(node); panTarget.set(0, 0, 0); rTarget = isolateDist(node); framingTarget = 0; camEase = CAM_EASE_SLOW; } else { setIsolation(-1); panTarget.set(0, 0, 0); rTarget = START_DIST; framingTarget = 1; camEase = CAM_EASE_FAST; } return; } if (node >= 0) { setIsolation(node); panTarget.set(0, 0, 0); rTarget = isolateDist(node); framingTarget = 0; camEase = CAM_EASE_SLOW; } } renderer.domElement.addEventListener("contextmenu", e => e.preventDefault()); renderer.domElement.addEventListener("pointerdown", e => { onScreen = true; e.preventDefault(); renderer.domElement.setPointerCapture(e.pointerId); panTarget.copy(panOffset); const modifierClick = e.ctrlKey || e.metaKey; panMode = (e.button === 2) && !modifierClick; zoomMode = (e.button === 1) && !modifierClick; updateMouseFromEvent(e); dragN = (e.button === 0 && !modifierClick && activeAnimations.length === 0) ? raycastNode() : -1; dragOn = false; renderer.domElement.style.cursor = zoomMode ? "ns-resize" : panMode ? "all-scroll" : "grabbing"; downX = e.clientX; downY = e.clientY; isDragging = true; prevMouse = { x: e.clientX, y: e.clientY }; lockedHighlight = highlightedSet ? new Set(highlightedSet) : new Set(); requestRender(); }); renderer.domElement.addEventListener("pointerup", e => { renderer.domElement.releasePointerCapture(e.pointerId); const wasPan = panMode || zoomMode; const moved = Math.hypot(e.clientX - downX, e.clientY - downY); isDragging = false; panMode = false; zoomMode = false; lockedHighlight = null; dragN = -1; dragOn = false; renderer.domElement.style.cursor = "grab"; if (wasPan) { requestRender(); return; } if (moved < 6) { updateMouseFromEvent(e); const tapNode = raycastNode(); if (e.ctrlKey || e.metaKey) { lastTapTime = 0; toggleIsolation(tapNode); requestRender(); return; } const now = performance.now(); const isDouble = (now - lastTapTime < 350) && Math.hypot(e.clientX - lastTapX, e.clientY - lastTapY) < 18; if (isDouble) { lastTapTime = 0; toggleIsolation(firstTapNode); requestRender(); return; } lastTapTime = now; lastTapX = e.clientX; lastTapY = e.clientY; firstTapNode = tapNode; centerOnNode(tapNode); } if (isolatedCenter >= 0) { requestRender(); return; } if (highlightSuppressed()) { clearHighlight(true); return; } const idx = raycastNode(); hoveredNodeIndex = idx; highlightedSet = idx >= 0 ? getHighlightSet(idx) : null; applyHighlight(highlightedSet); updateOverlays(hoveredNodeIndex); requestRender(); }); renderer.domElement.addEventListener("pointercancel", e => { renderer.domElement.releasePointerCapture(e.pointerId); isDragging = false; panMode = false; zoomMode = false; lockedHighlight = null; dragN = -1; dragOn = false; renderer.domElement.style.cursor = "grab"; }); renderer.domElement.addEventListener("pointermove", e => { updateMouseFromEvent(e); if (isDragging) { const dx = e.clientX - prevMouse.x, dy = e.clientY - prevMouse.y; prevMouse = { x: e.clientX, y: e.clientY }; if (dragN >= 0) { if (dragOn || Math.hypot(e.clientX - downX, e.clientY - downY) >= 6) { dragOn = true; dragTile(); } } else if (zoomMode) { rTarget = clampZoom(rTarget * Math.exp(dy * DRAG_ZOOM_GAIN)); camEase = CAM_EASE_FAST; requestRender(); } else if (panMode) { pan2D(dx, dy); } else { spherical.theta -= dx * 0.005; spherical.phi = Math.max(0.1, Math.min(Math.PI - 0.1, spherical.phi - dy * 0.005)); updateCamera(); if (lockedHighlight !== null) applyHighlight(lockedHighlight.size > 0 ? lockedHighlight : null); } } else if (highlightSuppressed()) { if (isolatedCenter < 0 && hoveredNodeIndex >= 0) clearHighlight(true); } else { const idx = raycastNode(); renderer.domElement.style.cursor = idx >= 0 ? "pointer" : "grab"; if (isolatedCenter < 0 && idx !== hoveredNodeIndex) { hoveredNodeIndex = idx; highlightedSet = idx >= 0 ? getHighlightSet(idx) : null; applyHighlight(highlightedSet); updateOverlays(hoveredNodeIndex); requestRender(); } } }); renderer.domElement.addEventListener("wheel", e => { e.preventDefault(); rTarget = clampZoom(rTarget * Math.exp(e.deltaY * WHEEL_GAIN)); camEase = CAM_EASE_FAST; requestRender(); }, { passive: false }); let pinchStartDist = 0, pinchStartR = 0, isPinching = false, pinchMidX0 = 0, pinchMidY0 = 0; renderer.domElement.addEventListener("touchstart", e => { if (e.touches.length === 2) { e.preventDefault(); isPinching = true; isDragging = false; dragN = -1; panTarget.copy(panOffset); const dx = e.touches[0].clientX - e.touches[1].clientX; const dy = e.touches[0].clientY - e.touches[1].clientY; pinchStartDist = Math.sqrt(dx * dx + dy * dy); pinchStartR = rTarget; pinchMidX0 = (e.touches[0].clientX + e.touches[1].clientX) / 2; pinchMidY0 = (e.touches[0].clientY + e.touches[1].clientY) / 2; } }, { passive: false }); renderer.domElement.addEventListener("touchmove", e => { if (e.touches.length === 2 && isPinching) { e.preventDefault(); const dx = e.touches[0].clientX - e.touches[1].clientX; const dy = e.touches[0].clientY - e.touches[1].clientY; const dist = Math.sqrt(dx * dx + dy * dy); if (pinchStartDist > 0) { rTarget = clampZoom(pinchStartR * (pinchStartDist / dist)); camEase = CAM_EASE_FAST; requestRender(); } const midX = (e.touches[0].clientX + e.touches[1].clientX) / 2; const midY = (e.touches[0].clientY + e.touches[1].clientY) / 2; pan2D(midX - pinchMidX0, midY - pinchMidY0); pinchMidX0 = midX; pinchMidY0 = midY; } }, { passive: false }); renderer.domElement.addEventListener("touchend", e => { if (e.touches.length < 2) isPinching = false; }, { passive: true }); const activeAnimations = []; const baseQuaternion = new THREE.Quaternion(); const prevGroupQuat = new THREE.Quaternion(); const _flipDelta = new THREE.Quaternion(), _invPrev = new THREE.Quaternion(); function startRotation(axis) { const dur = isolatedCenter >= 0 ? animDurationCube / 3 : animDurationCube; activeAnimations.push({ axis: axis.clone(), elapsed: 0, duration: dur }); if (isolatedCenter < 0) clearHighlight(true); } btnInvert.addEventListener("click", () => startRotation(axisY)); btnReverse.addEventListener("click", () => startRotation(axisX)); btnIsocline.addEventListener("click", () => startRotation(axisZ)); const invGroupMat = new THREE.Matrix4(); const camLocal = new THREE.Vector3(); const panLocal = new THREE.Vector3(); const _viewBack = new THREE.Vector3(), _camUp = new THREE.Vector3(), _keyDir = new THREE.Vector3(); const WORLD_X = new THREE.Vector3(1, 0, 0); const _lightQuat = new THREE.Quaternion(); const _plateUp = new THREE.Vector3(); const _tiltQ = new THREE.Quaternion(); let lastTime = performance.now(); let disposed = false; function animate(now) { if (disposed) return; requestAnimationFrame(animate); const dt = (now - lastTime) / 1000; lastTime = now; if (!onScreen || document.hidden) return; if (autoRotate) { spherical.theta += rotateSpeed * dt; updateCamera(); } if (activeAnimations.length > 0) { for (let i = activeAnimations.length - 1; i >= 0; i--) { const anim = activeAnimations[i]; anim.elapsed += dt; if (anim.elapsed >= anim.duration) { baseQuaternion.premultiply(new THREE.Quaternion().setFromAxisAngle(anim.axis, Math.PI)); activeAnimations.splice(i, 1); } } const result = baseQuaternion.clone(); for (const anim of activeAnimations) { result.premultiply(new THREE.Quaternion().setFromAxisAngle(anim.axis, Math.PI * easeInOutCubic(Math.min(anim.elapsed / anim.duration, 1)))); } hypercubeGroup.quaternion.copy(result); _invPrev.copy(prevGroupQuat).inverse(); _flipDelta.copy(result).multiply(_invPrev); panOffset.applyQuaternion(_flipDelta); panTarget.applyQuaternion(_flipDelta); prevGroupQuat.copy(result); updateCamera(); needsRender = true; } if (dimAnims.length) { for (let i = dimAnims.length - 1; i >= 0; i--) { const a = dimAnims[i]; a.el += dt; if (a.el >= DIM_DUR) { for (let b = 0; b < 6; b++) dimBase[b].add(a.d[b]); dimAnims.splice(i, 1); } } for (let b = 0; b < 6; b++) dimVecs[b].copy(dimBase[b]); for (const a of dimAnims) { const p = easeInOutCubic(Math.min(a.el / DIM_DUR, 1)); for (let b = 0; b < 6; b++) dimVecs[b].addScaledVector(a.d[b], p); } layoutAll(); } const activeSet = lockedHighlight !== null ? (lockedHighlight.size > 0 ? lockedHighlight : null) : highlightedSet; const dimTarget = activeSet !== null ? 0 : 1; if (unselectedOpacity !== dimTarget) needsRender = true; if (!panOffset.equals(panTarget)) { panOffset.lerp(panTarget, camEase); if (panOffset.distanceTo(panTarget) < 1e-4) panOffset.copy(panTarget); updateCamera(); needsRender = true; } if (spherical.r !== rTarget) { spherical.r += (rTarget - spherical.r) * camEase; if (Math.abs(rTarget - spherical.r) < 1e-4) spherical.r = rTarget; updateCamera(); needsRender = true; } if (framingAmt !== framingTarget) { framingAmt += (framingTarget - framingAmt) * camEase; if (Math.abs(framingTarget - framingAmt) < 1e-4) framingAmt = framingTarget; updateCamera(); needsRender = true; } if (!needsRender && !pointerInside) return; needsRender = false; hypercubeGroup.updateMatrixWorld(); invGroupMat.getInverse(hypercubeGroup.matrixWorld); camLocal.copy(camera.position).applyMatrix4(invGroupMat); panLocal.copy(panOffset).applyMatrix4(invGroupMat); const centralTiltX = computeTiltX(camLocal, panLocal); if (linesMode === "panels") kfHelp.panelEdges(centralTiltX, shapes[shapeMode] ? shapeMode : null, edgeLines, nodePositions, P); const nodesArr = activeNodeMeshes(), outlArr = activeOutlineMeshes(); for (let n = 0; n < 64; n++) { nodesArr[n].rotation.set(centralTiltX, 0, 0); outlArr[n].rotation.set(centralTiltX, 0, 0); plateWrappers[n].rotation.set(centralTiltX, 0, 0); } let plateOpTop = 0, plateOpBot = 0; if (labelMode !== "none") { _plateUp.set(0, 1, 0) .applyQuaternion(_tiltQ.setFromAxisAngle(axisX, centralTiltX)) .applyQuaternion(hypercubeGroup.quaternion) .normalize(); const c = _plateUp.y; plateOpTop = plateFade(c); plateOpBot = plateFade(-c); } { _viewBack.subVectors(camera.position, panOffset); const wlen = _viewBack.length() || 1; const lt = lookTilt(_viewBack.y / wlen, _viewBack.z / wlen); _lightQuat.setFromAxisAngle(WORLD_X, lt); dirLight.position.copy(_keyDir.set(0, 50, 0).applyQuaternion(_lightQuat)); hemiLight.position.copy(_camUp.set(0, 1, 0).applyQuaternion(_lightQuat)); } { if (activeSet !== null) { lastActiveSet = activeSet; lastActiveCenter = hoveredNodeIndex; } else if (unselectedOpacity >= 1) { lastActiveSet = null; lastActiveCenter = -1; } if (activeSet !== null) unselectedOpacity = Math.max(0, unselectedOpacity - 0.01); else unselectedOpacity = Math.min(1, unselectedOpacity + 0.01); const easedDim = easeInOutCubic(unselectedOpacity); const dimOpacity = nodeDimOpacity + easedDim * (1.0 - nodeDimOpacity); const dimEdge = edgeBaseOpacity * edgeDimMultiplier + easedDim * edgeBaseOpacity * (1.0 - edgeDimMultiplier); const matsArr = activeMatsCache(); for (let n = 0; n < 64; n++) { const op = (lastActiveSet !== null && lastActiveSet.has(n)) ? 1.0 : dimOpacity; for (const mat of matsArr[n]) mat.opacity = op; if (labelMode === "binary" || labelMode === "namebin") { const st = segSets[n]; for (let i = 0; i < 6; i++) { st.id[i].material.opacity = plateOpTop * op; st.neg[i].material.opacity = plateOpTop * op; st.rev[i].material.opacity = plateOpBot * op; st.iso[i].material.opacity = plateOpBot * op; } } if (labelMode !== "none" && labelMode !== "binary") { topFronts[n].material.opacity = plateOpTop * op; topBacks[n].material.opacity = plateOpTop * op; botFronts[n].material.opacity = plateOpBot * op; botBacks[n].material.opacity = plateOpBot * op; } } for (let i = 0; i < edgeLines.length; i++) { const line = edgeLines[i]; const a = line.userData.nodeA, b = line.userData.nodeB; const isCenterEdge = lastActiveCenter >= 0 && (a === lastActiveCenter || b === lastActiveCenter); line.material.opacity = isCenterEdge ? edgeBaseOpacity : dimEdge; } } renderer.render(scene, camera); } ensureShapeNodes(); applyShapeVisibility(); animate(performance.now()); const unFS = kfHelp.wireFullscreen({ outer, container, renderer, camera, btnFull, sceneHeight, requestRender }); const io = new IntersectionObserver(es => { onScreen = es[0].isIntersecting; if (onScreen) requestRender(); }, { threshold: 0 }); io.observe(container); const onVisibility = () => { if (!document.hidden) requestRender(); }; document.addEventListener("visibilitychange", onVisibility); invalidation.then(() => { disposed = true; io.disconnect(); document.removeEventListener("visibilitychange", onVisibility); unFS(); plateGeo.dispose(); for (const mode in texByMode) for (const t of texByMode[mode]) if (t) t.tex.dispose(); for (const ch in digitTex) digitTex[ch].tex.dispose(); for (const key in shapes) { if (!shapes[key].built) continue; for (const arr of [shapes[key].nodes, shapes[key].outls]) { for (const w of arr) w.traverse(ch => { if (ch.isMesh) { ch.geometry.dispose(); if (ch.material !== outlineMat) ch.material.dispose(); } }); } } renderer.dispose(); }); return outer; }30:T7ad5,kfHelp = { const { rectWidth, rectHeight, pleatOffset, thicknessHypercube, outlineThickness, nodeRotationX, nodeRotationY, bgColor, circleSegments, tiltConeAngle, edgeColors, edgeBaseOpacity, negativeLineColor } = config; const tiltConeRad = (tiltConeAngle * Math.PI) / 180; const FONT_FAMILY = fonts; // ---- hexagram bit relations ---- function reverseBits6(n) { let r = 0; for (let b = 0; b < 6; b++) r |= ((n >> b) & 1) << (5 - b); return r; } const negativeNode = n => n ^ 63; const reverseNode = n => reverseBits6(n); const isoclineNode = n => reverseBits6(n) ^ 63; function getHighlightSet(n) { const s = new Set([n, negativeNode(n), reverseNode(n), isoclineNode(n)]); for (let d = 0; d < 6; d++) s.add(n ^ (1 << d)); return s; } const kleinFourSet = n => new Set([n, negativeNode(n), reverseNode(n), isoclineNode(n)]); // ---- easing / tilt math ---- function easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; } function smoothstep(e0, e1, x) { const t = Math.max(0, Math.min(1, (x - e0) / (e1 - e0))); return t * t * (3 - 2 * t); } const FADE_LO = Math.PI / 4, FADE_HI = (3 * Math.PI) / 4; function plateFade(c) { return 1 - smoothstep(FADE_LO, FADE_HI, Math.acos(Math.max(-1, Math.min(1, c)))); } function tiltBlend(tz) { const dev = Math.acos(Math.min(1, Math.abs(tz))); if (dev <= tiltConeRad) return 1; if (dev >= Math.PI / 2) return 0; return 1 - (dev - tiltConeRad) / (Math.PI / 2 - tiltConeRad); } function lookTilt(ty, tz) { let la = -Math.atan2(ty, tz); if (la > Math.PI / 2) la -= Math.PI; else if (la <= -Math.PI / 2) la += Math.PI; return tiltBlend(tz) * la; } const _tc = new THREE.Vector3(); function computeTiltX(camLocal, nodePos) { _tc.copy(camLocal).sub(nodePos); const len = _tc.length(); if (len < 1e-6) return 0; _tc.divideScalar(len); if (Math.hypot(_tc.y, _tc.z) < 1e-6) return 0; return lookTilt(_tc.y, _tc.z); } // ---- UI kit ---- const UI_FONT = `500 13px/1.25 system-ui, sans-serif`; const SELECT_CSS = ` padding:7px 20px 7px 8px; font:${UI_FONT}; border:1px solid rgba(0,0,0,0.35); border-radius:4px; background-color:transparent; color:#222; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='10'%20height='6'%3E%3Cpath%20d='M0%200L5%206L10%200Z'%20fill='%23222222'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 7px center; -webkit-appearance:none; -moz-appearance:none; appearance:none; `; const FIELD_CSS = `display:flex; align-items:center; gap:5px; font:${UI_FONT}; color:#222; white-space:nowrap;`; function makeBtn(label) { const b = document.createElement("button"); b.textContent = label; b.style.cssText = ` padding:8px 20px; font:600 13px/1 "${FONT_FAMILY}", monospace; letter-spacing:0.04em; border:1px solid rgba(255,255,255,0.35); border-radius:4px; background:rgba(0,0,0,0.3); color:#e0e0e0; cursor:pointer; backdrop-filter:blur(6px); `; b.onmouseenter = () => { b.style.background = "rgba(0,0,0,0.5)"; }; b.onmouseleave = () => { b.style.background = "rgba(0,0,0,0.3)"; }; return b; } function makeSelect(optionsHTML) { const sel = document.createElement("select"); sel.innerHTML = optionsHTML; sel.style.cssText = SELECT_CSS; sel.onmouseenter = () => { sel.style.backgroundColor = "rgba(0,0,0,0.06)"; }; sel.onmouseleave = () => { sel.style.backgroundColor = "transparent"; }; return sel; } function addField(controls, name, el) { const field = document.createElement("label"); field.style.cssText = FIELD_CSS; field.append(name, el); controls.appendChild(field); return field; } function makeBarBtn(label) { const b = document.createElement("button"); b.textContent = label; b.style.cssText = ` padding:7px 10px; font:${UI_FONT}; border:1px solid rgba(0,0,0,0.35); border-radius:4px; background-color:transparent; color:#222; cursor:pointer; -webkit-appearance:none; -moz-appearance:none; appearance:none; `; b.onmouseenter = () => { b.style.backgroundColor = "rgba(0,0,0,0.06)"; }; b.onmouseleave = () => { b.style.backgroundColor = "transparent"; }; return b; } // ---- label textures ---- const bgCss = `#${bgColor.toString(16).padStart(6, "0")}`; const HEX_BY_FUXI = {}; for (const h of hexagrams) HEX_BY_FUXI[h.fuxi] = h; function labelTextFor(mode, v) { if (mode === "binary") return v.toString(2).padStart(6, "0"); const h = HEX_BY_FUXI[v]; if (!h) return String(v); if (mode === "kingwen") return String(h.kingWen); if (mode === "hexagram") return h.symbol; if (mode === "name") return h.name[0]; if (mode === "numhex") return `${h.kingWen} ${h.symbol}`; return `${h.kingWen}. ${h.name[0]}`; } const LABEL_FONT_PX = 64, STROKE_W = 12, HALO = STROKE_W / 2, MAX_CHARS = 10; const FONT = `600 ${LABEL_FONT_PX}px "${FONT_FAMILY}", monospace`; const HEX_FONT = `600 ${LABEL_FONT_PX}px monospace`; const _mctx = document.createElement("canvas").getContext("2d"); _mctx.font = FONT; const _fm = _mctx.measureText("Mgjpqy"); const FONT_ASCENT = _fm.fontBoundingBoxAscent || LABEL_FONT_PX * 0.80; const FONT_DESCENT = _fm.fontBoundingBoxDescent || LABEL_FONT_PX * 0.25; const ONE_LINE_PX = FONT_ASCENT + FONT_DESCENT + 2 * HALO; const LINE_GAP = HALO; function wrapBalanced(text) { if (text.length <= MAX_CHARS) return [text]; let best = -1, bestDiff = Infinity; for (let i = 0; i < text.length; i++) { if (text[i] !== " ") continue; const diff = Math.abs(i - (text.length - i - 1)); if (diff < bestDiff) { bestDiff = diff; best = i; } } if (best < 0) return [text]; return [text.slice(0, best), text.slice(best + 1)]; } function makeNameTexture(text, font = FONT, fill = "#ffffff") { const lines = wrapBalanced(text); const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); ctx.font = font; let w = 0; const asc = [], desc = []; for (let i = 0; i < lines.length; i++) { const m = ctx.measureText(lines[i]); w = Math.max(w, m.width); asc[i] = m.actualBoundingBoxAscent || FONT_ASCENT; desc[i] = m.actualBoundingBoxDescent || 0; } const baselines = [HALO + FONT_ASCENT]; for (let i = 1; i < lines.length; i++) { baselines[i] = baselines[i - 1] + desc[i - 1] + asc[i] + LINE_GAP; } const lastBase = baselines[lines.length - 1]; const pxW = Math.max(1, Math.ceil(w + HALO * 2)); const pxH = Math.ceil(lastBase + FONT_DESCENT + HALO); canvas.width = pxW; canvas.height = pxH; ctx.font = font; ctx.textAlign = "center"; ctx.textBaseline = "alphabetic"; ctx.lineJoin = "round"; ctx.miterLimit = 2; ctx.lineWidth = STROKE_W; ctx.strokeStyle = bgCss; ctx.fillStyle = fill; const cx = pxW / 2; for (let i = 0; i < lines.length; i++) { ctx.strokeText(lines[i], cx, baselines[i]); ctx.fillText(lines[i], cx, baselines[i]); } const tex = new THREE.CanvasTexture(canvas); tex.minFilter = tex.magFilter = THREE.LinearFilter; tex.generateMipmaps = false; return { tex, aspect: pxW / pxH, pxW, pxH }; } // ---- plates (label planes + binary segment marks per node) ---- const PLATE_BASE = Math.max(rectWidth, 0.4) / 3; const PLATE_H_BY_MODE = { hexagram: PLATE_BASE * 1.6, kingwen: PLATE_BASE * 1.6, binary: PLATE_BASE * 0.95, name: PLATE_BASE * 0.95, numname: PLATE_BASE * 0.95, numhex: PLATE_BASE * 1.15, }; const SEG_LABEL_H = PLATE_BASE * 0.95; const SEG_LABEL_MARGIN = 0; const DISC_R = 3 * rectHeight; function setPlate(mesh, t, ph, side) { mesh.material.map = t.tex; mesh.material.needsUpdate = true; const s = ph / ONE_LINE_PX; const worldH = t.pxH * s, worldW = t.pxW * s; mesh.scale.set(worldW, worldH, 1); const descentOffset = worldH / 2 - HALO * s; mesh.position.y = side > 0 ? descentOffset : -descentOffset; } // returns P = { wr, tg, bg, tf, tb, bf, bb, sg, sets, anc, topZ, botZ } arrays indexed by node function plates(geo, nodePositions, getDigitTex) { const mk = () => { const m = new THREE.Mesh(geo, new THREE.MeshBasicMaterial({ transparent: true, side: THREE.FrontSide, depthWrite: false, opacity: 1, })); m.renderOrder = 1000; return m; }; const s = SEG_LABEL_H / ONE_LINE_PX; const t0 = getDigitTex("0"); const sw = t0.pxW * s, sh = t0.pxH * s; const scx = rectWidth / 2 + SEG_LABEL_MARGIN + sw / 2 - HALO * s; const P = { wr: [], tg: [], bg: [], tf: [], tb: [], bf: [], bb: [], sg: [], sets: [], anc: [], topZ: [], botZ: [] }; for (let n = 0; n < 64; n++) { const dz = b => (((n >> b) & 1) === 1 ? pleatOffset : -pleatOffset); let zc = 0; const cum = [0]; for (let i = 0; i < 6; i++) { zc += dz(i); cum.push(zc); } const cZ = dz(0) + dz(1) + dz(2); const topZ = cum[6] - cZ; const botZ = cum[0] - cZ; P.topZ[n] = topZ; P.botZ[n] = botZ; const wrap = new THREE.Group(); wrap.position.copy(nodePositions[n]); const tg = new THREE.Group(); tg.position.set(0, 3 * rectHeight, topZ); const tf = mk(); const tb = mk(); tb.rotation.y = Math.PI; tg.add(tf, tb); const bg = new THREE.Group(); bg.position.set(0, -3 * rectHeight, botZ); const bf = mk(); bf.rotation.z = Math.PI; const bb = mk(); bb.rotation.x = Math.PI; bg.add(bf, bb); wrap.add(tg, bg); const sg = new THREE.Group(); const gId = new THREE.Group(); const gNeg = new THREE.Group(); gNeg.rotation.y = Math.PI; const gRev = new THREE.Group(); gRev.rotation.x = Math.PI; const gIso = new THREE.Group(); gIso.rotation.z = Math.PI; sg.add(gId, gNeg, gRev, gIso); const mId = [], mNeg = [], mRev = [], mIso = [], anchors = []; for (let i = 0; i < 6; i++) { const segY = (i + 0.5) * rectHeight - 3 * rectHeight; const segZ = (cum[i] + cum[i + 1]) / 2 - cZ; anchors.push({ y: segY, z: segZ }); const a = mk(); a.position.set(scx, segY, segZ); a.scale.set(sw, sh, 1); gId.add(a); mId.push(a); const b = mk(); gNeg.add(b); mNeg.push(b); const c = mk(); gRev.add(c); mRev.push(c); const d = mk(); gIso.add(d); mIso.push(d); } sg.visible = false; wrap.add(sg); wrap.visible = false; P.wr[n] = wrap; P.tg[n] = tg; P.bg[n] = bg; P.tf[n] = tf; P.tb[n] = tb; P.bf[n] = bf; P.bb[n] = bb; P.sg[n] = sg; P.sets[n] = { id: mId, neg: mNeg, rev: mRev, iso: mIso }; P.anc[n] = anchors; } return P; } function plateLabels(mode, isoSet, shapeMode, P, getTex, getDigitTex) { const show = mode !== "none"; const showBinary = mode === "binary" || mode === "namebin"; const plateMode = mode === "namebin" ? "name" : (mode === "binary" ? null : mode); const halfW = shapeMode === "circular" ? DISC_R : rectWidth / 2; for (let n = 0; n < 64; n++) { const vis = show && (!isoSet || isoSet.has(n)); P.wr[n].visible = vis; if (!vis) continue; P.tg[n].visible = plateMode !== null; P.bg[n].visible = plateMode !== null; P.sg[n].visible = showBinary; const m = isoclineNode(n); if (showBinary) { const s = SEG_LABEL_H / ONE_LINE_PX; const vals = { id: m, neg: negativeNode(m), rev: reverseNode(m), iso: isoclineNode(m) }; const sets = P.sets[n]; for (const key in vals) { const bits = vals[key].toString(2).padStart(6, "0"); const arr = sets[key]; for (let i = 0; i < 6; i++) { const t = getDigitTex(bits[i]); const worldH = t.pxH * s, worldW = t.pxW * s; const cx = halfW + SEG_LABEL_MARGIN + worldW / 2 - HALO * s; const yi = P.anc[n][i].y; const zi = P.anc[n][i].z; const zr = P.anc[n][5 - i].z; let pz; if (key === "id") { pz = zi; } else if (key === "neg") { pz = -zi; } else if (key === "rev") { pz = -zr; } else { pz = zr; } const mesh = arr[i]; mesh.material.map = t.tex; mesh.material.needsUpdate = true; mesh.scale.set(worldW, worldH, 1); mesh.position.set(cx, yi, pz); } } } if (plateMode) { const ph = PLATE_H_BY_MODE[plateMode] || PLATE_BASE; setPlate(P.tf[n], getTex(plateMode, m), ph, +1); setPlate(P.tb[n], getTex(plateMode, negativeNode(m)), ph, +1); setPlate(P.bb[n], getTex(plateMode, reverseNode(m)), ph, -1); setPlate(P.bf[n], getTex(plateMode, isoclineNode(m)), ph, -1); } } } // ---- hover outlines for the pleated rectangle nodes ---- function rectOutlines(outlineMat, nodePositions) { const out = []; for (let n = 0; n < 64; n++) { const bits = []; for (let b = 0; b < 6; b++) bits.push((n >> b) & 1); const halfW = rectWidth / 2; const segH = rectHeight; const profile = []; let cy = 0, cz = 0; profile.push({ y: cy, z: cz }); for (let i = 0; i < 6; i++) { const dz = bits[i] === 1 ? pleatOffset : -pleatOffset; cy += segH; cz += dz; profile.push({ y: cy, z: cz }); } let centerZ = 0; for (let i = 0; i < 3; i++) { centerZ += (bits[i] === 1 ? pleatOffset : -pleatOffset); } const centerY = 3 * segH; const halfT = thicknessHypercube > 1 ? (thicknessHypercube * 0.01) / 2 : 0; const outlineInner = new THREE.Group(); const expand = outlineThickness; if (halfT < 0.0001) { const segDirs = []; const segNrms = []; for (let i = 0; i < 6; i++) { const dy = profile[i + 1].y - profile[i].y; const dz = profile[i + 1].z - profile[i].z; const len = Math.sqrt(dy * dy + dz * dz); segDirs.push({ y: dy / len, z: dz / len }); segNrms.push({ y: -dz / len, z: dy / len }); } const vertices = []; const indices = []; for (let i = 0; i < 6; i++) { const y0 = profile[i].y - centerY; const y1 = profile[i + 1].y - centerY; const z0 = profile[i].z - centerZ; const z1 = profile[i + 1].z - centerZ; const nrmY = segNrms[i].y; const nrmZ = segNrms[i].z; const capBottomY = i === 0 ? -segDirs[i].y * expand : 0; const capBottomZ = i === 0 ? -segDirs[i].z * expand : 0; const capTopY = i === 5 ? segDirs[i].y * expand : 0; const capTopZ = i === 5 ? segDirs[i].z * expand : 0; const vi = vertices.length / 3; vertices.push(-halfW - expand, y0 + nrmY * expand + capBottomY, z0 + nrmZ * expand + capBottomZ); vertices.push( halfW + expand, y0 + nrmY * expand + capBottomY, z0 + nrmZ * expand + capBottomZ); vertices.push( halfW + expand, y1 + nrmY * expand + capTopY, z1 + nrmZ * expand + capTopZ); vertices.push(-halfW - expand, y1 + nrmY * expand + capTopY, z1 + nrmZ * expand + capTopZ); indices.push(vi, vi + 1, vi + 2, vi, vi + 2, vi + 3); } for (let i = 0; i < 6; i++) { const y0 = profile[i].y - centerY; const y1 = profile[i + 1].y - centerY; const z0 = profile[i].z - centerZ; const z1 = profile[i + 1].z - centerZ; const nrmY = -segNrms[i].y; const nrmZ = -segNrms[i].z; const capBottomY = i === 0 ? -segDirs[i].y * expand : 0; const capBottomZ = i === 0 ? -segDirs[i].z * expand : 0; const capTopY = i === 5 ? segDirs[i].y * expand : 0; const capTopZ = i === 5 ? segDirs[i].z * expand : 0; const vi = vertices.length / 3; vertices.push(-halfW - expand, y0 + nrmY * expand + capBottomY, z0 + nrmZ * expand + capBottomZ); vertices.push( halfW + expand, y0 + nrmY * expand + capBottomY, z0 + nrmZ * expand + capBottomZ); vertices.push( halfW + expand, y1 + nrmY * expand + capTopY, z1 + nrmZ * expand + capTopZ); vertices.push(-halfW - expand, y1 + nrmY * expand + capTopY, z1 + nrmZ * expand + capTopZ); indices.push(vi, vi + 2, vi + 1, vi, vi + 3, vi + 2); } for (let i = 0; i < 6; i++) { const y0 = profile[i].y - centerY; const y1 = profile[i + 1].y - centerY; const z0 = profile[i].z - centerZ; const z1 = profile[i + 1].z - centerZ; const nrmYF = segNrms[i].y, nrmZF = segNrms[i].z; const nrmYB = -segNrms[i].y, nrmZB = -segNrms[i].z; const capBottomY = i === 0 ? -segDirs[i].y * expand : 0; const capBottomZ = i === 0 ? -segDirs[i].z * expand : 0; const capTopY = i === 5 ? segDirs[i].y * expand : 0; const capTopZ = i === 5 ? segDirs[i].z * expand : 0; const x = -halfW - expand; const vi = vertices.length / 3; vertices.push(x, y0 + nrmYF * expand + capBottomY, z0 + nrmZF * expand + capBottomZ); vertices.push(x, y0 + nrmYB * expand + capBottomY, z0 + nrmZB * expand + capBottomZ); vertices.push(x, y1 + nrmYB * expand + capTopY, z1 + nrmZB * expand + capTopZ); vertices.push(x, y1 + nrmYF * expand + capTopY, z1 + nrmZF * expand + capTopZ); indices.push(vi, vi + 2, vi + 1, vi, vi + 3, vi + 2); } for (let i = 0; i < 6; i++) { const y0 = profile[i].y - centerY; const y1 = profile[i + 1].y - centerY; const z0 = profile[i].z - centerZ; const z1 = profile[i + 1].z - centerZ; const nrmYF = segNrms[i].y, nrmZF = segNrms[i].z; const nrmYB = -segNrms[i].y, nrmZB = -segNrms[i].z; const capBottomY = i === 0 ? -segDirs[i].y * expand : 0; const capBottomZ = i === 0 ? -segDirs[i].z * expand : 0; const capTopY = i === 5 ? segDirs[i].y * expand : 0; const capTopZ = i === 5 ? segDirs[i].z * expand : 0; const x = halfW + expand; const vi = vertices.length / 3; vertices.push(x, y0 + nrmYF * expand + capBottomY, z0 + nrmZF * expand + capBottomZ); vertices.push(x, y0 + nrmYB * expand + capBottomY, z0 + nrmZB * expand + capBottomZ); vertices.push(x, y1 + nrmYB * expand + capTopY, z1 + nrmZB * expand + capTopZ); vertices.push(x, y1 + nrmYF * expand + capTopY, z1 + nrmZF * expand + capTopZ); indices.push(vi, vi + 1, vi + 2, vi, vi + 2, vi + 3); } const geom = new THREE.BufferGeometry(); geom.addAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3)); geom.setIndex(indices); geom.computeVertexNormals(); outlineInner.add(new THREE.Mesh(geom, outlineMat)); } else { const segDirs = []; for (let i = 0; i < 6; i++) { const dy = profile[i + 1].y - profile[i].y; const dz = profile[i + 1].z - profile[i].z; const len = Math.sqrt(dy * dy + dz * dz); segDirs.push({ y: dy / len, z: dz / len }); } const vertices = []; const indices = []; for (let i = 0; i < 6; i++) { const capBottomY = i === 0 ? -segDirs[i].y * expand : 0; const capBottomZ = i === 0 ? -segDirs[i].z * expand : 0; const capTopY = i === 5 ? segDirs[i].y * expand : 0; const capTopZ = i === 5 ? segDirs[i].z * expand : 0; const y0 = profile[i].y - centerY + capBottomY; const y1 = profile[i + 1].y - centerY + capTopY; const z0 = profile[i].z - centerZ + capBottomZ; const z1 = profile[i + 1].z - centerZ + capTopZ; const vi = vertices.length / 3; vertices.push(-halfW - expand, y0, z0 + halfT + expand); vertices.push( halfW + expand, y0, z0 + halfT + expand); vertices.push( halfW + expand, y1, z1 + halfT + expand); vertices.push(-halfW - expand, y1, z1 + halfT + expand); vertices.push(-halfW - expand, y0, z0 - halfT - expand); vertices.push( halfW + expand, y0, z0 - halfT - expand); vertices.push( halfW + expand, y1, z1 - halfT - expand); vertices.push(-halfW - expand, y1, z1 - halfT - expand); indices.push(vi+0, vi+1, vi+2, vi+0, vi+2, vi+3); indices.push(vi+4, vi+6, vi+5, vi+4, vi+7, vi+6); indices.push(vi+0, vi+3, vi+7, vi+0, vi+7, vi+4); indices.push(vi+1, vi+6, vi+2, vi+1, vi+5, vi+6); if (i === 5) indices.push(vi+3, vi+2, vi+6, vi+3, vi+6, vi+7); if (i === 0) indices.push(vi+0, vi+5, vi+1, vi+0, vi+4, vi+5); } const geom = new THREE.BufferGeometry(); geom.addAttribute('position', new THREE.BufferAttribute(new Float32Array(vertices), 3)); geom.setIndex(indices); geom.computeVertexNormals(); outlineInner.add(new THREE.Mesh(geom, outlineMat)); } const outlineWrapper = new THREE.Group(); outlineWrapper.add(outlineInner); outlineWrapper.rotation.y = nodeRotationY; outlineWrapper.rotation.x = nodeRotationX; outlineWrapper.position.copy(nodePositions[n]); outlineWrapper.visible = false; out.push(outlineWrapper); } return out; } // ---- hypercube edges ---- function buildEdges(nodePositions) { const lines = []; for (let dim = 0; dim < 6; dim++) { const mat = new THREE.LineDashedMaterial({ color: edgeColors[dim], linewidth: 1, transparent: true, opacity: edgeBaseOpacity, blending: THREE.AdditiveBlending, depthWrite: false, dashSize: 1, gapSize: 0, }); for (let n = 0; n < 64; n++) { const neighbor = n ^ (1 << dim); if (neighbor > n) { const geom = new THREE.BufferGeometry().setFromPoints([nodePositions[n].clone(), nodePositions[neighbor].clone()]); geom.addAttribute('lineDistance', new THREE.BufferAttribute(new Float32Array(2), 1)); const line = new THREE.Line(geom, mat.clone()); line.userData.nodeA = n; line.userData.nodeB = neighbor; line.userData.dim = dim; line.renderOrder = 2; lines.push(line); } } } return lines; } function setEdgeMesh(line, ax, ay, az, bx, by, bz) { const arr = line.geometry.attributes.position.array; arr[0] = ax; arr[1] = ay; arr[2] = az; arr[3] = bx; arr[4] = by; arr[5] = bz; line.geometry.attributes.position.needsUpdate = true; } function centerEdges(edgeLines, nodePositions) { for (const l of edgeLines) { const pA = nodePositions[l.userData.nodeA], pB = nodePositions[l.userData.nodeB]; setEdgeMesh(l, pA.x, pA.y, pA.z, pB.x, pB.y, pB.z); } } function panelEdges(tilt, shaped, edgeLines, nodePositions, P) { const ct = Math.cos(tilt), st = Math.sin(tilt), halfW = rectWidth / 2; for (const l of edgeLines) { const ud = l.userData, d = ud.dim; const pA = nodePositions[ud.nodeA], pB = nodePositions[ud.nodeB]; const sa = P.anc[ud.nodeA][d], sb = P.anc[ud.nodeB][d]; const sgn = Math.sign(pB.x - pA.x) || 1; let xA, xB, zA, zB; if (shaped) { const hwA = shaped === "circular" ? Math.sqrt(Math.max(0, DISC_R * DISC_R - sa.y * sa.y)) : halfW * (1 - Math.abs(sa.y) / DISC_R); const hwB = shaped === "circular" ? Math.sqrt(Math.max(0, DISC_R * DISC_R - sb.y * sb.y)) : halfW * (1 - Math.abs(sb.y) / DISC_R); zA = (sa.y >= 0 ? P.topZ[ud.nodeA] : P.botZ[ud.nodeA]) * Math.abs(sa.y) / DISC_R; zB = (sb.y >= 0 ? P.topZ[ud.nodeB] : P.botZ[ud.nodeB]) * Math.abs(sb.y) / DISC_R; xA = sgn * hwA; xB = -sgn * hwB; } else { xA = sgn * halfW; xB = -sgn * halfW; zA = sa.z; zB = sb.z; } setEdgeMesh(l, pA.x + xA, pA.y + sa.y * ct - zA * st, pA.z + sa.y * st + zA * ct, pB.x + xB, pB.y + sb.y * ct - zB * st, pB.z + sb.y * st + zB * ct); } } // ---- relation overlays (orbit circles + negative lines) ---- function makeOrbitCircle(color, parent) { const geom = new THREE.BufferGeometry(); geom.addAttribute('position', new THREE.BufferAttribute(new Float32Array((circleSegments + 1) * 3), 3)); const line = new THREE.LineLoop(geom, new THREE.LineBasicMaterial({ color, transparent: true, opacity: 0.7, depthWrite: false, depthTest: true, })); line.renderOrder = 999; line.frustumCulled = false; line.visible = false; parent.add(line); return { line }; } function setOrbitCircle(circleObj, point, axis) { const center = axis.clone().multiplyScalar(point.dot(axis)); const radiusVec = new THREE.Vector3().subVectors(point, center); if (radiusVec.length() < 1e-5) { circleObj.line.visible = false; return; } const posArr = circleObj.line.geometry.attributes.position.array; for (let i = 0; i <= circleSegments; i++) { const angle = (i / circleSegments) * Math.PI * 2; const p = radiusVec.clone().applyQuaternion(new THREE.Quaternion().setFromAxisAngle(axis, angle)).add(center); posArr[i * 3] = p.x; posArr[i * 3 + 1] = p.y; posArr[i * 3 + 2] = p.z; } circleObj.line.geometry.attributes.position.needsUpdate = true; circleObj.line.visible = true; } function hideOrbitCircle(circleObj) { circleObj.line.visible = false; } function makeNegLine(parent) { const g = new THREE.BufferGeometry(); g.addAttribute('position', new THREE.BufferAttribute(new Float32Array(6), 3)); const ln = new THREE.Line(g, new THREE.LineBasicMaterial({ color: negativeLineColor, transparent: true, opacity: 0.8, depthWrite: true, depthTest: true, })); ln.renderOrder = 999; ln.frustumCulled = false; ln.visible = false; parent.add(ln); return ln; } function setNegLineObj(ln, posA, posB) { const a = ln.geometry.attributes.position.array; a[0] = posA.x; a[1] = posA.y; a[2] = posA.z; a[3] = posB.x; a[4] = posB.y; a[5] = posB.z; ln.geometry.attributes.position.needsUpdate = true; ln.visible = true; } // ---- lattice, arrangements, scale fit, and the Klein-4 drag solver ---- const kleinArrs = [ ["double + Petrie", "82.2 164.4 123.3 123.3 164.4 82.2 164.4 -82.2 123.3 -123.3 82.2 -164.4"], ["force directed", "92.5 185 123.3 123.3 154.2 61.7 154.2 -61.7 123.3 -123.3 92.5 -185"], ["Petrie polygon", "49.6 185 135.4 135.4 185 49.6 185 -49.6 135.4 -135.4 49.6 -185"], ["Petrie + grid", "41.1 205.6 123.3 123.3 205.6 41.1 205.6 -41.1 123.3 -123.3 41.1 -205.6"], ["diamond 3", "82.2 246.7 41.1 41.1 246.7 82.2 246.7 -82.2 41.1 -41.1 82.2 -246.7"] ]; const _sum = new THREE.Vector3(); function latticePositions(dimVecs, out) { _sum.set(0, 0, 0); dimVecs.forEach(v => _sum.add(v)); _sum.multiplyScalar(0.5); for (let n = 0; n < 64; n++) { const p = out[n] || (out[n] = new THREE.Vector3()); p.set(0, 0, 0); for (let b = 0; b < 6; b++) if ((n >> b) & 1) p.add(dimVecs[b]); p.sub(_sum); } return out; } function fitScale(dimVecs) { const D3 = kleinArrs.find(a => a[0] === "diamond 3")[1].split(" ").map(Number); let xn = 0, xd = 0, zn = 0, zd = 0; for (let b = 0; b < 6; b++) { xn += dimVecs[b].x * D3[2 * b]; xd += D3[2 * b] * D3[2 * b]; zn += dimVecs[b].z * D3[2 * b + 1]; zd += D3[2 * b + 1] * D3[2 * b + 1]; } return { KX: xn / xd, KZ: zn / zd }; } function arrDims(name, KX, KZ) { const a = kleinArrs.find(x => x[0] === name); if (!a) return null; const v = a[1].split(" ").map(Number); const t = []; for (let b = 0; b < 6; b++) t[b] = new THREE.Vector3(v[2 * b] * KX, 0, v[2 * b + 1] * KZ); return t; } // least-squares edit of the three free edge pairs so node n lands on (px, pz); // p is node n's current centered position function kleinDrag(n, dimVecs, p, px, pz) { const aj = [], dj = []; let A = 0, D = 0; for (let j = 0; j < 3; j++) { const b1 = (n >> j) & 1, b2 = (n >> (5 - j)) & 1; aj[j] = b1 + b2 - 1; dj[j] = b1 - b2; A += aj[j] * aj[j]; D += dj[j] * dj[j]; } const dX = A ? (px - p.x) / A : 0, dZ = D ? (pz - p.z) / D : 0; for (let j = 0; j < 3; j++) { const x = dimVecs[j].x + aj[j] * dX, z = dimVecs[j].z + dj[j] * dZ; dimVecs[j].set(x, 0, z); dimVecs[5 - j].set(x, 0, -z); } } // ---- fullscreen + resize wiring; returns a disposer ---- function wireFullscreen({ outer, container, renderer, camera, btnFull, sceneHeight, requestRender }) { const fsEl = () => document.fullscreenElement || document.webkitFullscreenElement || null; const isFS = () => fsEl() === outer; const exitFS = () => { const f = document.exitFullscreen || document.webkitExitFullscreen; if (f) f.call(document); }; function resize() { const w = container.clientWidth; const h = container.clientHeight || sceneHeight; if (w > 0 && h > 0) { renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); renderer.setSize(w, h); camera.aspect = w / h; camera.updateProjectionMatrix(); requestRender(); } } function layout() { if (isFS()) { outer.style.height = "100%"; outer.style.background = "#ffffff"; container.style.height = ""; container.style.flex = "1 1 auto"; container.style.minHeight = "0"; btnFull.textContent = "Exit full screen"; } else { outer.style.height = ""; outer.style.background = ""; container.style.height = sceneHeight + "px"; container.style.flex = ""; container.style.minHeight = ""; btnFull.textContent = "Full screen"; } resize(); requestAnimationFrame(resize); } btnFull.addEventListener("click", () => { if (isFS()) exitFS(); else { const f = outer.requestFullscreen || outer.webkitRequestFullscreen; if (f) f.call(outer); } }); document.addEventListener("fullscreenchange", layout); document.addEventListener("webkitfullscreenchange", layout); const ro = new ResizeObserver(() => resize()); ro.observe(container); return () => { ro.disconnect(); document.removeEventListener("fullscreenchange", layout); document.removeEventListener("webkitfullscreenchange", layout); if (isFS()) exitFS(); }; } return { reverseBits6, negativeNode, reverseNode, isoclineNode, getHighlightSet, kleinFourSet, easeInOutCubic, smoothstep, plateFade, tiltBlend, lookTilt, computeTiltX, makeBtn, makeSelect, addField, makeBarBtn, FONT, HEX_FONT, ONE_LINE_PX, HALO, labelTextFor, makeNameTexture, plates, plateLabels, rectOutlines, buildEdges, centerEdges, panelEdges, makeOrbitCircle, setOrbitCircle, hideOrbitCircle, makeNegLine, setNegLineObj, latticePositions, fitScale, arrDims, kleinDrag, wireFullscreen, kleinArrs }; }31:T4335,hexagrams = [ { kingWen: 1, symbol: '䷀', fuxi: 0b111111, name: ['Creative', 'Dynamic', 'Heaven', 'Creative Principle', 'Force', 'The Key', 'Creativity', 'The Originating', 'Creative Power', 'Primal Power', 'Yang', 'Life Force', 'Kundalini', 'God the Father'] }, { kingWen: 2, symbol: '䷁', fuxi: 0b000000, name: ['Receptive', 'Magnetic', 'Earth', 'Submission', 'Passive Principle', 'Field', 'The Flow', 'Responsive Service', 'Yin', 'Natural Response', 'The Bearer'] }, { kingWen: 3, symbol: '䷂', fuxi: 0b100010, name: ['Difficulty', 'Difficulty at the Beginning', 'The Symbol of Bursting', 'Sprouting', 'Hoarding', 'Distress', 'Organizational Growth Pains', 'Difficult Beginnings', 'Growing Pains', 'Initial Obstacles', 'Initial Hardship'] }, { kingWen: 4, symbol: '䷃', fuxi: 0b010001, name: ['Inexperience', 'Youthful Folly', 'The Symbol of Covering', 'Immaturity', 'Uncultivated Growth', 'Youth', 'Acquiring Experience', 'Youthful Ignorance', 'Enveloping', 'Folly', 'Darkness'] }, { kingWen: 5, symbol: '䷄', fuxi: 0b111010, name: ['Waiting', 'Nourishment', 'Calculated Inaction', 'Attending', 'Biding One\'s Time', 'Nourishment Through Inaction', 'Waiting for Nourishment', 'Moistened'] }, { kingWen: 6, symbol: '䷅', fuxi: 0b010111, name: ['Conflict', 'Stress', 'The Symbol of Contention', 'Strife', 'Litigation', 'Quarreling', 'Arguing', 'Lawsuit'] }, { kingWen: 7, symbol: '䷆', fuxi: 0b010000, name: ['Discipline', 'The Army', 'The Symbol of Multitude and of Army', 'Legions/ Leading', 'The Troops', 'Collective Force', 'Discipline', 'Soldiers', 'Group Action', 'A Disciplined Multitude', 'Ego Discipline', 'Willpower'] }, { kingWen: 8, symbol: '䷇', fuxi: 0b000010, name: ['Holding Together', 'The Symbol of Subaltern Assistance', 'Union', 'Unity', 'Grouping', 'Alliance', 'Co-ordination', 'Leadership', 'Merging (as with tributaries of a river)', 'Seeking Union', 'Unification', 'Accord', 'Subservience', 'Individuation', 'Integration'] }, { kingWen: 9, symbol: '䷈', fuxi: 0b111011, name: ['Small Accumulating', 'Passive Restraint', 'The Taming Power of the Small', 'The Symbol of Small restraint', 'The Lesser Nourisher', 'Taming the Small Powers', 'Small Harvest', 'Small Obstruction', 'Nurturance by the Small', 'Restraint by the Weak', 'Restrained', 'Minor Restraint', 'The Weak Force', 'The Force of the Small', 'Weak Forces Restrain Strong Forces'] }, { kingWen: 10, symbol: '䷉', fuxi: 0b110111, name: ['Proceed with Caution', 'Cautious Advance', 'Treading', 'Conduct', 'The Symbol of Stepping Carefully', 'Proper Conduct', 'Cautious Treading', 'Watch Your Step', 'Proceed at Your Own Risk', 'Advancing With Care'] }, { kingWen: 11, symbol: '䷊', fuxi: 0b111000, name: ['Harmony', 'Peace', 'The Symbol of Successfulness', 'Prospering', 'Pervading', 'Greatness', 'Tranquility', 'Prosperity', 'Conjunction', 'Major Synthesis', 'Hieros Gamos', 'Holy Marriage'] }, { kingWen: 12, symbol: '䷋', fuxi: 0b000111, name: ['Stagnation', 'Divorcement', 'Standstill', 'The Symbol of Closing', 'Obstruction', 'The Wife', 'Obstructed', 'Decadence', 'Disjunction', 'Impasse'] }, { kingWen: 13, symbol: '䷌', fuxi: 0b101111, name: ['Fellowship', 'Union of Forces', 'Fellowship with Men', 'The Symbol of Companionship', 'Lovers', 'Beloved Friends', 'Like-minded persons', 'Concording People', 'Gathering Men', 'Sameness with People', 'Universal Brotherhood', 'Community', 'United', 'Human Association', 'Union of Men', 'Integration of Forces', 'Minor Synthesis', 'Cliques', 'Concordance', 'To Be In Accord With', 'Confirmation'] }, { kingWen: 14, symbol: '䷍', fuxi: 0b111101, name: ['Wealth', 'Possession in Great Measure', 'The Symbol of Great Possession', 'Sovereignty', 'Great Having', 'Great Possessing', 'The Great Possessor', 'Great Wealth', 'Abundance', 'Having What is Great'] }, { kingWen: 15, symbol: '䷎', fuxi: 0b001000, name: ['Modesty', 'Temperance', 'The Symbol of Humility', 'Moderation', 'Humbling', 'Respectful/Humble', 'Yielding/Retiring'] }, { kingWen: 16, symbol: '䷏', fuxi: 0b000100, name: ['Enthusiasm', 'Self-Deception', 'Repose', 'The Symbol of Harmonious Joy'] }, { kingWen: 17, symbol: '䷐', fuxi: 0b100110, name: ['Following', 'According With', 'Acquiring Followers', 'Adapting', 'Adjusting', 'To Accord With', 'To Accompany', 'Concordance', 'Conformance to The Work'] }, { kingWen: 18, symbol: '䷑', fuxi: 0b011001, name: ['Repair', 'Work On What Has Been Spoiled', 'The Symbol of Destruction', 'Decay', 'Arresting of Decay', 'Work after Spoiling', 'Fixing', 'Rectifying', 'Corrupting', 'Branch', 'Degeneration', 'Misdeeds'] }, { kingWen: 19, symbol: '䷒', fuxi: 0b110000, name: ['Approach', 'The Symbol of Advance and Arrival', 'Nearing', 'Overseeing', 'Condescension', 'Getting Ahead', 'Promotion', 'Conduct', 'Drawing Near', 'Becoming Great', 'The Forest', 'Advance', 'Advancing'] }, { kingWen: 20, symbol: '䷓', fuxi: 0b000011, name: ['Contemplation', 'View', 'The Symbol of Steady Observation', 'Looking Down', 'Observation', 'Viewing', 'Looking Up', 'Observing', 'Admiration', 'To Examine', 'Rulers and Their Subjects', 'Introspection', 'Perception', 'Contemplation of the Work'] }, { kingWen: 21, symbol: '䷔', fuxi: 0b100101, name: ['Discernment', 'Biting Through', 'Gnawing', 'The Symbol of Mastication and Punishment by Pressing and Squeezing', 'Gnawing Bite', 'Severing', 'Chewing', 'Punishment', 'Reformation', 'Reform', 'Differentiation', 'Discrimination', 'Making a Distinction', 'Getting the message'] }, { kingWen: 22, symbol: '䷕', fuxi: 0b101001, name: ['Elegance', 'Persona', 'Grace', 'The Symbol of Decoration', 'Gracefulness', 'Luxuriance', 'Adorning', 'Public Image', 'Adornment', 'Beauty', 'Conceit', 'Vanity', 'Veneer', 'Façade', 'Manners', 'Embellishment', 'Superficiality', 'Superficial Appearances', 'Form vs. Function', 'Art', 'Ego-trips'] }, { kingWen: 23, symbol: '䷖', fuxi: 0b000001, name: ['Disintegration', 'Splitting Apart', 'The symbol of Falling or Flaying', 'Peeling Off', 'Decay', 'Flaying', 'Stripping Away', 'Intrigue', 'Deterioration', 'Collapse', 'Fracturing', 'Tearing', 'Disintegration', 'Ruin', 'Unraveling'] }, { kingWen: 24, symbol: '䷗', fuxi: 0b100000, name: ['Return', 'The Turning Point', 'The Symbol of Returning', 'Revival', 'Recovery', 'To Repeat', 'Renewal', 'Restore', 'Return to the Way', 'Cyclic Repetition'] }, { kingWen: 25, symbol: '䷘', fuxi: 0b100111, name: ['Innocence', 'The Unexpected', 'The Unintentional', 'The Symbol of Freedom from Error', 'Integrity', 'Without Embroiling', 'Pestilence', 'Fidelity', 'No Error', 'Freedom from Vainness', 'Instinctive Goodness', 'The Simple', 'Correctness', 'Subconscious'] }, { kingWen: 26, symbol: '䷙', fuxi: 0b111001, name: ['Great Accumulating', 'Controlled Power', 'The Taming Power of the Great', 'The Great Nourisher', 'Taming the Great Powers', 'Great Accumulation', 'Great Storage', 'Nurturance of the Great', 'Great Buildup', 'Restraint of the Great', 'Restraint by the Strong', 'Potential Energy', 'The Great Taming Force', 'Energy Under Control', 'Power Restrained', 'Sublimation', 'Latent Power'] }, { kingWen: 27, symbol: '䷚', fuxi: 0b100001, name: ['Nourishment', 'The Corners of the Mouth', 'Providing Nourishment', 'The Symbol of the Cheek and of Nourishment', 'Jaws', 'Lower Jaw', 'Nurturing', 'Swallowing', 'Sagacious Counsel', 'Nourishing', 'To Feed'] }, { kingWen: 28, symbol: '䷛', fuxi: 0b011110, name: ['Critical Mass', 'Preponderance of the Great', 'The Symbol of Great Passing', 'Excess', 'Great Excess', 'The Passing of Greatness', 'Great Surpassing', 'Great Gains', 'Experience', 'Greater than Great', 'Greatness in Excess', 'Dominance by the Mighty', 'The Passing of Greatness', 'Excess of the Great', 'Law of Karma'] }, { kingWen: 29, symbol: '䷜', fuxi: 0b010010, name: ['Dangerous Abyss', 'The Abysmal', 'The Symbol of Sinking', 'Water', 'The Abyss', 'Gorge', 'Repeating Gorge', 'Repeated Entrapment', 'Double Pitfall', 'Multiple Danger', 'Double Water', 'The Deep', 'Dark Forces', 'The Perilous Pit'] }, { kingWen: 30, symbol: '䷝', fuxi: 0b101101, name: ['Radiant Clarity', 'The Clinging', 'The Symbol of Brightness and of Separateness', 'Flaming Beauty', 'Radiance', 'Fire', 'The Net', 'Allegiance', 'The Cosmic Mean', 'Synergy', 'Sunlight', 'Perception', 'Pertaining to Comprehension', 'The Light', 'Consciousness', 'Lucidity'] }, { kingWen: 31, symbol: '䷞', fuxi: 0b001110, name: ['Initiative', 'Influence', 'Wooing', 'Attraction', 'Sensation', 'Stimulation', 'Conjoining', 'Feelings', 'Sensitivity', 'Sensing', 'Affection', 'Influencing to Action', 'Tension', 'Seeking Union', 'Persuasion', 'Courting Response', 'Importuning'] }, { kingWen: 32, symbol: '䷟', fuxi: 0b011100, name: ['Consistency', 'Duration', 'The Symbol of Constancy', 'The Long Enduring', 'Constant', 'Persevering', 'Standing Fast', 'Continuity', 'Constancy in the Midst of Change', 'Holding Firm'] }, { kingWen: 33, symbol: '䷠', fuxi: 0b001111, name: ['Retreat', 'The Symbol of Retirement', 'Yielding', 'Withdrawal', 'Retiring', 'Wielding', 'Strategic Withdrawal', 'Inaccessibility', 'Disassociation from Inferior Forces'] }, { kingWen: 34, symbol: '䷡', fuxi: 0b111100, name: ['Great Power', 'The Power of the Great', 'The Symbol of Great Vigor', 'Persons of Great Authority', 'Great Strength', 'Great Invigorating', 'Great Maturity', 'Accumulated Force', 'The Strength of the Mighty', 'Righteous Power', 'Excessive Force'] }, { kingWen: 35, symbol: '䷢', fuxi: 0b000101, name: ['Progress', 'Advance of Consciousness', 'Prospering', 'The Symbol of Forwardness', 'To Advance', 'Advancement', 'Making Headway', 'Getting the Idea', 'Comes the Dawn'] }, { kingWen: 36, symbol: '䷣', fuxi: 0b101000, name: [ 'Darkening of the Light', 'Clouded Perception', 'The Symbol of the Appearance of Clear Intelligence Wounded', 'Injury', 'Wounding of the Bright', 'Brightness Hiding', 'Calling Pheasant', 'The Darkened Light', 'Concealment of Illumination', 'Injury of Illumination', 'Light Obliterated', 'Intelligence Unappreciated', 'Censorship', 'Hiding One\'s Light', 'The Dark Night of the Soul', 'Ignorance'] }, { kingWen: 37, symbol: '䷤', fuxi: 0b101011, name: ['Family', 'Family Life', 'Clan', 'Home', 'Linkage', 'Dwelling People', 'The Psyche'] }, { kingWen: 38, symbol: '䷥', fuxi: 0b110101, name: ['Estrangement', 'Alienation', 'Opposition', 'The Symbol of Strangeness and Disunion', 'The Estranged', 'Opposites', 'Polarizing', 'Alienation', 'Distant From', 'Perversion', 'Disharmony', 'Separated', 'Contradiction', 'Incongruity'] }, { kingWen: 39, symbol: '䷦', fuxi: 0b001010, name: ['Impasse', 'Obstruction', 'The Symbol of Difficulty', 'Arresting Movement', 'Trouble', 'Obstacles', 'Barrier', 'Halt', 'Halting', 'Limping', 'Afoot', 'Sit Tight-Don\'t move'] }, { kingWen: 40, symbol: '䷧', fuxi: 0b010100, name: ['Liberation', 'Deliverance', 'The Symbol of Loosening', 'Release', 'Eliminating Obstacles', 'Taking-apart', 'Untangled', 'Solution', 'Dissolution', 'Relief', 'Unloose', 'Release of Tension'] }, { kingWen: 41, symbol: '䷨', fuxi: 0b110001, name: ['Decrease', 'Compensating Sacrifice', 'The Symbol of Lessening', 'Loss', 'Diminishing', 'Reduction', 'Diminution of Excesses', 'Decline', 'Bringing into Balance', 'Dynamic Balance', 'Sacrifice'] }, { kingWen: 42, symbol: '䷩', fuxi: 0b100011, name: ['Increase', 'The Symbol of Addition', 'Gain', 'Augmenting', 'Help from Above', 'Benefit', 'Advantage', 'Profit', 'Expansion'] }, { kingWen: 43, symbol: '䷪', fuxi: 0b111110, name: ['Break-through', 'Resoluteness', 'The Symbol of Decision', 'Resolution', 'Determination', 'Parting', 'Removing Corruption', 'Eradication'] }, { kingWen: 44, symbol: '䷫', fuxi: 0b011111, name: ['Temptation', 'Coming to Meet', 'The Symbol of Meeting', 'Contact', 'Sexual Intercourse', 'Encountering', 'Coupling', 'Infiltration by Inferior Men', 'Adultery'] }, { kingWen: 45, symbol: '䷬', fuxi: 0b000110, name: ['Gathering Together', 'Contraction', 'Gathering Together', 'Massing', 'The Symbol of Gathering into One', 'Assembling', 'Congregation', 'Gathering', 'Unity', 'Accord', 'Making Whole', 'Focusing', 'Marshalling One\'s Forces', 'Clustering', 'Finished'] }, { kingWen: 46, symbol: '䷭', fuxi: 0b011000, name: ['Promotion', 'Pushing Upward', 'The Symbol of Rising and Advancing', 'Ascending', 'Ascension', 'Rising', 'Advancement', 'Sprouting from the Earth', 'Organic Growth'] }, { kingWen: 47, symbol: '䷮', fuxi: 0b010110, name: ['Hardship','Oppression', 'Exhaustion', 'The Symbol of Repression and Confinement', 'Adversity', 'Weariness', 'Confining', 'Entangled', 'Depression', 'Tiresome Restriction', 'Dried Up'] }, { kingWen: 48, symbol: '䷯', fuxi: 0b011010, name: ['Deep Well', 'Welling', 'Potentialities Fulfilled', 'The Source', 'The Deep Psyche'] }, { kingWen: 49, symbol: '䷰', fuxi: 0b101110, name: ['Metamorphosis', 'Revolution(s)', 'Transformation', 'Skinning', 'The Bridle', 'The Symbol of Change', 'Molting', 'Leather', 'Skin', 'Molt', 'Cut Off', 'Changing', 'Radical Change', 'Overthrowing'] }, { kingWen: 50, symbol: '䷱', fuxi: 0b011101, name: ['Cauldron', 'The Sacrificial Vessel', 'The Vessel', 'Rejuvenation', 'Cosmic Order', 'The Alchemical Vessel'] }, { kingWen: 51, symbol: '䷲', fuxi: 0b100100, name: ['Shocking Thunder', 'The Arousing', 'Thunder', 'The Symbol of Startling Movement', 'Shake', 'The Beginning of Movement', 'Shocking', 'The Thunderclap', 'Action', 'Motion', 'Sudden Change', 'Surprise!'] }, { kingWen: 52, symbol: '䷳', fuxi: 0b001001, name: ['Still Mountain', 'Mountain', 'Keeping Still', 'The Symbol of Checking and Stopping', 'Desisting', 'Stilling', 'Stillness', 'Stoppage', 'Bound', 'Reposing', 'Resting', 'Meditation', 'Non-action', 'Stopping', 'Arresting Movement'] }, { kingWen: 53, symbol: '䷴', fuxi: 0b001011, name: ['Development', 'Gradual Progress', 'The Symbol of Progressive Advance', 'Gradual Development', 'Infiltrating', 'Advancing', 'Growth', 'Developing', 'Gradualness', 'Dialectical Progression', 'Step by Step'] }, { kingWen: 54, symbol: '䷵', fuxi: 0b110100, name: [ 'Marrying Maiden', 'Propriety/Making-Do', 'The Symbol of the Marriage of the Younger Sister', 'Marriageable Maiden', 'The Marrying Girl', 'Subordinate', 'The Second Wife', 'Converting Maidenhood', 'Returning maiden', 'Making a young girl marry', 'Marrying a young girl', 'Marrying a Maiden', 'Unilateral Action', 'Impropriety', 'Improper Advances'] }, { kingWen: 55, symbol: '䷶', fuxi: 0b101100, name: ['Abundance', 'Expansion of Awareness', 'Fullness', 'The Symbol of Prosperity', 'Greatness', 'Abounding', 'Richness', 'Prolific', 'Fruitful', 'Luxuriant', 'Zenith', 'Affluence', 'Correct Action', 'Lucid Behavior'] }, { kingWen: 56, symbol: '䷷', fuxi: 0b001101, name: ['Transition', 'The Wanderer', 'The Symbol of the Traveler', 'The Exile', 'Sojourning', 'The Newcomer', 'To Lodge', 'To Travel', 'Traveling', 'The Stranger', 'Strangers', 'The Traveling Stranger', 'The Outsider', 'The Alien', 'The Gnostic', 'The Tarot Fool', 'Wandering', 'Homeless', 'Uncommitted', 'On Your Own'] }, { kingWen: 57, symbol: '䷸', fuxi: 0b011011, name: ['Gentle Wind', 'Penetration', 'The Penetrating', 'Wind', 'The Symbol of Bending to Enter', 'Willing Submission', 'Gentle Penetration', 'Ground', 'Calculations', 'Complaisance', 'Penetrating Influence', 'The Penetration of the Wind', 'Humility', 'Devoted Service', 'Submission'] }, { kingWen: 58, symbol: '䷹', fuxi: 0b110110, name: ['Joyous Lake', 'The Joyous', 'Joyousness', 'Pleased Satisfaction', 'Encouraging', 'Delight', 'Open'] }, { kingWen: 59, symbol: '䷺', fuxi: 0b010011, name: ['Dispersion', 'Expansion', 'Dissolution', 'Disintegration', 'Dispersal', 'Overcoming Dissension', 'Scattering'] }, { kingWen: 60, symbol: '䷻', fuxi: 0b110010, name: ['Regulations', 'Limitation', 'Restraint', 'Regulations', 'Articulating', 'Receipt', 'Restraining', 'Containment'] }, { kingWen: 61, symbol: '䷼', fuxi: 0b110011, name: ['Inner Truth', 'The Symbol of Central Sincerity', 'Inward Confidence', 'Inner Truthfulness', 'Sincerity', 'Centering- Conforming', 'Central Return', 'Faithfulness in the Center', 'Sincerity in the Center', 'Insight', 'Understanding', 'The Psyche'] }, { kingWen: 62, symbol: '䷽', fuxi: 0b001100, name: ['Small Gains', 'Preponderance of the Small', 'The Symbol of Excess in Small Things', 'The Small get by', 'Slight Excess', 'Small Exceeding', 'Small Surpassing', 'Excess of the Small', 'Small gains', 'Conscientiousness', 'Smallness in Excess', 'Exceeding the Mean', 'Proliferation of Details'] }, { kingWen: 63, symbol: '䷾', fuxi: 0b101010, name: ['After Completion', 'Completion', 'The Symbol of What is Already Past', 'Already Fording', 'Already Completed', 'Settled', 'Mission Accomplished', 'Tasks Completed', 'After the End', 'A state of Climax'] }, { kingWen: 64, symbol: '䷿', fuxi: 0b010101, name: ['Before Completion', 'Unfinished Business', 'The Symbol of What is not yet Past', 'Not-yet Fording', 'Not Yet Completed', 'Tasks yet to be Completed', 'Not yet', 'Yet to be', 'Before the End', 'Mission yet Unaccomplished', 'A State of Transition'] }, ];32:T2537,buildNode = { function addQuad(arr, ax, ay, az, bx, by, bz, cx, cy, cz, dx, dy, dz) { arr.push( ax, ay, az, bx, by, bz, cx, cy, cz, ax, ay, az, cx, cy, cz, dx, dy, dz ); } function addQuadColors(arr, ca, cb, cc, cd) { arr.push(ca, cb, cc, ca, cc, cd); } const aoSubdivs = 8; function buildSegmentStops(bottomDark, topDark, spread, falloff) { const stops = new Map(); function setStop(t, darkness) { t = Math.round(t * 1e6) / 1e6; const existing = stops.get(t); if (existing == null || darkness > existing) { stops.set(t, darkness); } } setStop(0, 0); setStop(1, 0); if (bottomDark > 0 && spread > 0) { for (let s = 0; s <= aoSubdivs; s++) { const frac = s / aoSubdivs; const t = frac * spread; const darkness = bottomDark * Math.pow(1 - frac, falloff); setStop(t, darkness); } } if (topDark > 0 && spread > 0) { for (let s = 0; s <= aoSubdivs; s++) { const frac = s / aoSubdivs; const t = 1 - frac * spread; const darkness = topDark * Math.pow(1 - frac, falloff); setStop(t, darkness); } } const sorted = Array.from(stops.entries()) .sort((a, b) => a[0] - b[0]) .map(([t, dark]) => ({ t, color: 1.0 - dark })); return sorted; } function lerpPt(a, b, t) { return { y: a.y + (b.y - a.y) * t, z: a.z + (b.z - a.z) * t }; } return function buildNode(nodeIndex, thicknessOverride) { const { rectWidth, rectHeight, pleatOffset, nodeRotationY, nodeRotationX, aoDarkness, aoSpread, aoFalloff } = config; const thickness = thicknessOverride != null ? thicknessOverride : 1; const group = new THREE.Group(); const bits = []; for (let b = 0; b < 6; b++) bits.push((nodeIndex >> b) & 1); const halfW = rectWidth / 2; const segH = rectHeight; const profile = []; let cy = 0, cz = 0; profile.push({ y: cy, z: cz }); for (let i = 0; i < 6; i++) { const dz = bits[i] === 1 ? pleatOffset : -pleatOffset; cy += segH; cz += dz; profile.push({ y: cy, z: cz }); } let centerZ = 0; for (let i = 0; i < 3; i++) { centerZ += (bits[i] === 1 ? pleatOffset : -pleatOffset); } const centerY = 3 * segH; const segAO = []; for (let i = 0; i < 6; i++) segAO.push({ bottom: 0, top: 0 }); if (aoDarkness > 0) { for (let p = 1; p <= 5; p++) { if (bits[p - 1] === bits[p]) continue; segAO[p - 1].top = Math.max(segAO[p - 1].top, aoDarkness); segAO[p].bottom = Math.max(segAO[p].bottom, aoDarkness); } } if (thickness <= 1) { const material = new THREE.MeshPhongMaterial({ color: 0xffffff, side: THREE.FrontSide, flatShading: true, specular: 0x000000, vertexColors: true, transparent: true, opacity: 1.0, }); for (let i = 0; i < 6; i++) { const pB = profile[i], pT = profile[i + 1]; const stops = buildSegmentStops( segAO[i].bottom, segAO[i].top, aoSpread, aoFalloff ); const verts = []; const colors = []; for (let s = 0; s < stops.length - 1; s++) { const lo = stops[s], hi = stops[s + 1]; const bPt = lerpPt(pB, pT, lo.t); const tPt = lerpPt(pB, pT, hi.t); addQuad(verts, -halfW, bPt.y, bPt.z, halfW, bPt.y, bPt.z, halfW, tPt.y, tPt.z, -halfW, tPt.y, tPt.z); addQuadColors(colors, lo.color, lo.color, hi.color, hi.color); addQuad(verts, -halfW, tPt.y, tPt.z, halfW, tPt.y, tPt.z, halfW, bPt.y, bPt.z, -halfW, bPt.y, bPt.z); addQuadColors(colors, hi.color, hi.color, lo.color, lo.color); } const colorArr = new Float32Array(colors.length * 3); for (let c = 0; c < colors.length; c++) { colorArr[c * 3] = colors[c]; colorArr[c * 3 + 1] = colors[c]; colorArr[c * 3 + 2] = colors[c]; } const geom = new THREE.BufferGeometry(); geom.addAttribute('position', new THREE.BufferAttribute(new Float32Array(verts), 3)); geom.addAttribute('color', new THREE.BufferAttribute(colorArr, 3)); geom.computeVertexNormals(); group.add(new THREE.Mesh(geom, material.clone())); } } else { const halfT = (thickness * 0.01) / 2; const frontProfile = profile.map(p => ({ y: p.y, z: p.z + halfT })); const backProfile = profile.map(p => ({ y: p.y, z: p.z - halfT })); const material = new THREE.MeshPhongMaterial({ color: 0xffffff, side: THREE.FrontSide, flatShading: true, specular: 0x000000, vertexColors: true, transparent: true, opacity: 1.0, }); const concaveFront = new Array(7).fill(null); for (let p = 1; p <= 5; p++) { if (bits[p - 1] === bits[p]) continue; const d1y = profile[p].y - profile[p - 1].y; const d1z = profile[p].z - profile[p - 1].z; const d2y = profile[p + 1].y - profile[p].y; const d2z = profile[p + 1].z - profile[p].z; concaveFront[p] = (d1y * d2z - d1z * d2y) > 0; } const segAOFront = []; const segAOBack = []; for (let i = 0; i < 6; i++) { segAOFront.push({ bottom: 0, top: 0 }); segAOBack.push({ bottom: 0, top: 0 }); } if (aoDarkness > 0) { for (let p = 1; p <= 5; p++) { if (concaveFront[p] == null) continue; const target = concaveFront[p] ? segAOFront : segAOBack; target[p - 1].top = Math.max(target[p - 1].top, aoDarkness); target[p].bottom = Math.max(target[p].bottom, aoDarkness); } } const verts = []; const colors = []; for (let i = 0; i < 6; i++) { const fB = frontProfile[i], fT = frontProfile[i + 1]; const bB = backProfile[i], bT = backProfile[i + 1]; const frontStops = buildSegmentStops( segAOFront[i].bottom, segAOFront[i].top, aoSpread, aoFalloff ); const backStops = buildSegmentStops( segAOBack[i].bottom, segAOBack[i].top, aoSpread, aoFalloff ); const allT = new Set(); for (const s of frontStops) allT.add(s.t); for (const s of backStops) allT.add(s.t); const sortedT = Array.from(allT).sort((a, b) => a - b); function sampleColor(stops, t) { if (t <= stops[0].t) return stops[0].color; if (t >= stops[stops.length - 1].t) return stops[stops.length - 1].color; for (let j = 0; j < stops.length - 1; j++) { if (t >= stops[j].t && t <= stops[j + 1].t) { const frac = (t - stops[j].t) / (stops[j + 1].t - stops[j].t); return stops[j].color + (stops[j + 1].color - stops[j].color) * frac; } } return 1; } for (let s = 0; s < sortedT.length - 1; s++) { const tLo = sortedT[s], tHi = sortedT[s + 1]; const fLo = lerpPt(fB, fT, tLo); const fHi = lerpPt(fB, fT, tHi); const bLo = lerpPt(bB, bT, tLo); const bHi = lerpPt(bB, bT, tHi); const fcLo = sampleColor(frontStops, tLo); const fcHi = sampleColor(frontStops, tHi); const bcLo = sampleColor(backStops, tLo); const bcHi = sampleColor(backStops, tHi); addQuad(verts, -halfW, fLo.y, fLo.z, halfW, fLo.y, fLo.z, halfW, fHi.y, fHi.z, -halfW, fHi.y, fHi.z); addQuadColors(colors, fcLo, fcLo, fcHi, fcHi); addQuad(verts, -halfW, bLo.y, bLo.z, -halfW, bHi.y, bHi.z, halfW, bHi.y, bHi.z, halfW, bLo.y, bLo.z); addQuadColors(colors, bcLo, bcHi, bcHi, bcLo); addQuad(verts, -halfW, bLo.y, bLo.z, -halfW, fLo.y, fLo.z, -halfW, fHi.y, fHi.z, -halfW, bHi.y, bHi.z); addQuadColors(colors, 1, 1, 1, 1); addQuad(verts, halfW, fLo.y, fLo.z, halfW, bLo.y, bLo.z, halfW, bHi.y, bHi.z, halfW, fHi.y, fHi.z); addQuadColors(colors, 1, 1, 1, 1); } } { const ft = frontProfile[6], bt = backProfile[6]; addQuad(verts, -halfW, ft.y, ft.z, halfW, ft.y, ft.z, halfW, bt.y, bt.z, -halfW, bt.y, bt.z); addQuadColors(colors, 1, 1, 1, 1); } { const fb = frontProfile[0], bb = backProfile[0]; addQuad(verts, -halfW, bb.y, bb.z, halfW, bb.y, bb.z, halfW, fb.y, fb.z, -halfW, fb.y, fb.z); addQuadColors(colors, 1, 1, 1, 1); } const colorArr = new Float32Array(colors.length * 3); for (let c = 0; c < colors.length; c++) { colorArr[c * 3] = colors[c]; colorArr[c * 3 + 1] = colors[c]; colorArr[c * 3 + 2] = colors[c]; } const geom = new THREE.BufferGeometry(); geom.addAttribute('position', new THREE.BufferAttribute(new Float32Array(verts), 3)); geom.addAttribute('color', new THREE.BufferAttribute(colorArr, 3)); geom.computeVertexNormals(); group.add(new THREE.Mesh(geom, material)); } group.position.set(0, -centerY, -centerZ); const wrapper = new THREE.Group(); wrapper.add(group); wrapper.rotation.y = nodeRotationY; wrapper.rotation.x = nodeRotationX; return wrapper; }; }33:T3062,buildDiscNode = { // Circular ("crescent moon") pleated sheets. // // Bipolar coordinates on the disc: z = R tanh((s + i*mu)/2) // x = R sinh(s) / (cosh s + cos mu) // y = R sin(mu) / (cosh s + cos mu) // Curves of constant mu are the circular arcs through the left/right // points (+-R, 0) -- the crescents of a moon. s = 0 is the vertical // centerline, where the cross-section equals the flat pleated profile // exactly. Pleat depth is the flat profile times the local conformal // scale of the map, // env = (1 + cos mu) / (cosh s + cos mu) (= 1 on the centerline) // so creases die out smoothly toward the two points in proportion to // the local crescent width. // // The hover outline is built from the convex envelope of the profile // (upper/lower hulls of the zigzag, valleys bridged) inflated by the // clearance pad, so the highlight appears only around the outer // silhouette and never inside valley folds. const MU_SUB = 8; // rows per line-band (crease rows duplicated -> hard creases) const SMAX = 6; // extent of the s parameter before capping at the poles const NCOL = 57; // interior columns (odd -> one column exactly on the centerline) const C = NCOL + 2; // + two pole columns const DS = (2 * SMAX) / (NCOL - 1); const RN = 6 * (MU_SUB + 1); const POLE_AO_MIN = 0.58, POLE_AO_NORM = Math.tanh(2.5); const DISC_GAUGE = 0.6; // disc sheet gauge relative to the rectangles' nominal thickness const TAPER_K = 6; // gauge tapers to zero where crescents pinch below TAPER_K sheet-thicknesses function upperHull(v) { // least concave majorant of v[i] sampled at i = 0..n const h = []; for (let i = 0; i < v.length; i++) { while (h.length >= 2) { const a = h[h.length - 2], b = h[h.length - 1]; if ((v[b] - v[a]) * (i - a) <= (v[i] - v[a]) * (b - a)) h.pop(); else break; } h.push(i); } const out = v.slice(); for (let s = 0; s < h.length - 1; s++) { const a = h[s], b = h[s + 1]; for (let i = a; i <= b; i++) out[i] = v[a] + ((v[b] - v[a]) * (i - a)) / (b - a); } return out; } const lowerHull = v => upperHull(v.map(x => -x)).map(x => -x); function buildDiscGeometry(nodeIndex, zPad, xyScale, withAO, pad, hull) { pad = pad || 0; const { rectHeight, pleatOffset, aoDarkness, aoSpread, aoFalloff } = config; const seg = rectHeight, R = 3 * seg; const bits = []; for (let b = 0; b < 6; b++) bits.push((nodeIndex >> b) & 1); const cum = [0]; let zz = 0; for (let i = 0; i < 6; i++) { zz += bits[i] === 1 ? pleatOffset : -pleatOffset; cum.push(zz); } const cZ = cum[3]; const knotV = []; for (let i = 0; i <= 6; i++) knotV.push(cum[i] - cZ); let creaseCount = 0; for (let p = 1; p <= 5; p++) if (bits[p - 1] !== bits[p]) creaseCount++; const poleAmt = (1 - POLE_AO_MIN) * (creaseCount / 5); // flat discs get no convergence shadow const segAOFront = [], segAOBack = [], segAOAll = []; for (let i = 0; i < 6; i++) { segAOFront.push({ bottom: 0, top: 0 }); segAOBack.push({ bottom: 0, top: 0 }); segAOAll.push({ bottom: 0, top: 0 }); } if (aoDarkness > 0) { for (let p = 1; p <= 5; p++) { if (bits[p - 1] === bits[p]) continue; const d1z = bits[p - 1] === 1 ? pleatOffset : -pleatOffset; const d2z = bits[p] === 1 ? pleatOffset : -pleatOffset; const target = (d2z - d1z) > 0 ? segAOFront : segAOBack; target[p - 1].top = Math.max(target[p - 1].top, aoDarkness); target[p].bottom = Math.max(target[p].bottom, aoDarkness); segAOAll[p - 1].top = Math.max(segAOAll[p - 1].top, aoDarkness); segAOAll[p].bottom = Math.max(segAOAll[p].bottom, aoDarkness); } } function bandDark(ao, t) { let d = 0; if (aoSpread > 0) { if (ao.bottom > 0 && t < aoSpread) d = Math.max(d, ao.bottom * Math.pow(1 - t / aoSpread, aoFalloff)); if (ao.top > 0 && 1 - t < aoSpread) d = Math.max(d, ao.top * Math.pow(1 - (1 - t) / aoSpread, aoFalloff)); } return d; } const rowMu = [], rowCos = [], rowSin = [], rowBand = [], rowT = []; for (let b = 0; b < 6; b++) { const mu0 = 2 * Math.atan((b * seg - R) / R); const mu1 = 2 * Math.atan(((b + 1) * seg - R) / R); for (let k = 0; k <= MU_SUB; k++) { const mu = mu0 + ((mu1 - mu0) * k) / MU_SUB; rowMu.push(mu); rowCos.push(Math.cos(mu)); rowSin.push(Math.sin(mu)); rowBand.push(b); rowT.push(k / MU_SUB); } } function evalP(kn, y) { // pleated profile on knots kn, centered const t = Math.max(0, Math.min(6, (y + R) / seg)); const i = Math.min(5, Math.floor(t)), f = t - i; return kn[i] * (1 - f) + kn[i + 1] * f; } function normalAt(sh, r, sv, a) { // exact normal from the bipolar tangents const cm = rowCos[r], sm = rowSin[r], f = sh.rowP[r]; const ch = Math.cosh(sv), shh = Math.sinh(sv); const den = ch + cm, den2 = den * den; const xs = R * (1 + ch * cm) / den2; const ys = -R * sm * shh / den2; const zs = -f * (1 + cm) * shh / den2; const xm = R * shh * sm / den2; const ym = R * (cm * ch + 1) / den2; const zm = a * R / den + f * sm * (1 - ch) / den2; const nx = ys * zm - zs * ym; const ny = zs * xm - xs * zm; const nz = xs * ym - ys * xm; const L = Math.sqrt(nx * nx + ny * ny + nz * nz) || 1; return { x: nx / L, y: ny / L, z: nz / L }; } // A "sheet" is a profile (the pleats, or one of its convex envelopes) // plus the mitred normal-offset field for the sheet-metal gauge + pad. function makeSheet(kn) { const sh = { rowP: [], offX: new Float64Array(RN * C), offY: new Float64Array(RN * C), offZ: new Float64Array(RN * C), }; for (let r = 0; r < RN; r++) sh.rowP.push(evalP(kn, R * Math.tan(rowMu[r] / 2))); const slope = []; for (let b = 0; b < 6; b++) slope.push((kn[b + 1] - kn[b]) / seg); if (zPad + pad > 1e-6) { const aMean = (kn[6] - kn[0]) / (6 * seg); const pLen = Math.sqrt(1 + aMean * aMean); const envT = creaseCount > 0 ? TAPER_K * zPad / seg : 0; for (let r = 0; r < RN; r++) { const b = rowBand[r]; const twin = rowT[r] === 0 && b > 0 ? b - 1 : (rowT[r] === 1 && b < 5 ? b + 1 : -1); for (let j = 0; j < C; j++) { const oi = r * C + j; if (j === 0 || j === C - 1) { // corrugated tips pinch closed (keeping pad clearance); flat sheets keep their plane normal const amt = (creaseCount > 0 ? 0 : zPad) + pad; if (creaseCount > 0) { sh.offZ[oi] = amt; } else { sh.offY[oi] = (-aMean / pLen) * amt; sh.offZ[oi] = amt / pLen; } continue; } const sv = -SMAX + (j - 1) * DS; let f = 1; if (envT > 0) { const env = (1 + rowCos[r]) / (Math.cosh(sv) + rowCos[r]); const q = Math.min(1, env / envT); f = q * q * (3 - 2 * q); // smoothstep taper of the gauge } let o; if (twin < 0) { o = normalAt(sh, r, sv, slope[b]); } else { // crease row: mitre the two panel normals const n1 = normalAt(sh, r, sv, slope[Math.min(b, twin)]); const n2 = normalAt(sh, r, sv, slope[Math.max(b, twin)]); let mx = n1.x + n2.x, my = n1.y + n2.y, mz = n1.z + n2.z; const L = Math.sqrt(mx * mx + my * my + mz * mz) || 1; mx /= L; my /= L; mz /= L; const c = Math.max(0.2, mx * n1.x + my * n1.y + mz * n1.z); o = { x: mx / c, y: my / c, z: mz / c }; } const amt = zPad * f + pad; sh.offX[oi] = o.x * amt; sh.offY[oi] = o.y * amt; sh.offZ[oi] = o.z * amt; } } } return sh; } function pointAt(sh, r, j) { if (j === 0 || j === C - 1) return { x: (j === 0 ? -1 : 1) * R * xyScale, y: 0, z: 0, env: 0 }; const sv = -SMAX + (j - 1) * DS; const den = Math.cosh(sv) + rowCos[r]; const env = (1 + rowCos[r]) / den; // conformal scale, = 1 on the centerline return { x: (R * Math.sinh(sv) / den) * xyScale, y: (R * rowSin[r] / den) * xyScale, z: sh.rowP[r] * env, env }; } const positions = [], colors = [], indices = []; function pushVert(sh, r, j, sign, ao) { const p = pointAt(sh, r, j); const oi = r * C + j; positions.push(p.x + sign * sh.offX[oi], p.y + sign * sh.offY[oi], p.z + sign * sh.offZ[oi]); if (withAO) { const pole = 1 - poleAmt * (1 - Math.tanh(2.5 * p.env) / POLE_AO_NORM); const shd = pole * (ao ? 1 - bandDark(ao[rowBand[r]], rowT[r]) : 1); colors.push(shd, shd, shd); } } function addShell(sh, sign, flip, ao) { const base = positions.length / 3; for (let r = 0; r < RN; r++) for (let j = 0; j < C; j++) pushVert(sh, r, j, sign, ao); for (let b = 0; b < 6; b++) { const r0 = b * (MU_SUB + 1); for (let k = 0; k < MU_SUB; k++) { const rA = r0 + k, rB = r0 + k + 1; for (let j = 0; j < C - 1; j++) { const a = base + rA * C + j, b2 = base + rA * C + j + 1; const c = base + rB * C + j + 1, d = base + rB * C + j; if (flip) indices.push(a, c, b2, a, d, c); else indices.push(a, b2, c, a, c, d); } } } return base; } const top = makeSheet(hull ? upperHull(knotV) : knotV); const bot = hull ? makeSheet(lowerHull(knotV)) : top; if (zPad + pad > 1e-6) { addShell(top, +1, false, segAOFront); addShell(bot, -1, true, segAOBack); for (const rc of [[0, true], [RN - 1, false]]) { // rim along the boundary circle const rowIdx = rc[0], flip = rc[1]; const baseT = positions.length / 3; for (let j = 0; j < C; j++) pushVert(top, rowIdx, j, +1, null); const baseB = positions.length / 3; for (let j = 0; j < C; j++) pushVert(bot, rowIdx, j, -1, null); for (let j = 0; j < C - 1; j++) { const a = baseT + j, b2 = baseT + j + 1, c = baseB + j + 1, d = baseB + j; if (flip) indices.push(a, c, b2, a, d, c); else indices.push(a, b2, c, a, c, d); } } } else { addShell(top, 0, false, segAOAll); } const geom = new THREE.BufferGeometry(); geom.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3)); if (withAO) geom.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3)); geom.setIndex(indices); geom.computeVertexNormals(); return geom; } function wrapMesh(mesh) { const { nodeRotationX, nodeRotationY } = config; const group = new THREE.Group(); group.add(mesh); const wrapper = new THREE.Group(); wrapper.add(group); wrapper.rotation.y = nodeRotationY; wrapper.rotation.x = nodeRotationX; return wrapper; } function halfTOf(thicknessOverride) { const thickness = thicknessOverride != null ? thicknessOverride : 1; return thickness > 1 ? ((thickness * 0.01) / 2) * DISC_GAUGE : 0; } function buildDiscNode(nodeIndex, thicknessOverride) { const geom = buildDiscGeometry(nodeIndex, halfTOf(thicknessOverride), 1, true, 0, false); const material = new THREE.MeshPhongMaterial({ color: 0xffffff, side: THREE.DoubleSide, flatShading: false, // smooth within panels; creases stay hard via duplicated rows specular: 0x000000, vertexColors: true, transparent: true, opacity: 1.0, }); return wrapMesh(new THREE.Mesh(geom, material)); } buildDiscNode.geometry = buildDiscGeometry; buildDiscNode.outline = function (nodeIndex, thicknessOverride, expand, material) { const R = 3 * config.rectHeight; const geom = buildDiscGeometry(nodeIndex, halfTOf(thicknessOverride), (R + expand) / R, false, expand, true); return wrapMesh(new THREE.Mesh(geom, material)); }; return buildDiscNode; }34:T281e,buildChevronNode = { // Chevron (rhombus) pleated sheets -- the piecewise-linear counterpart of // the crescent disc. // // The sheet is a rhombus with vertices at (+-W, 0) and (0, +-R), where // R = 3 * rectHeight and W = rectWidth / 2, so its height-to-width ratio // matches the rectangular sheets. Creases are straight chevrons through // the two side vertices. Every line-band is a pair of exact planar // facets (a kite / chevron arrow), and the whole skin is generated from // just the exact corner points: // - the two tips (+-W, 0, 0), where the sheet pinches closed, // - seven spine corners at x = 0, computed as the literal intersection // of the adjacent facets' offset planes (no mitre heuristics), // with every other vertex an affine combination of those corners, so // each facet skin is a perfect plane and nothing can poke out at the // corners. Sheet gauge scales with the local pattern -- full thickness // at the spine, linearly to zero at the tips -- which is the unique // choice that keeps the offset skins planar through the pinched tips. // // The hover outline is built from the convex envelope of the profile // (upper/lower hulls of the zigzag, valleys bridged) inflated by the // clearance pad, so the highlight appears only around the outer // silhouette and never inside valley folds. const T_SUB = 8; // rows per line-band (only for AO color gradients; all coplanar) const NCOL = 41; // columns across (only for AO color gradients; all coplanar) const RN = 6 * (T_SUB + 1); const POLE_AO_MIN = 0.58, POLE_AO_NORM = Math.tanh(2.5); const CHEV_GAUGE = 0.6; // sheet gauge relative to the rectangles' nominal thickness function upperHull(v) { // least concave majorant of v[i] sampled at i = 0..n const h = []; for (let i = 0; i < v.length; i++) { while (h.length >= 2) { const a = h[h.length - 2], b = h[h.length - 1]; if ((v[b] - v[a]) * (i - a) <= (v[i] - v[a]) * (b - a)) h.pop(); else break; } h.push(i); } const out = v.slice(); for (let s = 0; s < h.length - 1; s++) { const a = h[s], b = h[s + 1]; for (let i = a; i <= b; i++) out[i] = v[a] + ((v[b] - v[a]) * (i - a)) / (b - a); } return out; } const lowerHull = v => upperHull(v.map(x => -x)).map(x => -x); function buildChevronGeometry(nodeIndex, zPad, xScale, yScale, withAO, pad, hull) { pad = pad || 0; const { rectWidth, rectHeight, pleatOffset, aoDarkness, aoSpread, aoFalloff } = config; const seg = rectHeight, R = 3 * seg, W = rectWidth / 2, C = NCOL; const bits = []; for (let b = 0; b < 6; b++) bits.push((nodeIndex >> b) & 1); const cum = [0]; let zz = 0; for (let i = 0; i < 6; i++) { zz += bits[i] === 1 ? pleatOffset : -pleatOffset; cum.push(zz); } const cZ = cum[3]; const knotV = []; for (let i = 0; i <= 6; i++) knotV.push(cum[i] - cZ); let creaseCount = 0; for (let p = 1; p <= 5; p++) if (bits[p - 1] !== bits[p]) creaseCount++; const poleAmt = (1 - POLE_AO_MIN) * (creaseCount / 5); // flat sheets get no convergence shadow const segAOFront = [], segAOBack = [], segAOAll = []; for (let i = 0; i < 6; i++) { segAOFront.push({ bottom: 0, top: 0 }); segAOBack.push({ bottom: 0, top: 0 }); segAOAll.push({ bottom: 0, top: 0 }); } if (aoDarkness > 0) { for (let p = 1; p <= 5; p++) { if (bits[p - 1] === bits[p]) continue; const d1z = bits[p - 1] === 1 ? pleatOffset : -pleatOffset; const d2z = bits[p] === 1 ? pleatOffset : -pleatOffset; const target = (d2z - d1z) > 0 ? segAOFront : segAOBack; target[p - 1].top = Math.max(target[p - 1].top, aoDarkness); target[p].bottom = Math.max(target[p].bottom, aoDarkness); segAOAll[p - 1].top = Math.max(segAOAll[p - 1].top, aoDarkness); segAOAll[p].bottom = Math.max(segAOAll[p].bottom, aoDarkness); } } function bandDark(ao, t) { let d = 0; if (aoSpread > 0) { if (ao.bottom > 0 && t < aoSpread) d = Math.max(d, ao.bottom * Math.pow(1 - t / aoSpread, aoFalloff)); if (ao.top > 0 && 1 - t < aoSpread) d = Math.max(d, ao.top * Math.pow(1 - (1 - t) / aoSpread, aoFalloff)); } return d; } const rowBand = [], rowT = []; for (let b = 0; b < 6; b++) { for (let k = 0; k <= T_SUB; k++) { rowBand.push(b); rowT.push(k / T_SUB); } } const tOf = j => -1 + (2 * j) / (C - 1); // One skin = the seven exact spine corners (x = 0) of the offset planes, // interpolated to the rows of the grid. sigma = +1 top skin, -1 bottom, // 0 for the zero-thickness mid-surface. The facet skin plane is fully // determined by: mid facet + normal * (gauge * u + pad), gauge ~ u. // Its x = 0 section is the line z = a*y + k below; adjacent facets' // lines intersect at the exact shared corner. function makeSkin(kn, sigma) { const gz = sigma * zPad, gp = sigma * pad; const lines = []; for (let b = 0; b < 6; b++) { const a = (kn[b + 1] - kn[b]) / seg; const hb = b * seg - R; const cI = kn[b] - a * hb; const L = Math.sqrt(cI * cI + a * a * W * W + W * W); const nx = cI / L, ny = -a * W / L, nz = W / L; const c1 = 1 + (nx * (gz + gp)) / (W - nx * gz); lines.push({ a, k: c1 * cI + (nz - a * ny) * (c1 * gz + gp), yAt: y0 => c1 * (y0 + ny * gz) + ny * gp, }); } const K = []; for (let i = 0; i <= 6; i++) { const hi = i * seg - R; const b1 = i > 0 ? lines[i - 1] : null; const b2 = i < 6 ? lines[i] : null; let y, z; if (b1 && b2 && Math.abs(b1.a - b2.a) > 1e-9) { y = (b2.k - b1.k) / (b1.a - b2.a); // exact intersection of the two offset planes at x = 0 z = b1.a * y + b1.k; } else { const bb = b2 || b1; y = bb.yAt(hi); z = bb.a * y + bb.k; } K.push({ y, z }); } const rowSy = [], rowSz = []; for (let r = 0; r < RN; r++) { const b = rowBand[r], w = rowT[r]; rowSy.push(K[b].y * (1 - w) + K[b + 1].y * w); rowSz.push(K[b].z * (1 - w) + K[b + 1].z * w); } return { rowSy, rowSz, tipZ: gp }; } const positions = [], colors = [], indices = []; function pushVert(sk, r, j, ao) { const t = tOf(j), u = 1 - Math.abs(t); positions.push( t * W * xScale, u * sk.rowSy[r] * yScale, (1 - u) * sk.tipZ + u * sk.rowSz[r] ); if (withAO) { const pole = 1 - poleAmt * (1 - Math.tanh(2.5 * u) / POLE_AO_NORM); const shd = pole * (ao ? 1 - bandDark(ao[rowBand[r]], rowT[r]) : 1); colors.push(shd, shd, shd); } } function addShell(sk, flip, ao) { const base = positions.length / 3; for (let r = 0; r < RN; r++) for (let j = 0; j < C; j++) pushVert(sk, r, j, ao); for (let b = 0; b < 6; b++) { const r0 = b * (T_SUB + 1); for (let k = 0; k < T_SUB; k++) { const rA = r0 + k, rB = r0 + k + 1; for (let j = 0; j < C - 1; j++) { const a = base + rA * C + j, b2 = base + rA * C + j + 1; const c = base + rB * C + j + 1, d = base + rB * C + j; if (flip) indices.push(a, c, b2, a, d, c); else indices.push(a, b2, c, a, c, d); } } } return base; } const dual = zPad + pad > 1e-6; const topSkin = makeSkin(hull ? upperHull(knotV) : knotV, dual ? 1 : 0); const botSkin = dual ? makeSkin(hull ? lowerHull(knotV) : knotV, -1) : topSkin; if (dual) { addShell(topSkin, false, segAOFront); addShell(botSkin, true, segAOBack); for (const rc of [[0, true], [RN - 1, false]]) { // rim along the rhombus boundary const rowIdx = rc[0], flip = rc[1]; const baseT = positions.length / 3; for (let j = 0; j < C; j++) pushVert(topSkin, rowIdx, j, null); const baseB = positions.length / 3; for (let j = 0; j < C; j++) pushVert(botSkin, rowIdx, j, null); for (let j = 0; j < C - 1; j++) { const a = baseT + j, b2 = baseT + j + 1, c = baseB + j + 1, d = baseB + j; if (flip) indices.push(a, c, b2, a, d, c); else indices.push(a, b2, c, a, c, d); } } } else { addShell(topSkin, false, segAOAll); } const geom = new THREE.BufferGeometry(); geom.addAttribute('position', new THREE.BufferAttribute(new Float32Array(positions), 3)); if (withAO) geom.addAttribute('color', new THREE.BufferAttribute(new Float32Array(colors), 3)); geom.setIndex(indices); geom.computeVertexNormals(); return geom; } function wrapMesh(mesh) { const { nodeRotationX, nodeRotationY } = config; const group = new THREE.Group(); group.add(mesh); const wrapper = new THREE.Group(); wrapper.add(group); wrapper.rotation.y = nodeRotationY; wrapper.rotation.x = nodeRotationX; return wrapper; } function halfTOf(thicknessOverride) { const thickness = thicknessOverride != null ? thicknessOverride : 1; return thickness > 1 ? ((thickness * 0.01) / 2) * CHEV_GAUGE : 0; } function buildChevronNode(nodeIndex, thicknessOverride) { const geom = buildChevronGeometry(nodeIndex, halfTOf(thicknessOverride), 1, 1, true, 0, false); const material = new THREE.MeshPhongMaterial({ color: 0xffffff, side: THREE.DoubleSide, flatShading: true, // every line-band is a pair of exact planar facets specular: 0x000000, vertexColors: true, transparent: true, opacity: 1.0, }); return wrapMesh(new THREE.Mesh(geom, material)); } buildChevronNode.geometry = buildChevronGeometry; buildChevronNode.outline = function (nodeIndex, thicknessOverride, expand, material) { const R = 3 * config.rectHeight, W = config.rectWidth / 2; const geom = buildChevronGeometry( nodeIndex, halfTOf(thicknessOverride), (W + expand) / W, (R + expand) / R, false, expand, true); return wrapMesh(new THREE.Mesh(geom, material)); }; return buildChevronNode; }35:Tb01,html`

	Identity	Negative	Reverse	Isocline
Description	Keep the bits the same	Flip each bit to its opposite	Reverse the bit order	Negative + Reverse
Example	101100 → 101100	101100 → 010011	101100 → 001101	101100 → 110010

`36:T3d65,gridCombo = { const { animDuration, bgColor, quadSize, pairSize, cellSpacing, minCellPx, wireColor, wireOpacity, thicknessGrid } = config; // ---- Transformations on 6-bit nodes ---- function invert(n) { return (~n) & 0x3F; } function reverse(n) { let r = 0; for (let b = 0; b < 6; b++) if ((n >> b) & 1) r |= (1 << (5 - b)); return r; } function isocline(n) { return reverse(invert(n)); } // ---- Build orbit groups ---- const visited = new Set(); const quads = []; const pairs = []; for (let n = 0; n < 64; n++) { if (visited.has(n)) continue; const inv = invert(n), rev = reverse(n), iso = isocline(n); [n, inv, rev, iso].forEach(x => visited.add(x)); const orbit = new Set([n, inv, rev, iso]); if (orbit.size === 4) { quads.push({ tl: n, tr: inv, bl: rev, br: iso }); } else { const selfRev = n === rev; pairs.push({ a: n, b: inv, horizontal: selfRev }); } } // ---- Sort by complexity ---- function complexity(n) { const bits = n.toString(2).padStart(6, '0'); let t = 0; for (let i = 1; i < 6; i++) if (bits[i] !== bits[i - 1]) t++; return t; } const selfRevPairs = []; const selfIsoPairs = []; pairs.forEach(p => { if (p.horizontal) selfRevPairs.push(p); else selfIsoPairs.push(p); }); selfRevPairs.sort((a, b) => complexity(Math.min(a.a, a.b)) - complexity(Math.min(b.a, b.b))); selfIsoPairs.sort((a, b) => complexity(Math.min(a.a, a.b)) - complexity(Math.min(b.a, b.b))); quads.sort((a, b) => complexity(a.tl) - complexity(b.tl)); const allGroups = [ ...selfRevPairs.map(p => ({ type: "pair", ...p, category: "selfRev" })), ...selfIsoPairs.map(p => ({ type: "pair", ...p, category: "selfIso" })), ...quads.map(q => ({ type: "quad", ...q, category: "quad" })), ]; // ---- Grid layout computation ---- function computeLayout(numCols) { const positions = []; if (numCols >= 5) { selfRevPairs.forEach((_, i) => positions.push({ col: 0, row: i })); selfIsoPairs.forEach((_, i) => positions.push({ col: 1, row: i })); quads.forEach((_, i) => positions.push({ col: 2 + Math.floor(i / 4), row: i % 4 })); } else { let cursor = 0; selfRevPairs.forEach((_, i) => { positions.push({ col: i % numCols, row: cursor + Math.floor(i / numCols) }); }); cursor += Math.ceil(selfRevPairs.length / numCols); selfIsoPairs.forEach((_, i) => { positions.push({ col: i % numCols, row: cursor + Math.floor(i / numCols) }); }); cursor += Math.ceil(selfIsoPairs.length / numCols); quads.forEach((_, i) => { positions.push({ col: i % numCols, row: cursor + Math.floor(i / numCols) }); }); } let maxCol = 0, maxRow = 0; for (const p of positions) { if (p.col > maxCol) maxCol = p.col; if (p.row > maxRow) maxRow = p.row; } return { positions, cols: maxCol + 1, rows: maxRow + 1 }; } // ---- Renderer ---- const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); // ---- Container ---- const container = document.createElement("div"); container.style.position = "relative"; container.style.width = "100%"; renderer.domElement.style.cssText = ` position: absolute; top: 0; left: 0; width: 100%; height: 100%; `; container.appendChild(renderer.domElement); renderer.domElement.style.touchAction = "pan-y"; // ---- Per-row button bar infrastructure ---- function makeBtn(label) { const b = document.createElement("button"); b.textContent = label; b.style.cssText = ` padding:8px 20px; font:600 13px/1 monospace; letter-spacing:0.04em; border:1px solid rgba(255,255,255,0.35); border-radius:4px; background:rgba(0,0,0,0.3); color:#e0e0e0; cursor:pointer; backdrop-filter:blur(6px); `; b.onmouseenter = () => { b.style.background = "rgba(0,0,0,0.5)"; }; b.onmouseleave = () => { b.style.background = "rgba(0,0,0,0.3)"; }; return b; } let rowBars = []; let rowSentinels = []; let activeRowIndex = 0; let rowCount = 0; const sentinelWrap = document.createElement("div"); sentinelWrap.style.cssText = "position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:-1;"; container.appendChild(sentinelWrap); const rowRatios = new Map(); const stickyObserver = new IntersectionObserver( (entries) => { for (const entry of entries) { const idx = parseInt(entry.target.dataset.rowIndex); rowRatios.set(idx, entry.intersectionRatio); } updateActiveRow(); }, { threshold: [0, 0.25, 0.5, 0.75, 0.9, 0.95, 1.0] } ); function updateActiveRow() { let newActive = -1; for (let r = 0; r < rowCount; r++) { const ratio = rowRatios.get(r) || 0; if (ratio > 0.95) { newActive = r; break; } } if (newActive < 0) { let bestRatio = -1; for (let r = 0; r < rowCount; r++) { const ratio = rowRatios.get(r) || 0; if (ratio > bestRatio) { bestRatio = ratio; newActive = r; } } } if (newActive < 0) newActive = 0; if (newActive === activeRowIndex) return; activeRowIndex = newActive; applyRowBarVisibility(); } function applyRowBarVisibility() { for (let r = 0; r < rowBars.length; r++) { const bar = rowBars[r].el; bar.style.opacity = r === activeRowIndex ? "1" : "0"; bar.style.pointerEvents = r === activeRowIndex ? "auto" : "none"; } } function computeRowScreenTops(numRows, containerHeight) { const tops = []; if (!currentLayout) return tops; const gridOffY = (numRows - 1) * cellSpacing / 2; camera.updateMatrixWorld(); camera.updateProjectionMatrix(); const projScreenMatrix = new THREE.Matrix4(); projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse); for (let r = 0; r < numRows; r++) { const worldY = -(r * cellSpacing - gridOffY); const v = new THREE.Vector4(0, worldY, 0, 1); v.applyMatrix4(projScreenMatrix); tops.push((1 - v.y / v.w) * 0.5 * containerHeight); } return tops; } function computeRowBands(numRows, containerHeight) { const centers = computeRowScreenTops(numRows, containerHeight); const bands = []; for (let r = 0; r < numRows; r++) { const bandTop = r === 0 ? 0 : (centers[r - 1] + centers[r]) / 2; const bandBottom = r === numRows - 1 ? containerHeight : (centers[r] + centers[r + 1]) / 2; bands.push({ top: bandTop, bottom: bandBottom, center: centers[r] }); } return bands; } function rebuildRowBars(numRows, containerHeight) { rowBars.forEach(b => b.el.remove()); rowSentinels.forEach(s => { stickyObserver.unobserve(s); s.remove(); }); rowBars = []; rowSentinels = []; rowRatios.clear(); rowCount = numRows; activeRowIndex = 0; const bands = computeRowBands(numRows, containerHeight); for (let r = 0; r < numRows; r++) { const barCenter = r === 0 ? 20 : bands[r].top; const bar = document.createElement("div"); bar.style.cssText = ` position: absolute; top: ${barCenter}px; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 10; display: flex; gap: 10px; opacity: ${r === 0 ? 1 : 0}; pointer-events: ${r === 0 ? "auto" : "none"}; transition: opacity 0.25s ease; `; const bInv = makeBtn("Negative"); const bRev = makeBtn("Reverse"); const bIso = makeBtn("Isocline"); bar.append(bInv, bRev, bIso); container.appendChild(bar); bInv.addEventListener("click", () => startAllGroupRotations(axisY)); bRev.addEventListener("click", () => startAllGroupRotations(axisX)); bIso.addEventListener("click", () => startAllGroupRotations(axisZ)); rowBars.push({ el: bar }); const bandH = bands[r].bottom - bands[r].top; const sentinel = document.createElement("div"); sentinel.style.cssText = `position:absolute; top:${bands[r].top}px; left:0; width:100%; height:${bandH}px;`; sentinel.dataset.rowIndex = r; sentinelWrap.appendChild(sentinel); stickyObserver.observe(sentinel); rowSentinels.push(sentinel); } } // ---- Scene & camera ---- const scene = new THREE.Scene(); scene.background = new THREE.Color(bgColor); const camera = new THREE.PerspectiveCamera(40, 5 / 4, 0.1, 100); camera.position.set(0, 0.6, 13); camera.lookAt(0, 0.2, 0); // ---- Lights ---- const lightGroup = new THREE.Group(); scene.add(lightGroup); lightGroup.add(new THREE.HemisphereLight(0xffffff, 0x080018, 0.8)); const dirLight = new THREE.DirectionalLight(0xffffff, 0.5); dirLight.position.set(0, 50, 0); lightGroup.add(dirLight); // ---- Build node meshes and group pivots ---- const groupPivots = []; const nodeMap = {}; const lineMat = new THREE.LineBasicMaterial({ color: wireColor, transparent: true, opacity: wireOpacity, }); allGroups.forEach((g) => { const outer = new THREE.Group(); scene.add(outer); const pivot = new THREE.Group(); outer.add(pivot); if (g.type === "quad") { const s = quadSize; const positions = [ { node: g.tl, x: -s, y: s }, { node: g.tr, x: s, y: s }, { node: g.bl, x: -s, y: -s }, { node: g.br, x: s, y: -s }, ]; positions.forEach(p => { const mesh = buildNode(p.node, thicknessGrid); mesh.position.set(p.x, p.y, 0); pivot.add(mesh); nodeMap[p.node] = { mesh, pivot, localX: p.x, localY: p.y }; }); const edges = [[-s,s, s,s], [s,s, s,-s], [s,-s, -s,-s], [-s,-s, -s,s], [-s,s, s,-s], [s,s, -s,-s]]; edges.forEach(([x1,y1,x2,y2]) => { const geom = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(x1, y1, -0.01), new THREE.Vector3(x2, y2, -0.01), ]); pivot.add(new THREE.Line(geom, lineMat)); }); } else { const s = pairSize; let posA, posB; if (g.horizontal) { posA = { x: -s, y: 0 }; posB = { x: s, y: 0 }; const geom = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(posA.x, posA.y, -0.01), new THREE.Vector3(posB.x, posB.y, -0.01), ]); pivot.add(new THREE.Line(geom, lineMat)); } else { posA = { x: 0, y: 0, z: s * 2.0 }; posB = { x: 0, y: 0, z: -s * 2.0 }; const geom = new THREE.BufferGeometry().setFromPoints([ new THREE.Vector3(0, -0.01, s * 2.0), new THREE.Vector3(0, -0.01, -s * 2.0), ]); pivot.add(new THREE.Line(geom, lineMat)); } const meshA = buildNode(g.a, thicknessGrid); meshA.position.set(posA.x, posA.y || 0, posA.z || 0); pivot.add(meshA); nodeMap[g.a] = { mesh: meshA, pivot }; const meshB = buildNode(g.b, thicknessGrid); meshB.position.set(posB.x, posB.y || 0, posB.z || 0); pivot.add(meshB); nodeMap[g.b] = { mesh: meshB, pivot }; } groupPivots.push({ pivot, outer, group: g }); }); // ---- Apply layout ---- let currentCols = -1; let currentLayout = null; function applyLayout(containerWidth) { const numCols = Math.max(2, Math.min(5, Math.floor(containerWidth / minCellPx))); if (numCols === currentCols) return false; currentCols = numCols; const layout = computeLayout(numCols); currentLayout = layout; const gridOffX = (layout.cols - 1) * cellSpacing / 2; const gridOffY = (layout.rows - 1) * cellSpacing / 2; for (let i = 0; i < allGroups.length; i++) { const { col, row } = layout.positions[i]; groupPivots[i].outer.position.set(col * cellSpacing - gridOffX, -(row * cellSpacing - gridOffY), 0); } const aspect = layout.cols / layout.rows; const fovRad = camera.fov * Math.PI / 180; const gridWorldH = (layout.rows - 1) * cellSpacing + 2.0; const gridWorldW = (layout.cols - 1) * cellSpacing + 2.0; const dist = Math.max((gridWorldH / 2) / Math.tan(fovRad / 2), (gridWorldW / 2) / (aspect * Math.tan(fovRad / 2))) * 1.05; camera.position.set(0, 0.3, dist); camera.lookAt(0, 0, 0); return true; } // ---- Drag rotation ---- let dragTheta = 0.4; let isDragging = false; let dragLocked = false; let prevPointerX = 0; let startPointer = { x: 0, y: 0 }; const dragThreshold = 6; renderer.domElement.addEventListener("pointerdown", e => { isDragging = true; dragLocked = false; startPointer = { x: e.clientX, y: e.clientY }; prevPointerX = e.clientX; }); window.addEventListener("pointerup", () => { isDragging = false; dragLocked = false; }); window.addEventListener("pointermove", e => { if (!isDragging) return; if (!dragLocked) { const dx = Math.abs(e.clientX - startPointer.x); const dy = Math.abs(e.clientY - startPointer.y); if (Math.sqrt(dx * dx + dy * dy) < dragThreshold) return; if (dx > dy) dragLocked = true; else { isDragging = false; return; } } dragTheta += (e.clientX - prevPointerX) * 0.005; prevPointerX = e.clientX; }); // ---- Rotation animations ---- function easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; } function getDragQuat() { return new THREE.Quaternion().setFromAxisAngle(new THREE.Vector3(0, 1, 0), dragTheta); } const groupAnims = groupPivots.map(() => ({ baseQuat: new THREE.Quaternion(), active: [] })); function startAllGroupRotations(axis) { groupAnims.forEach(ga => { ga.active.push({ axis: axis.clone(), elapsed: 0, duration: animDuration }); }); } const axisY = new THREE.Vector3(0, 1, 0); const axisX = new THREE.Vector3(1, 0, 0); const axisZ = new THREE.Vector3(0, 0, 1); // ---- Animation loop ---- let lastTime = performance.now(); let disposed = false; function animate(now) { if (disposed) return; requestAnimationFrame(animate); const dt = (now - lastTime) / 1000; lastTime = now; const dragQuat = getDragQuat(); lightGroup.quaternion.copy(dragQuat); for (let i = 0; i < groupAnims.length; i++) { const ga = groupAnims[i]; for (let j = ga.active.length - 1; j >= 0; j--) { const anim = ga.active[j]; anim.elapsed += dt; if (anim.elapsed >= anim.duration) { ga.baseQuat.premultiply(new THREE.Quaternion().setFromAxisAngle(anim.axis, Math.PI)); ga.active.splice(j, 1); } } const btnResult = ga.baseQuat.clone(); for (const anim of ga.active) { btnResult.premultiply(new THREE.Quaternion().setFromAxisAngle(anim.axis, Math.PI * easeInOutCubic(Math.min(anim.elapsed / anim.duration, 1)))); } groupPivots[i].pivot.quaternion.copy(dragQuat.clone().multiply(btnResult)); } renderer.render(scene, camera); } animate(performance.now()); // ---- Responsive resize ---- let lastContainerHeight = 0; function resize(w) { applyLayout(w); const layout = currentLayout; const aspect = layout.cols / layout.rows; const h = w / aspect; container.style.height = h + "px"; renderer.setSize(w, h); camera.aspect = aspect; camera.updateProjectionMatrix(); if (layout.rows !== rowCount || Math.abs(h - lastContainerHeight) > 1) { lastContainerHeight = h; rebuildRowBars(layout.rows, h); } } const ro = new ResizeObserver(entries => { const w = entries[0].contentRect.width; if (w > 0) resize(w); }); ro.observe(container); invalidation.then(() => { disposed = true; ro.disconnect(); stickyObserver.disconnect(); renderer.dispose(); }); return container; }37:T9e75,bitShift = { const PALETTE = config.edgeColors; const BG = config.bgColor; const R = 8; const BACK_FOG = 0.7; const TWO_PI = Math.PI * 2; const HEIGHT = config.sceneHeight; const bgCss = `#${BG.toString(16).padStart(6, "0")}`; const FONT_FAMILY = fonts; const { makeSelect, addField, easeInOutCubic, labelTextFor, reverseBits6 } = kfHelp; const container = document.createElement("div"); container.style.cssText = `width:100%; display:flex; flex-direction:column;`; const controls = document.createElement("div"); controls.style.cssText = `display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:8px 10px;`; container.appendChild(controls); const select = makeSelect(``); addField(controls, "layout", select); const labelSelect = makeSelect( `` + `` + `` + `` + `` + `` + `` + `` ); addField(controls, "label", labelSelect); const linesSelect = makeSelect( `` + `` ); addField(controls, "lines", linesSelect); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setPixelRatio(Math.min(devicePixelRatio, 2)); renderer.setClearColor(BG, 1); renderer.domElement.style.cssText = "display:block; touch-action:none; cursor:grab;"; const sceneWrap = document.createElement("div"); sceneWrap.style.cssText = "position:relative; width:100%;"; sceneWrap.appendChild(renderer.domElement); container.appendChild(sceneWrap); const scene = new THREE.Scene(); scene.fog = new THREE.Fog(BG, 1, 100); const camera = new THREE.PerspectiveCamera(45, 16 / 9, 0.1, 1000); const lattice = new THREE.Group(); scene.add(lattice); let disposed = false, frame = 0, visible = true, needsRender = true; let fogRadius = 12; function requestRender() { needsRender = true; } const WHITE_FLOOR = 0.8, WHITE_DIR = 0.6; const DARK_LIT = 0.20; const worldLightDir = new THREE.Vector3(0, 1, 0); const LIGHT_RIGHT = 0.55, LIGHT_UP = 1.5, LIGHT_BACK = 1.0; const HOVER_OUTLINE = config.hoverOutlineColor; const NODE_DIM = config.nodeDimOpacity; const EDGE_BASE = config.edgeBaseOpacity, EDGE_BRIGHT = config.edgeBrightOpacity; const EDGE_DIM = config.edgeBaseOpacity * config.edgeDimMultiplier; const CYCLE_BASE = 0.6, CYCLE_BRIGHT = 0.9, CYCLE_DIM = 0.12; const SIDES = 12, RD = 0.5, H = 0.72; const RI = RD - (2 * RD) / 16; const bp = []; function vtx(p) { bp.push(p[0], p[1], p[2]); } function tri(A, B, C) { vtx(A); vtx(B); vtx(C); } function quad(A, B, C, D) { tri(A, B, C); tri(A, C, D); } for (let k = 0; k < SIDES; k++) { const a0 = k / SIDES * TWO_PI, a1 = (k + 1) / SIDES * TWO_PI; const c0 = Math.cos(a0), s0 = Math.sin(a0), c1 = Math.cos(a1), s1 = Math.sin(a1); const x0 = -H / 2, x1 = H / 2; const Oa0 = [x0, RD * c0, RD * s0], Ob0 = [x0, RD * c1, RD * s1], Oa1 = [x1, RD * c0, RD * s0], Ob1 = [x1, RD * c1, RD * s1]; const Ia0 = [x0, RI * c0, RI * s0], Ib0 = [x0, RI * c1, RI * s1], Ia1 = [x1, RI * c0, RI * s0], Ib1 = [x1, RI * c1, RI * s1]; quad(Oa0, Ob0, Ob1, Oa1); quad(Ia0, Ia1, Ib1, Ib0); quad(Oa0, Ia0, Ib0, Ob0); quad(Oa1, Ob1, Ib1, Ia1); } const STRIDE = 24; const basePos = new THREE.Float32BufferAttribute(new Float32Array(bp), 3); const baseNorm = (function () { const tmp = new THREE.BufferGeometry(); tmp.addAttribute('position', basePos); tmp.computeVertexNormals(); return tmp.attributes.normal; })(); const drumVert = ` varying vec3 vLocalPos; varying vec3 vNormalL; varying float vViewZ; void main() { vLocalPos = position; vNormalL = normal; vec4 mv = modelViewMatrix * vec4(position, 1.0); vViewZ = -mv.z; gl_Position = projectionMatrix * mv; }`; const drumFrag = ` precision highp float; uniform vec3 uBaseColor; uniform vec3 uLightLocal; uniform float uEmis; uniform float uDir; uniform float uOpacity; uniform vec3 uFogColor; uniform float uFogNear; uniform float uFogFar; uniform float uHalf; varying vec3 vLocalPos; varying vec3 vNormalL; varying float vViewZ; void main() { vec3 N = normalize(vNormalL); vec3 L = normalize(uLightLocal); float diff = max(dot(N, L), 0.0); float vis = 1.0; if (abs(N.x) < 0.5 && dot(N.yz, vLocalPos.yz) < 0.0) { float kk = vLocalPos.y * L.y + vLocalPos.z * L.z; float perp2 = L.y * L.y + L.z * L.z; if (kk < 0.0 && perp2 > 1e-5) { float tFar = -2.0 * kk / perp2; float xFar = vLocalPos.x + L.x * tFar; vis = smoothstep(uHalf - 0.012, uHalf + 0.012, abs(xFar)); } } vec3 col = uBaseColor * (uEmis + uDir * diff * vis); float fogF = clamp((vViewZ - uFogNear) / (uFogFar - uFogNear), 0.0, 1.0); col = mix(col, uFogColor, fogF); gl_FragColor = vec4(col, uOpacity); }`; function makeDrumMat(baseColor, emis, dir) { return new THREE.ShaderMaterial({ uniforms: { uBaseColor: { value: baseColor.clone() }, uLightLocal: { value: new THREE.Vector3(0, 1, 0) }, uEmis: { value: emis }, uDir: { value: dir }, uOpacity: { value: 1 }, uFogColor: { value: new THREE.Color(BG) }, uFogNear: { value: 1 }, uFogFar: { value: 100 }, uHalf: { value: H / 2 }, }, vertexShader: drumVert, fragmentShader: drumFrag, transparent: true, }); } const blackMat = makeDrumMat(new THREE.Color(DARK_LIT, DARK_LIT, DARK_LIT), 0.0, 1.0); const whiteMat = makeDrumMat(new THREE.Color(1, 1, 1), WHITE_FLOOR, WHITE_DIR); function makeDrum(v) { const g = new THREE.BufferGeometry(); g.addAttribute('position', basePos); g.addAttribute('normal', baseNorm); for (let k = 0; k < SIDES; k++) { const bit = (v >> (k % 6)) & 1; g.addGroup(k * STRIDE, STRIDE, bit); } g.computeBoundingSphere(); const mats = [blackMat.clone(), whiteMat.clone()]; const mesh = new THREE.Mesh(g, mats); mesh.userData.mats = mats; return mesh; } function rotl6(v) { return ((v << 1) | (v >> 5)) & 63; } function popcount(v) { let c = 0; while (v) { c += v & 1; v >>= 1; } return c; } const cycles = []; const cycleOf = new Array(64); const idxOf = new Array(64); { const seen = new Array(64).fill(false); for (let v = 0; v < 64; v++) { if (seen[v]) continue; const members = []; let cur = v; do { members.push(cur); seen[cur] = true; cur = rotl6(cur); } while (cur !== v); const c = { members, n: members.length, weight: popcount(v), cx: 0, rad: 0, phase: 0, dir: 1 }; const ci = cycles.length; members.forEach((m, i) => { cycleOf[m] = ci; idxOf[m] = i; }); cycles.push(c); } } const DX2 = 0.0, DX3 = 0.0; for (let w = 0; w <= 6; w++) { const theta = Math.PI * w / 6; const xc = -R * Math.cos(theta); const rho = R * Math.sin(theta); const cs = cycles.filter(c => c.weight === w); const big = cs.filter(c => c.n === 6); const mid = cs.filter(c => c.n === 3); const two = cs.filter(c => c.n === 2); const one = cs.filter(c => c.n === 1); one.forEach(c => { c.cx = xc; c.rad = 0; }); if (w === 1 || w === 5) { big[0].cx = xc; big[0].rad = rho; } else if (w === 2 || w === 4) { big[0].cx = xc - DX2; big[0].rad = rho; big[1].cx = xc + DX2; big[1].rad = rho; if (mid[0]) { mid[0].cx = xc; mid[0].rad = rho / 8; } } else if (w === 3) { big[0].cx = 0; big[0].rad = R; big[1].cx = -DX3; big[1].rad = R; big[2].cx = +DX3; big[2].rad = R; if (two[0]) { two[0].cx = 0; two[0].rad = R / 8; } } } const pos = []; for (let i = 0; i < 64; i++) pos[i] = new THREE.Vector3(); function placeCycle(c) { if (c.n === 1) { pos[c.members[0]].set(c.cx, 0, 0); return; } for (let i = 0; i < c.n; i++) { const ang = c.phase + c.dir * (i * TWO_PI / c.n); pos[c.members[i]].set(c.cx, c.rad * Math.cos(ang), c.rad * Math.sin(ang)); } } cycles.forEach(placeCycle); const edges = []; for (let v = 0; v < 64; v++) { for (let j = 0; j < 6; j++) { const u = v ^ (1 << j); if (u > v) edges.push({ a: v, b: u, bit: j }); } } const incident = cycles.map(() => []); edges.forEach(e => { incident[cycleOf[e.a]].push(e); if (cycleOf[e.b] !== cycleOf[e.a]) incident[cycleOf[e.b]].push(e); }); function linksToWeight(c, w) { const ci = cycleOf[c.members[0]]; const out = []; for (const e of incident[ci]) { const aIn = cycleOf[e.a] === ci; const me = aIn ? e.a : e.b, other = aIn ? e.b : e.a; if (popcount(other) === w) out.push([me, other]); } return out; } function rotateCycleToMin(c, w) { const links = linksToWeight(c, w); const STEPS = 720; let best = Infinity, bestPhase = c.phase; for (let s = 0; s < STEPS; s++) { c.phase = s / STEPS * TWO_PI; placeCycle(c); let sum = 0; for (const L of links) sum += pos[L[0]].distanceToSquared(pos[L[1]]); if (sum < best) { best = sum; bestPhase = c.phase; } } c.phase = bestPhase; placeCycle(c); } { const c = cycles.find(x => x.weight === 1); c.dir = 1; c.phase = Math.PI / 2; placeCycle(c); } for (let w = 2; w <= 3; w++) { for (const c of cycles) { if (c.weight === w) rotateCycleToMin(c, w - 1); } } for (let ci = 0; ci < cycles.length; ci++) { const c = cycles[ci]; if (c.weight > 2) continue; const m0 = c.members[0]; const vc0 = (~m0) & 63; const cc = cycles[cycleOf[vc0]]; const k0 = idxOf[vc0]; cc.cx = -c.cx; cc.rad = c.rad; cc.dir = c.dir; cc.phase = c.phase + Math.PI - c.dir * k0 * (TWO_PI / c.n); placeCycle(cc); } const posGlobe = pos.map(p => p.clone()); const posLattice = (function () { const stepX = R / 3, rPerp = R / 2; const lat = []; for (let v = 0; v < 64; v++) { let x = (popcount(v) - 3) * stepX, y = 0, z = 0; for (let j = 0; j < 6; j++) { if ((v >> j) & 1) { const th = Math.PI / 2 + j * TWO_PI / 6; y += rPerp * Math.cos(th); z += rPerp * Math.sin(th); } } lat[v] = new THREE.Vector3(x, y, z); } const EPS = 1e-4, used = new Array(64).fill(false), clusters = []; for (let i = 0; i < 64; i++) { if (used[i]) continue; const grp = [i]; used[i] = true; for (let k = i + 1; k < 64; k++) { if (!used[k] && lat[k].distanceTo(lat[i]) < EPS) { grp.push(k); used[k] = true; } } if (grp.length > 1) clusters.push(grp); } const SEP = 0.7, crossCycles = new Set(); for (const grp of clusters) { const cset = new Set(grp.map(v => cycleOf[v])); if (cset.size === 1) { const cx = lat[grp[0]].x, cy = lat[grp[0]].y, cz = lat[grp[0]].z; for (let g = 0; g < grp.length; g++) { const a = Math.PI / 2 + g * TWO_PI / grp.length; lat[grp[g]] = new THREE.Vector3(cx, cy + SEP * Math.cos(a), cz + SEP * Math.sin(a)); } } else { cset.forEach(ci => crossCycles.add(ci)); } } const DELTA = 0.15; [...crossCycles].sort((a, b) => a - b).forEach((ci, idx) => { const ang = (idx % 2 === 0 ? 1 : -1) * DELTA, ca = Math.cos(ang), sa = Math.sin(ang); for (const v of cycles[ci].members) { const y = lat[v].y, z = lat[v].z; lat[v].y = y * ca - z * sa; lat[v].z = y * sa + z * ca; } }); for (let v = 0; v < 64; v++) { if (popcount(v) >= 4) lat[v] = lat[(~v) & 63].clone().multiplyScalar(-1); } return lat; })(); for (let v = 0; v < 64; v++) { posLattice[v].x += (popcount(v) - 3) * H; } const drumMeshes = [], nodeMats = [], outlineMeshes = [], hitSpheres = []; const outlineMat = new THREE.MeshBasicMaterial({ color: HOVER_OUTLINE, side: THREE.BackSide, transparent: true, depthWrite: false }); const outlineGeo = (function () { const ro = RD + 0.05, ri = RI - 0.05, hl = H / 2 + 0.06, arr = []; const P = p => arr.push(p[0], p[1], p[2]); const T = (a, b, c) => { P(a); P(b); P(c); }; const Q = (a, b, c, d) => { T(a, b, c); T(a, c, d); }; for (let k = 0; k < SIDES; k++) { const a0 = k / SIDES * TWO_PI, a1 = (k + 1) / SIDES * TWO_PI; const c0 = Math.cos(a0), s0 = Math.sin(a0), c1 = Math.cos(a1), s1 = Math.sin(a1); const Oa0 = [-hl, ro*c0, ro*s0], Ob0 = [-hl, ro*c1, ro*s1], Oa1 = [hl, ro*c0, ro*s0], Ob1 = [hl, ro*c1, ro*s1]; const Ia0 = [-hl, ri*c0, ri*s0], Ib0 = [-hl, ri*c1, ri*s1], Ia1 = [hl, ri*c0, ri*s0], Ib1 = [hl, ri*c1, ri*s1]; Q(Oa0, Ob0, Ob1, Oa1); Q(Ia0, Ia1, Ib1, Ib0); Q(Oa0, Ia0, Ib0, Ob0); Q(Oa1, Ob1, Ib1, Ia1); } const g = new THREE.BufferGeometry(); g.addAttribute('position', new THREE.Float32BufferAttribute(new Float32Array(arr), 3)); g.computeBoundingSphere(); return g; })(); const hitGeo = new THREE.SphereGeometry(0.62, 8, 8); const hitMat = new THREE.MeshBasicMaterial({ visible: false }); for (let v = 0; v < 64; v++) { const m = makeDrum(v); drumMeshes[v] = m; nodeMats[v] = m.userData.mats; lattice.add(m); const outline = new THREE.Mesh(outlineGeo, outlineMat); outline.renderOrder = 1; outline.visible = false; m.add(outline); outlineMeshes[v] = outline; const hit = new THREE.Mesh(hitGeo, hitMat); hit.userData.nodeIndex = v; m.add(hit); hitSpheres[v] = hit; } const cycleObjs = []; cycles.forEach((c, ci) => { if (c.n < 2) return; const g = new THREE.BufferGeometry(); g.addAttribute('position', new THREE.Float32BufferAttribute(new Float32Array(c.n * 3), 3)); const mat = new THREE.LineBasicMaterial({ color: 0x000000, transparent: true, opacity: CYCLE_BASE }); const loop = new THREE.LineLoop(g, mat); loop.frustumCulled = false; cycleObjs.push({ loop, members: c.members, cycleIndex: ci }); lattice.add(loop); }); const edgeObjs = []; edges.forEach(e => { const g = new THREE.BufferGeometry(); g.addAttribute('position', new THREE.Float32BufferAttribute(new Float32Array(6), 3)); const mat = new THREE.LineBasicMaterial({ color: PALETTE[e.bit], transparent: true, opacity: EDGE_BASE, depthWrite: false, blending: THREE.AdditiveBlending, fog: false }); const line = new THREE.Line(g, mat); line.frustumCulled = false; line.renderOrder = 1; edgeObjs.push({ line, a: e.a, b: e.b, bit: e.bit, baseOpacity: EDGE_BASE, mid: new THREE.Vector3() }); lattice.add(line); }); const LABEL_FONT_PX = 64, LABEL_LINE = 12; const _asc = LABEL_FONT_PX * 0.80, _desc = LABEL_FONT_PX * 0.22; const LABEL_CANVAS_H = Math.ceil(LABEL_LINE + _asc + _desc + LABEL_LINE); const LABEL_FONT = `600 ${LABEL_FONT_PX}px "${FONT_FAMILY}", monospace`; const HEX_FONT = `600 ${LABEL_FONT_PX}px monospace`; const PLATE_H_BY_MODE = { kingwen: 0.5, hexagram: 0.5, numname: 0.34, name: 0.34, binary: 0.34, numhex: 0.4 }; const LABEL_INSET = 0.5 - LABEL_LINE / LABEL_CANVAS_H; function makeNameTexture(text, font = LABEL_FONT, fill = "#ffffff") { const canvas = document.createElement("canvas"); const ctx = canvas.getContext("2d"); ctx.font = font; canvas.width = Math.ceil(ctx.measureText(text).width + LABEL_LINE * 2); canvas.height = LABEL_CANVAS_H; ctx.font = font; ctx.textAlign = "center"; ctx.textBaseline = "alphabetic"; ctx.lineJoin = "round"; ctx.miterLimit = 2; ctx.lineWidth = LABEL_LINE; const bx = canvas.width / 2, by = LABEL_LINE + _asc; ctx.strokeStyle = bgCss; ctx.strokeText(text, bx, by); ctx.fillStyle = fill; ctx.fillText(text, bx, by); const tex = new THREE.CanvasTexture(canvas); tex.minFilter = tex.magFilter = THREE.LinearFilter; tex.generateMipmaps = false; return { tex, aspect: canvas.width / canvas.height }; } const texByMode = {}; function getTex(mode, v) { const arr = texByMode[mode] || (texByMode[mode] = []); return arr[v] || (arr[v] = makeNameTexture(labelTextFor(mode, v), mode === "hexagram" ? HEX_FONT : LABEL_FONT)); } const plateMeshes = []; for (let v = 0; v < 64; v++) { const mat = new THREE.MeshBasicMaterial({ transparent: true, side: THREE.FrontSide, depthWrite: false }); const mesh = new THREE.Mesh(new THREE.PlaneGeometry(1, 1), mat); mesh.visible = false; mesh.renderOrder = 2; mesh.userData.shownKey = ""; lattice.add(mesh); plateMeshes[v] = mesh; } const digitGeo = new THREE.PlaneGeometry(1, 1); const digitTexCache = {}; function getDigitTex(ch) { return digitTexCache[ch] || (digitTexCache[ch] = makeNameTexture(ch, LABEL_FONT, ch === "0" ? "#000000" : "#ffffff")); } const DIGIT_H = 0.26; const DIGIT_RADIUS = RD; const DIGIT_X_OFF = H / 2 + 0.12; const bitDigitMeshes = []; for (let v = 0; v < 64; v++) { const arr = []; for (let k = 0; k < SIDES; k++) { const bitVal = (v >> (k % 6)) & 1; const t = getDigitTex(bitVal ? "1" : "0"); const mat = new THREE.MeshBasicMaterial({ transparent: true, side: THREE.FrontSide, depthWrite: false, map: t.tex }); const mesh = new THREE.Mesh(digitGeo, mat); mesh.scale.set(DIGIT_H * t.aspect, DIGIT_H, 1); mesh.visible = false; mesh.renderOrder = 2; mesh.userData.facet = k; lattice.add(mesh); arr.push(mesh); } bitDigitMeshes[v] = arr; } let labelMode = labelSelect.value; labelSelect.addEventListener("change", () => { labelMode = labelSelect.value; const showsBinary = labelMode === "binary" || labelMode === "namebin"; const showsPlate = !(labelMode === "none" || labelMode === "binary"); if (!showsPlate) for (const m of plateMeshes) m.visible = false; if (!showsBinary) for (const arr of bitDigitMeshes) for (const m of arr) m.visible = false; requestRender(); }); const rotr6 = (x, p) => ((x >> p) | (x << (6 - p))) & 63; function applyLayout(P) { for (let v = 0; v < 64; v++) drumMeshes[v].position.copy(P[v]); for (const co of cycleObjs) { const arr = co.loop.geometry.attributes.position.array; co.members.forEach((m, i) => { arr[i * 3] = P[m].x; arr[i * 3 + 1] = P[m].y; arr[i * 3 + 2] = P[m].z; }); co.loop.geometry.attributes.position.needsUpdate = true; co.loop.geometry.computeBoundingSphere(); } const endOff = H / 2; for (const eo of edgeObjs) { const arr = eo.line.geometry.attributes.position.array; const a = P[eo.a], b = P[eo.b]; const s = Math.sign(b.x - a.x) * endOff; arr[0] = a.x + s; arr[1] = a.y; arr[2] = a.z; arr[3] = b.x - s; arr[4] = b.y; arr[5] = b.z; eo.mid.set((a.x + b.x) / 2, (a.y + b.y) / 2, (a.z + b.z) / 2); eo.line.geometry.attributes.position.needsUpdate = true; eo.line.geometry.computeBoundingSphere(); } let fr = 0; for (let v = 0; v < 64; v++) fr = Math.max(fr, P[v].length()); fogRadius = fr + 0.7; requestRender(); } const dispPos = (select.value === 'lattice' ? posLattice : posGlobe).map(p => p.clone()); applyLayout(dispPos); const POS_DUR = 1000; const posAnims = [], posBase = [], posPend = []; function startPosAnim(tgt) { if (!posAnims.length) for (let v = 0; v < 64; v++) { posBase[v] = (posBase[v] || new THREE.Vector3()).copy(dispPos[v]); posPend[v] = (posPend[v] || new THREE.Vector3()).copy(dispPos[v]); } const d = []; for (let v = 0; v < 64; v++) { d[v] = tgt[v].clone().sub(posPend[v]); posPend[v].copy(tgt[v]); } posAnims.push({ d, start: performance.now() }); requestRender(); } select.addEventListener('change', e => { startPosAnim(e.target.value === 'lattice' ? posLattice : posGlobe); }); let linesMode = linesSelect.value; linesSelect.addEventListener('change', () => { linesMode = linesSelect.value; if (linesMode === "centered") applyLayout(dispPos); requestRender(); }); let highlightSet = null; let displaySet = null; let displayCenter = -1; let activeCycle = -1; let hoveredIndex = -1; let dimAmt = 0; function applyHighlightOpacities() { const e = dimAmt * dimAmt * (3 - 2 * dimAmt); const set = displaySet; for (let v = 0; v < 64; v++) { const tgt = (!set || set.has(v)) ? 1 : NODE_DIM; const op = 1 + (tgt - 1) * e; for (const m of nodeMats[v]) m.uniforms.uOpacity.value = op; plateMeshes[v].material.opacity = op; const lit = !!(set && set.has(v)); plateMeshes[v].material.depthTest = !lit; plateMeshes[v].renderOrder = lit ? 3 : 2; const digs = bitDigitMeshes[v]; for (const m of digs) { m.material.opacity = op; m.material.depthTest = !lit; m.renderOrder = lit ? 3 : 2; } } for (const eo of edgeObjs) { const active = !!set && displayCenter >= 0 && (eo.a === displayCenter || eo.b === displayCenter); const tgt = !set ? EDGE_BASE : (active ? EDGE_BRIGHT : EDGE_DIM); eo.baseOpacity = EDGE_BASE + (tgt - EDGE_BASE) * e; } for (const co of cycleObjs) { const active = set && co.cycleIndex === activeCycle; const tgt = !set ? CYCLE_BASE : (active ? CYCLE_BRIGHT : CYCLE_DIM); co.loop.material.opacity = CYCLE_BASE + (tgt - CYCLE_BASE) * e; } } function setHover(idx) { if (idx === hoveredIndex) return; if (hoveredIndex >= 0) outlineMeshes[hoveredIndex].visible = false; hoveredIndex = idx; if (idx >= 0) { outlineMeshes[idx].visible = true; const set = new Set([idx]); for (let b = 0; b < 6; b++) set.add(idx ^ (1 << b)); for (const m of cycles[cycleOf[idx]].members) set.add(m); highlightSet = set; displaySet = set; activeCycle = cycleOf[idx]; displayCenter = idx; } else { highlightSet = null; activeCycle = -1; } applyHighlightOpacities(); requestRender(); } const raycaster = new THREE.Raycaster(); const ndc = new THREE.Vector2(); function pickNode(ev) { const rect = dom.getBoundingClientRect(); ndc.x = ((ev.clientX - rect.left) / rect.width) * 2 - 1; ndc.y = -((ev.clientY - rect.top) / rect.height) * 2 + 1; lattice.updateMatrixWorld(); raycaster.setFromCamera(ndc, camera); const hits = raycaster.intersectObjects(hitSpheres, false); return hits.length ? hits[0].object.userData.nodeIndex : -1; } let azim = 0.5, elev = 0.0, dist = 27; let distTarget = dist; const ZOOM_MIN = 4, ZOOM_MAX = 140; const WHEEL_GAIN = 0.0008; const DRAG_ZOOM_GAIN = 0.004; const clampZoom = z => Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, z)); const START_DIST = dist; const FOCUS_DIST = clampZoom(dist * 0.3); const panOffset = new THREE.Vector3(); const panTarget = new THREE.Vector3(); function updateCamera() { const ce = Math.cos(elev), se = Math.sin(elev); camera.position.set(panOffset.x + dist * Math.sin(azim) * ce, panOffset.y + dist * se, panOffset.z + dist * Math.cos(azim) * ce); camera.up.set(0, 1, 0); camera.lookAt(panOffset); camera.updateMatrixWorld(); requestRender(); } const _pr = new THREE.Vector3(), _pu = new THREE.Vector3(); function pan2D(dxPixels, dyPixels) { const wpp = 2 * dist * Math.tan(camera.fov * Math.PI / 360) / Math.max(1, dom.clientHeight); const ce = Math.cos(elev), se = Math.sin(elev); _pr.set(Math.cos(azim), 0, -Math.sin(azim)); _pu.set(-Math.sin(azim) * se, ce, -Math.cos(azim) * se); panOffset.addScaledVector(_pr, -dxPixels * wpp).addScaledVector(_pu, dyPixels * wpp); panTarget.copy(panOffset); updateCamera(); } function rotateAboutX(v, ang) { const c = Math.cos(ang), s = Math.sin(ang); const y = v.y, z = v.z; v.y = y * c - z * s; v.z = y * s + z * c; } const dom = renderer.domElement; dom.style.cursor = "grab"; let dragging = false, lastX = 0, lastY = 0; let panMode = false; let zoomMode = false; let downX = 0, downY = 0; let lastTapTime = 0, lastTapX = 0, lastTapY = 0; let pinchMidX0 = 0, pinchMidY0 = 0; let rotAnim = null; let pointerInside = false; dom.addEventListener('pointerenter', () => { pointerInside = true; requestRender(); }); dom.addEventListener('pointerleave', () => { pointerInside = false; }); const pointers = new Map(); let pinchDist0 = 0, pinchZoom0 = 0; dom.addEventListener('contextmenu', e => e.preventDefault()); function centerOn(ev) { const idx = pickNode(ev); if (idx >= 0) { lattice.updateMatrixWorld(); panTarget.copy(drumMeshes[idx].position).applyMatrix4(lattice.matrixWorld); distTarget = FOCUS_DIST; } else { panTarget.set(0, 0, 0); distTarget = START_DIST; } requestRender(); } dom.addEventListener('pointerdown', e => { e.preventDefault(); pointers.set(e.pointerId, { x: e.clientX, y: e.clientY }); rotAnim = null; panTarget.copy(panOffset); downX = e.clientX; downY = e.clientY; dom.setPointerCapture(e.pointerId); if (pointers.size === 2) { dragging = false; panMode = false; zoomMode = false; const [a, b] = [...pointers.values()]; pinchDist0 = Math.hypot(a.x - b.x, a.y - b.y); pinchZoom0 = distTarget; pinchMidX0 = (a.x + b.x) / 2; pinchMidY0 = (a.y + b.y) / 2; } else { panMode = (e.button === 2); zoomMode = (e.button === 1); dragging = true; lastX = e.clientX; lastY = e.clientY; dom.style.cursor = zoomMode ? "ns-resize" : panMode ? "all-scroll" : "grabbing"; } requestRender(); }); function endPointer(e) { pointers.delete(e.pointerId); if (pointers.size < 2) pinchDist0 = 0; if (pointers.size === 1) { const [p] = [...pointers.values()]; dragging = true; panMode = false; zoomMode = false; lastX = p.x; lastY = p.y; } else if (pointers.size === 0) { dragging = false; panMode = false; zoomMode = false; dom.style.cursor = "grab"; } } dom.addEventListener('pointerup', e => { const wasPan = panMode || zoomMode; const moved = Math.hypot(e.clientX - downX, e.clientY - downY); endPointer(e); if (pointers.size > 0) return; if (moved < 6 && !wasPan) { centerOn(e); return; } setHover(pickNode(e)); }); dom.addEventListener('pointercancel', e => { endPointer(e); }); dom.addEventListener('pointerleave', () => { if (!dragging && pointers.size === 0) setHover(-1); }); dom.addEventListener('pointermove', e => { if (pointers.has(e.pointerId)) pointers.set(e.pointerId, { x: e.clientX, y: e.clientY }); if (pointers.size === 2) { const [a, b] = [...pointers.values()]; const d = Math.hypot(a.x - b.x, a.y - b.y); if (pinchDist0 > 0 && d > 0) distTarget = clampZoom(pinchZoom0 * (pinchDist0 / d)); const midX = (a.x + b.x) / 2, midY = (a.y + b.y) / 2; const mdx = midX - pinchMidX0, mdy = midY - pinchMidY0; pinchMidX0 = midX; pinchMidY0 = midY; pan2D(mdx, mdy); return; } if (dragging) { const dx = e.clientX - lastX, dy = e.clientY - lastY; lastX = e.clientX; lastY = e.clientY; if (zoomMode) { distTarget = clampZoom(distTarget * Math.exp(dy * DRAG_ZOOM_GAIN)); } else if (panMode) { pan2D(dx, dy); } else { azim -= dx * 0.005; const dRot = dy * 0.006 * Math.cos(azim); lattice.rotation.x += dRot; rotateAboutX(panOffset, dRot); panTarget.copy(panOffset); updateCamera(); } } else { const hid = pickNode(e); setHover(hid); dom.style.cursor = hid >= 0 ? "pointer" : "grab"; } }); dom.addEventListener('wheel', e => { e.preventDefault(); distTarget = clampZoom(distTarget * Math.exp(e.deltaY * WHEEL_GAIN)); requestRender(); }, { passive: false }); const ROT_STEP = Math.PI / 3; const ROT_STEP_HALF = Math.PI / 6; function rotateLattice(dir, step) { const side = camera.position.z >= 0 ? 1 : -1; const from = rotAnim ? rotAnim.to : lattice.rotation.x; rotAnim = { from, to: from + dir * side * step, start: performance.now(), dur: 350 }; requestRender(); } const UI_FG = "#e0e0e0"; const UI_BG = "rgba(0,0,0,0.3)"; const UI_BG_HOVER = "rgba(0,0,0,0.5)"; const UI_BORDER = "rgba(255,255,255,0.35)"; const rotBar = document.createElement("div"); rotBar.style.cssText = `position:absolute; right:14px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; z-index:10;`; function arrowBtn(up, dbl, step) { const b = document.createElement("button"); const glyph = dbl ? (up ? `` : ``) : (up ? `` : ``); b.innerHTML = ``; b.title = (up ? "Shift up " : "Shift down ") + (dbl ? "1/6 turn" : "1/12 turn"); b.style.cssText = `display:flex; align-items:center; justify-content:center; width:30px; height:30px; padding:0; border:1px solid ${UI_BORDER}; border-radius:4px; background:${UI_BG}; cursor:pointer; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);`; b.onmouseenter = () => { b.style.background = UI_BG_HOVER; }; b.onmouseleave = () => { b.style.background = UI_BG; }; b.onclick = () => rotateLattice(up ? -1 : 1, step); return b; } const rotLabel = document.createElement("div"); rotLabel.textContent = "shift"; rotLabel.style.cssText = `font:600 13px/1 "${FONT_FAMILY}", monospace; letter-spacing:0.04em;` + `color:${UI_FG}; -webkit-text-stroke:3px ${bgCss}; paint-order:stroke fill;`; rotBar.append( arrowBtn(true, true, ROT_STEP), arrowBtn(true, false, ROT_STEP_HALF), rotLabel, arrowBtn(false, false, ROT_STEP_HALF), arrowBtn(false, true, ROT_STEP) ); sceneWrap.appendChild(rotBar); const X_AXIS = new THREE.Vector3(1, 0, 0); const camLocal = new THREE.Vector3(); const camRef = new THREE.Vector3(); const _panLocal = new THREE.Vector3(); const uRef = new THREE.Vector3(); const invMat = new THREE.Matrix4(); const Llat = new THREE.Vector3(); const upLat = new THREE.Vector3(); const _pX = new THREE.Vector3(), _pY = new THREE.Vector3(), _pZ = new THREE.Vector3(), _pBasis = new THREE.Matrix4(); const _bx = new THREE.Vector3(), _by = new THREE.Vector3(), _bz = new THREE.Vector3(), _bBasis = new THREE.Matrix4(); const _camRight = new THREE.Vector3(); const winSeg = [0, 0, 0, 0, 0, 0], winCos = [0, 0, 0, 0, 0, 0], winSin = [0, 0, 0, 0, 0, 0]; function updateDrumFacing() { lattice.updateMatrixWorld(); camLocal.copy(camera.position); lattice.worldToLocal(camLocal); _panLocal.copy(panOffset); lattice.worldToLocal(_panLocal); camRef.copy(camLocal).sub(_panLocal); invMat.getInverse(lattice.matrixWorld); uRef.set(0, 0, 1).transformDirection(invMat); Llat.copy(worldLightDir).transformDirection(invMat); upLat.set(0, 1, 0).transformDirection(invMat); const upAng = Math.atan2(upLat.z, upLat.y); const SEG = TWO_PI / SIDES; const kTop = Math.round(upAng / SEG), gTop = kTop * SEG; const apexY = Math.cos(gTop), apexZ = Math.sin(gTop); const phase = ((kTop % 6) + 6) % 6; const fn = scene.fog.near, ff = scene.fog.far; const showBinary = labelMode === "binary" || labelMode === "namebin"; const plateMode = labelMode === "namebin" ? "name" : (labelMode === "binary" || labelMode === "none") ? null : labelMode; _camRight.setFromMatrixColumn(camera.matrixWorld, 0).transformDirection(invMat); const xSide = _camRight.x >= 0 ? 1 : -1; { const camY = camRef.y, camZ = camRef.z; for (let b = 0; b < 6; b++) { const phiA = (b + 0.5) * SEG, phiB = (b + 6 + 0.5) * SEG; const faceA = camY * Math.cos(phiA) + camZ * Math.sin(phiA); const faceB = camY * Math.cos(phiB) + camZ * Math.sin(phiB); const useA = faceA >= faceB; const phi = useA ? phiA : phiB; winSeg[b] = useA ? b : b + 6; winCos[b] = Math.cos(phi); winSin[b] = Math.sin(phi); } } for (let v = 0; v < 64; v++) { const P = drumMeshes[v].position; const a = 0; drumMeshes[v].quaternion.setFromAxisAngle(X_AXIS, a); const ca = Math.cos(a), sa = Math.sin(a); const lx = Llat.x; const ly = Llat.y * ca + Llat.z * sa; const lz = -Llat.y * sa + Llat.z * ca; const mats = nodeMats[v]; for (let i = 0; i < 2; i++) { const u = mats[i].uniforms; u.uLightLocal.value.set(lx, ly, lz); u.uFogNear.value = fn; u.uFogFar.value = ff; } if (showBinary) { const digits = bitDigitMeshes[v]; for (let b = 0; b < 6; b++) { const seg = winSeg[b]; digits[seg === b ? b + 6 : b].visible = false; const mesh = digits[seg]; const dpx = P.x + xSide * DIGIT_X_OFF; const dpy = P.y + DIGIT_RADIUS * winCos[b]; const dpz = P.z + DIGIT_RADIUS * winSin[b]; mesh.visible = true; mesh.position.set(dpx, dpy, dpz); _bz.set(camLocal.x - dpx, camLocal.y - dpy, camLocal.z - dpz).normalize(); _bx.copy(upLat).cross(_bz); if (_bx.lengthSq() < 1e-8) _bx.set(1, 0, 0); else _bx.normalize(); _by.copy(_bz).cross(_bx); _bBasis.makeBasis(_bx, _by, _bz); mesh.quaternion.setFromRotationMatrix(_bBasis); } } if (plateMode) { const plate = plateMeshes[v]; plate.visible = true; const ph = PLATE_H_BY_MODE[plateMode] || 0.5; const off = RD + ph * LABEL_INSET; const py = P.y + apexY * off, pz = P.z + apexZ * off; plate.position.set(P.x, py, pz); const s = (-apexZ * (camLocal.y - py) + apexY * (camLocal.z - pz)) >= 0 ? 1 : -1; _pX.set(s, 0, 0); _pY.set(0, apexY, apexZ); _pZ.set(0, -s * apexZ, s * apexY); _pBasis.makeBasis(_pX, _pY, _pZ); plate.quaternion.setFromRotationMatrix(_pBasis); const front = rotr6(v, phase); const dv = s > 0 ? front : reverseBits6(front); const key = plateMode + dv; if (plate.userData.shownKey !== key) { const t = getTex(plateMode, dv); plate.material.map = t.tex; plate.material.needsUpdate = true; plate.scale.set(ph * t.aspect, ph, 1); plate.userData.shownKey = key; } } else { plateMeshes[v].visible = false; } } if (linesMode === "panels") { const endOff = H / 2; for (const eo of edgeObjs) { const Pa = drumMeshes[eo.a].position, Pb = drumMeshes[eo.b].position; const cy = DIGIT_RADIUS * winCos[eo.bit], cz = DIGIT_RADIUS * winSin[eo.bit]; const s = (Pb.x >= Pa.x ? 1 : -1) * endOff; const arr = eo.line.geometry.attributes.position.array; arr[0] = Pa.x + s; arr[1] = Pa.y + cy; arr[2] = Pa.z + cz; arr[3] = Pb.x - s; arr[4] = Pb.y + cy; arr[5] = Pb.z + cz; eo.mid.set((arr[0] + arr[3]) / 2, (arr[1] + arr[4]) / 2, (arr[2] + arr[5]) / 2); eo.line.geometry.attributes.position.needsUpdate = true; eo.line.geometry.computeBoundingSphere(); } } } const fogTmp = new THREE.Vector3(); function applyEdgeFog() { const near = scene.fog.near; const span = Math.max(1e-6, scene.fog.far - scene.fog.near); for (const eo of edgeObjs) { fogTmp.copy(eo.mid).applyMatrix4(lattice.matrixWorld); let fa = (camera.position.distanceTo(fogTmp) - near) / span; fa = fa < 0 ? 0 : fa > 1 ? 1 : fa; eo.line.material.opacity = eo.baseOpacity * (1 - fa); } } const _cr = new THREE.Vector3(), _cu = new THREE.Vector3(), _cb = new THREE.Vector3(); function updateKeyLight() { camera.updateMatrixWorld(); _cr.setFromMatrixColumn(camera.matrixWorld, 0); _cu.setFromMatrixColumn(camera.matrixWorld, 1); _cb.setFromMatrixColumn(camera.matrixWorld, 2); worldLightDir.copy(_cb).multiplyScalar(LIGHT_BACK) .addScaledVector(_cr, LIGHT_RIGHT) .addScaledVector(_cu, LIGHT_UP) .normalize(); } updateCamera(); updateKeyLight(); function resize(w, h) { if (w <= 0 || h <= 0) return; renderer.setSize(w, h); camera.aspect = w / h; camera.updateProjectionMatrix(); requestRender(); } resize(container.clientWidth || 640, HEIGHT); const ro = new ResizeObserver(entries => resize(entries[0].contentRect.width, HEIGHT)); ro.observe(container); const io = new IntersectionObserver(es => { visible = es[0].isIntersecting; if (visible) requestRender(); }, { threshold: 0 }); io.observe(container); const onVisibility = () => { if (!document.hidden) requestRender(); }; document.addEventListener("visibilitychange", onVisibility); function tick() { if (disposed) return; frame = requestAnimationFrame(tick); if (!visible || document.hidden) return; if (rotAnim) { const e = Math.min(1, (performance.now() - rotAnim.start) / rotAnim.dur); lattice.rotation.x = rotAnim.from + (rotAnim.to - rotAnim.from) * easeInOutCubic(e); if (e >= 1) { lattice.rotation.x = rotAnim.to; rotAnim = null; } needsRender = true; } if (posAnims.length) { const now = performance.now(); for (let i = posAnims.length - 1; i >= 0; i--) { const a = posAnims[i]; if (now - a.start >= POS_DUR) { for (let v = 0; v < 64; v++) posBase[v].add(a.d[v]); posAnims.splice(i, 1); } } for (let v = 0; v < 64; v++) dispPos[v].copy(posBase[v]); for (const a of posAnims) { const p = easeInOutCubic(Math.min((now - a.start) / POS_DUR, 1)); for (let v = 0; v < 64; v++) dispPos[v].addScaledVector(a.d[v], p); } applyLayout(dispPos); needsRender = true; } const target = highlightSet ? 1 : 0; if (dimAmt !== target) { dimAmt += Math.sign(target - dimAmt) * 0.12; dimAmt = Math.max(0, Math.min(1, dimAmt)); if (dimAmt === 0 && !highlightSet) { displaySet = null; displayCenter = -1; } applyHighlightOpacities(); needsRender = true; } if (!panOffset.equals(panTarget)) { panOffset.lerp(panTarget, 0.25); if (panOffset.distanceTo(panTarget) < 1e-4) panOffset.copy(panTarget); updateCamera(); needsRender = true; } if (dist !== distTarget) { dist += (distTarget - dist) * 0.25; if (Math.abs(distTarget - dist) < 1e-3) dist = distTarget; updateCamera(); needsRender = true; } if (!needsRender && !pointerInside) return; needsRender = false; const fnear = dist - fogRadius; scene.fog.near = fnear; scene.fog.far = fnear + (2 * fogRadius) / BACK_FOG; updateKeyLight(); updateDrumFacing(); applyEdgeFog(); renderer.render(scene, camera); } tick(); invalidation.then(() => { disposed = true; cancelAnimationFrame(frame); ro.disconnect(); io.disconnect(); document.removeEventListener("visibilitychange", onVisibility); const seen = new Set(); scene.traverse(o => { if (o.geometry && !seen.has(o.geometry)) { seen.add(o.geometry); o.geometry.dispose(); } const mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : []; for (const m of mats) { if (m.map && !seen.has(m.map)) { seen.add(m.map); m.map.dispose(); } if (!seen.has(m)) { seen.add(m); m.dispose(); } } }); renderer.dispose(); for (const mode in texByMode) for (const t of texByMode[mode]) if (t) t.tex.dispose(); for (const ch in digitTexCache) digitTexCache[ch].tex.dispose(); }); return container; }38:T6b4,config = ({ // ---- Node geometry ---- rectWidth: 0.28, rectHeight: 0.07, pleatOffset: 0.06, thicknessHypercube: 3.0, thicknessGrid: 1.1, nodeRotationY: 0.0, nodeRotationX: 0.0, // ---- Baked ambient occlusion ---- aoDarkness: 0.5, aoSpread: 0.85, aoFalloff: 3.0, // ---- Hypercube layout ---- dimensionScale: 0.5, get dimensionVectors() { const s = this.dimensionScale; return [ [-2 * s, 0.0, 6 * s], [-1 * s, 0.0, 1 * s], [-6 * s, 0.0, 2 * s], [-6 * s, 0.0, -2 * s], [-1 * s, 0.0, -1 * s], [-2 * s, 0.0, -6 * s], ]; }, // ---- Edge colors per dimension ---- edgeColors: [ 0xff4060, 0x40ff40, 0xffdd30, 0xff8020, 0x20ddff, 0xcc60ff, ], // ---- Shared appearance ---- bgColor: 0x688eb6, // ---- Scene (hypercube view) ---- sceneHeight: 700, autoRotate: false, rotateSpeed: 0.12, animDurationCube: 4.0, tiltConeAngle: 45, // in degrees centeringMaxOffset: 1.65, centeringPeakElevation: Math.PI / 4, // Scene: overlay colors negativeLineColor: 0x000000, reverseCircleColor: 0xffffff, isoclineCircleColor: 0xffffff, hoverOutlineColor: 0xffdd30, // Scene: highlight opacity nodeDimOpacity: 0.2, edgeBaseOpacity: 0.5, edgeBrightOpacity: 1, edgeDimMultiplier: 0.2, // Scene: outline and edge geometry outlineThickness: 0.025, edgeTubeRadius: 0.012, negLineRadius: 0.008, circleSegments: 96, circleTubeRadius: 0.006, // ---- Grid (combo view) ---- animDuration: 1.0, quadSize: 0.42, pairSize: 0.42, cellSpacing: 2.2, minCellPx: 150, wireColor: 0xffffff, wireOpacity: 0.15, })39:T5c2,fonts = { const family = "Atkinson Hyperlegible Mono"; const href = "https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Mono:ital,wght@0,200..800;1,200..800&display=swap"; // Inject preconnects + stylesheet once (guard against duplicates on re-run) if (!document.head.querySelector(`link[href="${href}"]`)) { const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" }); const preconnect2 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }); document.head.append(preconnect1, preconnect2); const stylesheet = Object.assign(document.createElement("link"), { rel: "stylesheet", href }); // Wait for the stylesheet so the @font-face rules are registered before we load() const sheetLoaded = new Promise((resolve, reject) => { stylesheet.onload = resolve; stylesheet.onerror = reject; }); document.head.append(stylesheet); await sheetLoaded; } // Force the actual font files to download (upright + italic faces of the variable font) await Promise.all([ document.fonts.load(`400 16px "${family}"`), document.fonts.load(`700 16px "${family}"`), document.fonts.load(`italic 400 16px "${family}"`), document.fonts.load(`italic 700 16px "${family}"`) ]); await document.fonts.ready; return family; }3a:T30df,### A. Klein 4 | # | Concept | What the operation does | English sources | Chinese sources | |---|---------|------------------------|-----------------|-----------------| | 1 | **Negation / flip** (錯卦 *cuògua*; 旁通卦 *pángtōnggua*) | Flip all six lines: every yin↔yang. Bitwise flip / negation (the logical complement); Hamming distance 6 (antipodal corner of the cube). | • [Biroco glossary](https://www.biroco.com/yijing/glossary.htm)
• [Wikipedia: Hexagram (I Ching)](https://en.wikipedia.org/wiki/Hexagram_(I_Ching))
• [UAYA – mutual hexagrams](https://uaya.org/learn/iching/advanced-studies/hexagram-analysis/mutual-hexagrams/) | • [知乎：错卦/综卦/互卦/交卦](https://zhuanlan.zhihu.com/p/700739937)
• [CSDN：本卦互卦错卦综卦](https://blog.csdn.net/cutwind/article/details/78466930)
• [百度百科：错综其数](https://baike.baidu.com/item/%E9%94%99%E7%BB%BC%E5%85%B6%E6%95%B0/8252009) | | 2 | **Reverse line order** (綜卦 *zònggua*; 反卦 *fǎngua*; 覆卦 *fùgua*) | Reverse the line order (1↔6, 2↔5, 3↔4) — turn the figure upside-down. The 8 symmetric hexagrams — ䷀ (#1), ䷁ (#2), ䷚ (#27), ䷛ (#28), ䷜ (#29), ䷝ (#30), ䷼ (#61), ䷽ (#62) — are their own reverse. | • [Biroco glossary](https://www.biroco.com/yijing/glossary.htm)
• [Biroco – Chung Wu essay](https://www.biroco.com/yijing/chungwu.htm)
• [Grokipedia: Hexagram](https://grokipedia.com/page/Hexagram_(I_Ching)) | • [知乎：卦的"错综复杂"](https://zhuanlan.zhihu.com/p/11283284353)
• [知乎：本卦互卦变卦错卦综卦](https://zhuanlan.zhihu.com/p/664184241)
• [CSDN：综卦/错卦/互卦](https://blog.csdn.net/cutwind/article/details/78466930) | | 3 | **Isocline: negate + reverse together** (錯綜 *cuòzōng*; Lai Zhide's 錯綜說) | Apply both at once: negate every line *and* reverse the order. Classical doctrine systematized by 來知德 (c. 1525–1604) in *Zhouyi Jizhu*; phrase originates in the Xici (繫辭). | • [*Structural Elements in the Zhou Yijing Hexagram Sequence*](https://www.academia.edu/59013946/Structural_Elements_in_the_Zhou_Yijing_Hexagram_Sequence)
• [Schöter, *Boolean Algebra and the Yi Jing* (The Oracle, 1998)](http://linguistics.berkeley.edu/~rscook/zhou1_yi4/schoter-oracle.pdf) | • [复旦哲学：错综说（来知德）](https://philosophy.fudan.edu.cn/94/99/c20799a431257/page.htm)
• [北师大易学：来知德创错综、爻变诸说](https://yixue.bnu.edu.cn/kxyj/xzdt/51529.html)
• [百度百科：错综其数](https://baike.baidu.com/item/%E9%94%99%E7%BB%BC%E5%85%B6%E6%95%B0/8252009) | | 4 | **Klein four-group {id, flip, reverse, isocline}** | Formalizes #1–#3 as ℤ₂×ℤ₂, where isocline = flip ∘ reverse. Orbit sizes 2 or 4; explains the King Wen pairing rule, the 8 palindromes (reverse = self) and the 4 "anti-symmetric" pairs where reverse = flip — i.e. the isocline fixes them — (11/12, 17/18, 53/54, 63/64). | • [Radisic, *Optimal Equivariant Matchings on the 6-Cube* (arXiv:2601.07175)](https://arxiv.org/abs/2601.07175)
• [OEIS A102241 (King Wen in binary)](https://oeis.org/A102241)
• [Cullinane, *Geometry of the I Ching*](https://finitegeometry.org/sc/64/iching.html) | • [中文维基：六十四卦（错卦＝方圆图中心对称）](https://zh.wikipedia.org/zh-cn/%E5%85%AD%E5%8D%81%E5%9B%9B%E5%8D%A6)
• [西南大学学报：周易太极代数/布尔代数](https://xbgjxt.swu.edu.cn/data/article/preview-pdf?doi=10.13718%2Fj.cnki.xdsk.2016.02.003) | ### B. Cyclic & shift structures | # | Concept | What the operation does | English sources | Chinese sources | |---|---------|------------------------|-----------------|-----------------| | 10 | **Cyclic line-shift → binary necklaces** ("Rotated Hexagram"; C₆; cycles of 6/3/2/1) | Move the top line to the bottom (or vice versa), cyclically. The C₆ action partitions the 64 into 14 necklace orbits whose sizes divide 6 (1, 2, 3, 6). (Trigram swap #4 = the rotation-by-3 element.) | • [IChing360 – Rotated Hexagram](https://www.iching360.com/Hexagrams)
• [OEIS A000031 (binary necklaces, a(6)=14)](https://oeis.org/A000031)
• [OEIS A047996 (necklaces by weight)](https://oeis.org/A047996) | *Sparse / no dedicated I Ching source.* Theory:
• [中文维基：群（循环群）](https://zh.wikipedia.org/zh-cn/%E7%BE%A4)
• [OI Wiki：群论](https://oi-wiki.org/math/algebra/group-theory/) | | 4 | **Trigram swap** (交卦 *jiāogua*; 兩象易 *liǎngxiàngyì*) | Exchange the upper and lower trigrams (keeping each trigram's internal order). **Modern note:** equals a cyclic rotation of all six lines by 3 positions — the C₆³ element — so it links this family to the rotation family (#10). E.g. ䷓ (#20) ↔ ䷭ (#46). | • [UAYA – Jiao Gua / exchange hexagrams](https://uaya.org/learn/iching/advanced-studies/hexagram-analysis/mutual-hexagrams/)
• [Biroco – Chung Wu essay (liangxiangyi)](https://www.biroco.com/yijing/chungwu.htm) | • [国易堂：升降/交卦](https://www.guoyi360.com/ly/fs/3423.html)
• [说周易：本/错/综/交/变卦](https://www.shuozhouyi.com/25248.html) | | 11 | **Shift + negate / rotation + reverse = bracelets** (Mondo Secter's "Evolutional Hexagram," 1975; dihedral D₆) | Rotation composed with a flip (Secter's shift-then-flip) or with a reverse → dihedral group D₆, whose classes are "bracelets" (13 for length 6). Where the two original perspectives meet. | • [IChing360 – Evolutional Hexagram](https://www.iching360.com/Hexagrams)
• [Charm bracelets (arXiv:1405.7328)](https://arxiv.org/abs/1405.7328)
• [Automorphisms of necklaces (arXiv:1304.2563)](https://arxiv.org/abs/1304.2563) | *Sparse.* Dihedral background:
• [戴文渊：群论导引（二面体群）](https://daiwz.net/course/disc_math/2023/handouts/03_intro_group_theory.pdf)
• [中文维基：群](https://zh.wikipedia.org/zh-cn/%E7%BE%A4) | | 12 | **Twelve sovereign / tidal hexagrams** (十二消息卦 / 十二辟卦; 卦氣) | A canonical 12-cycle modeling the year: from ䷗ (#24) yang lines grow from the bottom up to ䷀ (#1), then yin lines grow from ䷫ (#44) to ䷁ (#2) — waxing/waning forever. Han origin (Meng Xi 孟喜, Jing Fang 京房). A bottom-contiguous walk up/down the weight shells. | • [Biroco – Taiji & the Cycle of Chinese Months](https://www.biroco.com/yijing/bigua_yinyang.pdf) | • [百度百科：十二辟卦](https://baike.baidu.com/item/%E5%8D%81%E4%BA%8C%E8%BE%9F%E5%8D%A6/1701098)
• [周易研究：从卦变到成卦](https://www.cssn.cn/zx/zgzx/202210/t20221027_5554874.shtml)
• [zhouyipro：十二消息卦/卦气](https://zhouyipro.com/twelve.html) | | 13 | **Adjacent shift/cycle systems** (not the single-line rotation) — length-4 "FuXi" cyclic families; Jing Fang's 八宮 (8 Palaces) | Other cyclic/derivation systems built from *different* generators (period-4 cycles; the 8-palace line-change sequences). Listed to avoid conflating them with #10–#12. | • [*I Ching hexagram groups and subgroups*](https://www.academia.edu/125150058/I_Ching_hexagram_groups_and_subgroups)
• [iching-math: cycle decomposition](https://gzw1987-bit.github.io/iching-math/paper-en.html) | • [中文维基：六十四卦（京房八宫、纳甲）](https://zh.wikipedia.org/zh-cn/%E5%85%AD%E5%8D%81%E5%9B%9B%E5%8D%A6)
• [知乎：十二辟卦与八宫](https://zhuanlan.zhihu.com/p/372730974) | ### C. Adjacency & distance structures | # | Concept | What the operation does | English sources | Chinese sources | |---|---------|------------------------|-----------------|-----------------| | 5 | **Single-line change / hypercube (6-cube) adjacency** (一爻變; 之卦 / 變卦; graph Q₆) | Flip **one** line → an adjacent hexagram (Hamming distance 1). Nodes = hexagrams, edges = single-line flips ⇒ the 6-cube graph Q₆ (64 nodes, each with 6 neighbors). This *is* the native "changing line." | • [Radisic — "vertices of the 6-dimensional hypercube" (arXiv:2601.07175)](https://arxiv.org/abs/2601.07175)
• [Petoukhov, *I-Ching, dyadic groups…* (Prog. Biophys. Mol. Biol.)](https://www.sciencedirect.com/science/article/abs/pii/S0079610717300949)
• [Mysticryst – I Ching as 6-D change system (popular)](https://mysticryst.com/blogs/the-mystic-journal/i-ching-six-dimensional-change-system-64-hexagrams-mathematics) | • [陳睿宏《周易圖》圖式所見之卦變思想析論（政大中文學報, 2017）](https://bdcl.nccu.edu.tw/uploads/chapter_file/file/649aaa1d367376274f2e38e0/6_%E5%91%A8%E6%98%93%E5%9C%96_%E5%9C%96%E5%BC%8F%E6%89%80%E8%A6%8B%E4%B9%8B%E5%8D%A6%E8%AE%8A%E6%80%9D%E6%83%B3%E6%9E%90%E8%AB%96.pdf)
• [天机爻 wiki：本卦→变卦（之卦）](https://wiki.tianjiyao.com/yijing/hexagrams.html)
• [知乎：本卦、之卦（变卦）](https://zhuanlan.zhihu.com/p/664184241) | | 6 | **Gray-code / Karnaugh ordering** (Hamiltonian path on Q₆) | A *layout* of the same single-line-flip adjacency: order all 64 so each neighbor differs by one line (a Gray code = Hamiltonian path on Q₆; Karnaugh-map / 4×4×4-cube arrangements). | • [Loly, *A Logical Way of Ordering the Hexagrams* (The Oracle, 2002)](https://www.fortunetelling.link/Logical_ordering_of_hexagrams_and_trigrams.pdf)
• [Loly (Semantic Scholar)](https://www.semanticscholar.org/paper/436e898bd3c5d22d2b733a76734c93ca13d38d93)
• [Cullinane, *Geometry of the I Ching*](https://finitegeometry.org/sc/64/iching.html) | *No dedicated Chinese-language source found (framing is essentially modern/Western).* | | 7 | **Swap two lines & Hamming-weight shells** (卦變 / 升降; 兩爻相易 — Yu Fan 虞翻, Xun Shuang 荀爽, Li Zhicai 李之才) | Derive one hexagram from another by exchanging two lines. **Modern note:** Li Zhicai's six classes (five-yin-one-yang, etc.) are exactly the Hamming-weight shells of the cube — the binomial levels 1, 6, 15, 20, 15, 6, 1 — and a swap of opposite-value lines is a weight-preserving move within a shell. | • [Radisic (Hamming-weight preservation theme), arXiv:2601.07175](https://arxiv.org/abs/2601.07175)
• [*I Ching hexagram groups and subgroups*](https://www.academia.edu/125150058/I_Ching_hexagram_groups_and_subgroups) | • [周易研究：从卦变到成卦（中国社会科学网）](https://www.cssn.cn/zx/zgzx/202210/t20221027_5554874.shtml)
• [知乎：64卦四大经典排列（大横图/相生）](https://zhuanlan.zhihu.com/p/5952406601) | | 8 | **Nuclear / mutual hexagram** (互卦 *hùgua*; 互體 *hùtǐ*) | Extract the inner lines: 2-3-4 → lower trigram, 3-4-5 → upper trigram. **Modern note:** only 16 hexagrams can be nuclear, so it partitions the 64 into 16 clusters of 4; iterating it collapses every hexagram onto four cores — ䷀ (#1), ䷁ (#2), ䷾ (#63), ䷿ (#64). | • [Biroco glossary (hugua/huti)](https://www.biroco.com/yijing/glossary.htm)
• [Filiakov – *The Deeper Mystery of Mutual Hexagrams*](https://medium.com/@alexfiliakov/the-deeper-mystery-of-mutual-hexagrams-3b90ccaefbe3)
• [Wikibooks: Core Hexagrams](https://en.wikibooks.org/wiki/I_Ching/Core_Hexagrams) | • [说周易：互卦](https://www.shuozhouyi.com/25248.html)
• [知乎：互卦](https://zhuanlan.zhihu.com/p/700739937) | ### D. Whole-set algebraic structure | # | Concept | What the operation does | English sources | Chinese sources | |---|---------|------------------------|-----------------|-----------------| | 14 | **XOR group (ℤ₂)⁶ & affine group AGL(6,2)** | Bitwise XOR makes the 64 hexagrams an elementary abelian 2-group / 6-dim vector space over GF(2). The flip = "XOR with 111111"; Petoukhov's *dyadic shifts* = XOR with a fixed vector (translations). Cullinane frames the whole set as the affine space whose group AGL(6,2) is the "natural group of transformations" containing all the above as special elements. | • [Cullinane, *Geometry of the I Ching*](https://finitegeometry.org/sc/64/iching.html)
• [Petoukhov, *Genetic code, hypercomplex numbers & dyadic shifts* (arXiv:1102.3596)](https://arxiv.org/pdf/1102.3596)
• [Mysticryst (popular: XOR / Z₂ group)](https://mysticryst.com/blogs/the-mystic-journal/mathematics-physics-symmetry-principles-across-frameworks) | • [西南大学学报：周易太极代数/布尔代数](https://xbgjxt.swu.edu.cn/data/article/preview-pdf?doi=10.13718%2Fj.cnki.xdsk.2016.02.003) | 3b:[] 2d:{"id":"e3ad3d0060994d0e","slug":null,"title":"3D Yijing Hexagrams","thumbnail":"0dde1ec7d2727317e87f13aaca93213bf4eee04dfe714c85c6d6570ef5d39195","access_level":"public","create_time":"$D2026-03-16T21:39:03.324Z","update_time":"$D2026-08-06T02:21:24.425Z","view_time":null,"first_public_time":"$D2026-03-17T01:24:38.385Z","fork":{"id":"4a3be36a8c428177","slug":"three-js-templates","title":"Three JS Templates","owner":{"id":"cf45be0120eccaad","login":"laotzunami","name":"Lao"}},"stars":4,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":1091,"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,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"3D Yijing Hexagrams","cells":[{"id":4,"value":"# 3D Yijing Hexagrams\n## Physical embodiments of binary symmetry and discrete geometry","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":926,"value":"## Klein 4","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1030,"value":"- Left drag to rotate scene\n- Click a hexagram or the background to center\n- Double click to isolate a hexagram group\n- Middle mouse or pinch to zoom\n- Right drag or two fingers to pan","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":920,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1079,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":845,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":492,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1056,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1064,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":561,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":565,"value":"There's a nice geometric way to see why these four operations form a group. You can represent binary vectors and the Klein 4 symmetries as a folded sheet. Segments of the sheet that slope upward and are lit from overhead represent 1s and segments of the sheet that are folded downward and are in shadow are 0s. The invert, reverse and isocline operations are the 3 ways to rotate these sheets 180 degrees around the XYZ axes. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":576,"value":"In the table below, notice how the bands of light and dark change after each rotation. If you close your eyes, click a button and open your eyes after the animation, each cluster will look identical.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":543,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":587,"value":"Following a vector with your eye as it rotates, you can see a change in light and dark while the underlying shape stays the same. All vectors have an inverse, but some are fixed points under reverse or isocline operations. Even though individual vectors change, sets of vectors look the same after each operation. These underlying shapes and sets of vectors that are the same after a transformation represent an orbit under the Klein 4 group.\n\nBeyond these orbits, it is also natural to connect vectors that differ by just a single bit. Connecting all 6-bit vectors this way creates a 6D hypercube. \n\nThese constraints produce a family of 2D orthographic projections, where the left/right axis corresponds to self-reverses (palindromes) and the forward/back axis corresponds to self-isoclines (antipalindromes). There are a whole range of these 2D projections, but I've added my favorite one below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":803,"value":"## Bit Shift Cycle","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":813,"value":"- [I Ching Globe paper](https://www.pascal-man.com/navigation/faq-java-browser/PDF-I-Ching/yiglobe.pdf)\n- [I Ching Lattice](http://trionfi.com/tarot/new-themes/sepher-yetzirah/)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":809,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":489,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.96/build/three.min.js\");\n await require(\"three@0.96/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":870,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":928,"value":"## Research Links","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":930,"value":"$3a","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 2e:"$2d:body"