2b:null 2c:["$","title",null,{"children":"Jung's Window Mandala | Lao | Observable"}] 31:Tc9ed,chart = { // State management const state = { speed: 0.09, action: 9, side: 'left', t: 0, currentMoveIndex: 0, pendingAction: null, pendingSide: null, filterActive: false, reversed: false }; const actions = [ { group: "C1", name: "Do Nothing", wedges: [1,0,0,0,0,0,0,0] }, { group: "C2", name: "Rotate 180°", wedges: [1,0,0,0,1,0,0,0] }, { group: "C4", name: "Rotate Right 90°", wedges: [1,0,1,0,1,0,1,0] }, { group: "D2", name: "Horizontal Reflection", wedges: [1,0,0,0,0,0,0,1] }, { group: "D2", name: "Vertical Reflection", wedges: [1,0,0,1,0,0,0,0] }, { group: "D2", name: "Diagonal Reflection", wedges: [1,1,0,0,0,0,0,0] }, { group: "D2", name: "Diagonal Reflection", wedges: [1,0,0,0,0,1,0,0] }, { group: "D4", name: "Cardinal Reflections", wedges: [1,0,0,1,1,0,0,1] }, { group: "D4", name: "Ordinal Reflections", wedges: [1,1,0,0,1,1,0,0] }, { group: "D8", name: "All Reflections", wedges: [1,1,1,1,1,1,1,1] } ]; // Track which physical wedge is at each visual position let wedgePositions = [0, 1, 2, 3, 4, 5, 6, 7]; // Track parity of 90° right-action rotations applied let rightRotation90Count = 0; // Track parity of flip actions completed while 90° counter is odd let flipActionCount = 0; // Animation quaternions, one set per helper layer. Inner targets default // for moves that don't specify a layer; outer is only populated when a // sub-move sets layer:"outer". let sourceInnerQuats = []; let targetInnerQuats = []; let sourceOuterQuats = []; let targetOuterQuats = []; for (let i = 0; i < 8; i++) { sourceInnerQuats.push(new THREE.Quaternion()); targetInnerQuats.push(new THREE.Quaternion()); sourceOuterQuats.push(new THREE.Quaternion()); targetOuterQuats.push(new THREE.Quaternion()); } // Placeholder for objects that will be created later let wedges = []; // Two nested helper layers per wedge let moves apply two simultaneous // rotations (used by the new 180° rotation, which composes a y-axis flip // and an x-axis flip). Scene graph: scene → outer[i] → inner[i] → wedge[i]. let wedgeOuterHelpers = []; let wedgeInnerHelpers = []; // Cubic in-out easing function easeInOutCubic(t) { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; } // Get the maximum delay for a move function getMaxDelay(move) { if (!move || move.length === 0) return 0; return Math.max(...move.map(subMove => subMove.delay)); } // Check if a move is a "do nothing" move (all revolutions are 0) function isDoNothingMove(move) { if (!move || move.length === 0) return true; return move.every(subMove => subMove.revolution === 0); } // Build per-slot, per-layer quaternions and delays for a move. Returns // {inner: [{quat, delay} × 8], outer: [{quat, delay} × 8]}. Slots not // touched on a given layer get an identity quaternion (no rotation). function getMoveQuaternions(move, direction, slotInversions) { const inner = []; const outer = []; for (let i = 0; i < 8; i++) { inner.push({ quat: new THREE.Quaternion(), delay: 0 }); outer.push({ quat: new THREE.Quaternion(), delay: 0 }); } if (!move || move.length === 0) return { inner, outer }; move.forEach(subMove => { const axis = direction ? new THREE.Vector3( subMove.axis[0], subMove.axis[1], subMove.axis[2]) : new THREE.Vector3(-subMove.axis[0], -subMove.axis[1], -subMove.axis[2]); axis.normalize(); const angle = subMove.revolution * 2 * Math.PI; const quat = new THREE.Quaternion().setFromAxisAngle(axis, angle); const target = subMove.layer === "outer" ? outer : inner; subMove.slots.forEach(slot => { const q = (slotInversions && slotInversions[slot]) ? quat.clone().inverse() : quat.clone(); target[slot] = { quat: q, delay: subMove.delay }; }); }); return { inner, outer }; } // Pure: returns a new positions array with `move`'s permutation applied // (forward if reverse=false, backward if reverse=true). function permutePositions(positions, move, reverse = false) { if (!move || move.length === 0) return [...positions]; const newPositions = [...positions]; // Each sub-move defines a permutation cycle, EXCEPT: // - layer:"outer" sub-moves (animation-only by convention) // - sub-moves with permute:false (explicit opt-out, lets the inner // layer carry per-slot animation while a separate paired sub-move // drives the slot swap) move.forEach(subMove => { if (subMove.layer === "outer") return; if (subMove.permute === false) return; const cycle = subMove.slots; if (cycle.length === 0) return; if (!reverse) { // Forward: rotate cycle forward (0->1, 1->2, ..., n-1->0) const temp = positions[cycle[cycle.length - 1]]; for (let i = cycle.length - 1; i > 0; i--) { newPositions[cycle[i]] = positions[cycle[i - 1]]; } newPositions[cycle[0]] = temp; } else { // Reverse: rotate cycle backward (0->n-1, 1->0, ..., n-1->n-2) const temp = positions[cycle[0]]; for (let i = 0; i < cycle.length - 1; i++) { newPositions[cycle[i]] = positions[cycle[i + 1]]; } newPositions[cycle[cycle.length - 1]] = temp; } }); return newPositions; } // Determine which slots need their rotation inverted. // Two independent corrections compose: // - 90° counter odd → invert odd-numbered slots (1,3,5,7) // Applies to right-side D-group (flips) AND C2 (180°): both encode // 180° rotations whose path direction needs reversing for odd slots // after a 90° world rotation. // - flip counter odd → invert ALL slots (reverses overall direction) // Applies only to D-group, since flipActionCount only tracks D-group // flips taken while the 90° counter was odd. // If both apply, odd slots get double-inverted (cancel out), even slots get inverted once. function getSlotInversions() { const inversions = [false, false, false, false, false, false, false, false]; const group = actions[state.action].group; const isInvertible = state.side === 'right' && (group.startsWith('D') || group === 'C2'); if (!isInvertible || rightRotation90Count % 2 === 0) { // No 90° correction needed; check if flip counter alone needs correction (D-group only) if (state.side === 'right' && group.startsWith('D') && flipActionCount % 2 !== 0) { for (let i = 0; i < 8; i++) inversions[i] = true; } return inversions; } // 90° counter is odd — invert odd slots for (let i = 0; i < 8; i++) { if (i % 2 === 1) inversions[i] = true; } // flip counter is odd — invert ALL (XOR with existing). D-group only. if (group.startsWith('D') && flipActionCount % 2 !== 0) { for (let i = 0; i < 8; i++) inversions[i] = !inversions[i]; } return inversions; } // The render loop projects two things forward at move-completion time: // (1) `wedgePositions` via permutePositions, and (2) `rightRotation90Count` // via ±1 for non-do-nothing right-C4 moves. We precompute both here at // setup time so click handling can read them directly instead of // re-deriving the post-completion state from current state + the loop's // branching logic. The render loop also reads from these on completion, // so there's a single source of truth for "what comes next." let targetWedgePositions = [...wedgePositions]; let targetRightRotation90Count = rightRotation90Count; function setupTargetState(move, reverseDirection) { targetWedgePositions = permutePositions(wedgePositions, move, reverseDirection); targetRightRotation90Count = rightRotation90Count; if (state.action === 2 && state.side === 'right' && !isDoNothingMove(move)) { targetRightRotation90Count += reverseDirection ? -1 : 1; } } // Set up inverted target quaternions for reverse playback function setupReversedTargets(sequenceMove) { const inversions = getSlotInversions(); const { inner, outer } = getMoveQuaternions(sequenceMove.move, sequenceMove.direction, inversions); targetInnerQuats = inner; targetOuterQuats = outer; const maxDelay = getMaxDelay(sequenceMove.move); for (let i = 0; i < 8; i++) { targetInnerQuats[i].quat.inverse(); targetOuterQuats[i].quat.inverse(); // Invert delay ordering so the last-to-move wedges animate first in reverse targetInnerQuats[i].delay = maxDelay - targetInnerQuats[i].delay; targetOuterQuats[i].delay = maxDelay - targetOuterQuats[i].delay; sourceInnerQuats[i] = { quat: new THREE.Quaternion(), delay: 0 }; sourceOuterQuats[i] = { quat: new THREE.Quaternion(), delay: 0 }; } setupTargetState(sequenceMove.move, true); } // Set up forward target quaternions function setupForwardTargets(sequenceMove) { const inversions = getSlotInversions(); const { inner, outer } = getMoveQuaternions(sequenceMove.move, sequenceMove.direction, inversions); targetInnerQuats = inner; targetOuterQuats = outer; for (let i = 0; i < 8; i++) { sourceInnerQuats[i] = { quat: new THREE.Quaternion(), delay: 0 }; sourceOuterQuats[i] = { quat: new THREE.Quaternion(), delay: 0 }; } setupTargetState(sequenceMove.move, false); } // Bake both helpers' rotations into the wedge's local quaternion, then // reset both helpers. getWorldQuaternion already traverses up through // both helper layers, so the wedge ends up with the combined rotation. function bakeHelpers() { for (let i = 0; i < 8; i++) { const physicalWedge = wedgePositions[i]; const worldQuat = new THREE.Quaternion(); wedges[physicalWedge].getWorldQuaternion(worldQuat); wedges[physicalWedge].quaternion.copy(worldQuat); wedgeOuterHelpers[physicalWedge].quaternion.set(0, 0, 0, 1); wedgeInnerHelpers[physicalWedge].quaternion.set(0, 0, 0, 1); } } // Initialize animation function initializeAnimation() { const sequenceKey = state.side[0] + state.action; const sequence = sequences[sequenceKey]; const sequenceMove = sequence[state.currentMoveIndex]; // Reset helper rotations for (let i = 0; i < 8; i++) { wedgeOuterHelpers[i].quaternion.set(0, 0, 0, 1); wedgeInnerHelpers[i].quaternion.set(0, 0, 0, 1); } // Reset t to 0 state.t = 0; state.reversed = false; // Get target quaternions for the new move setupForwardTargets(sequenceMove); } function requestActionChange(newAction) { state.pendingAction = newAction; } function requestSideChange(newSide) { state.pendingSide = newSide; } // Each active wedge is a 4-point polygon: two outer corners plus two // inner points on the central diamond's perimeter (a corner + an adjacent // edge midpoint). The diamond region is never drawn, so the row // background shows through. function createWedgeIcon(wedges) { const size = 25; const center = size / 2; const d = size / 4; // diamond half-extent (Manhattan radius) const svg = d3.create("svg") .attr("width", size) .attr("height", size); // Outer corners of each wedge (preserved from original geometry) const wedgePaths = [ [[center, 0], [size, 0]], [[size, center], [size, 0]], [[size, center], [size, size]], [[center, size], [size, size]], [[center, size], [0, size]], [[0, center], [0, size]], [[0, center], [0, 0]], [[center, 0], [0, 0]] ]; // Diamond-perimeter inner corners. For each wedge, [innerNearP0, // innerNearP1] gives the perimeter point nearest each outer corner. const TOP = [center, center - d ]; const TR_MID = [center + d / 2, center - d / 2]; const RIGHT = [center + d, center ]; const BR_MID = [center + d / 2, center + d / 2]; const BOTTOM = [center, center + d ]; const BL_MID = [center - d / 2, center + d / 2]; const LEFT = [center - d, center ]; const TL_MID = [center - d / 2, center - d / 2]; const innerPaths = [ [TOP, TR_MID], // wedge 0: outer p0=(c,0) up, p1=(s,0) top-right [RIGHT, TR_MID], // wedge 1: outer p0=(s,c) right, p1=(s,0) top-right [RIGHT, BR_MID], // wedge 2: outer p0=(s,c) right, p1=(s,s) bot-right [BOTTOM, BR_MID], // wedge 3: outer p0=(c,s) down, p1=(s,s) bot-right [BOTTOM, BL_MID], // wedge 4: outer p0=(c,s) down, p1=(0,s) bot-left [LEFT, BL_MID], // wedge 5: outer p0=(0,c) left, p1=(0,s) bot-left [LEFT, TL_MID], // wedge 6: outer p0=(0,c) left, p1=(0,0) top-left [TOP, TL_MID] // wedge 7: outer p0=(c,0) up, p1=(0,0) top-left ]; // Draw each active wedge as its own quadrilateral path. // Path order: innerNearP0 → outer p0 → outer p1 → innerNearP1 → close wedgePaths.forEach((outer, i) => { if (wedges[i] !== 1) return; const [innerP0, innerP1] = innerPaths[i]; const path = d3.path(); path.moveTo(innerP0[0], innerP0[1]); path.lineTo(outer[0][0], outer[0][1]); path.lineTo(outer[1][0], outer[1][1]); path.lineTo(innerP1[0], innerP1[1]); path.closePath(); svg.append("path") .attr("d", path.toString()) .attr("fill", "black") .attr("stroke", "none"); }); // Outer frame svg.append("rect") .attr("x", 1) .attr("y", 1) .attr("width", size - 2) .attr("height", size - 2) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-width", 2); // Decorative dot inside each active wedge, at the original triangle's // centroid — well inside the new quad and outside the diamond region. wedgePaths.forEach((points, i) => { if (wedges[i] === 1) { const cx = (center + points[0][0] + points[1][0]) / 3; const cy = (center + points[0][1] + points[1][1]) / 3; svg.append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", 1) .attr("fill", "white") .attr("stroke", "none"); } }); return svg.node(); } // Update slider fill based on speed function updateSliderFill(value, container) { const sliderFill = container.querySelector("#slider-fill"); const slider = container.querySelector("#speed-slider"); const sliderWidth = slider.offsetWidth; // Thumb radius in px — adjust if CSS changes thumb size const thumbRadius = 7; // The thumb center at a given value is inset from the edges by thumbRadius const usableWidth = sliderWidth - thumbRadius * 2; // Read min/max from the slider so this works for any symmetric range. const min = parseFloat(slider.min); const max = parseFloat(slider.max); const fraction = (value - min) / (max - min); // 0..1 const centerPx = thumbRadius + usableWidth * fraction; const midPx = thumbRadius + usableWidth * 0.5; if (value >= 0) { sliderFill.style.left = `${midPx}px`; sliderFill.style.width = `${centerPx - midPx}px`; } else { sliderFill.style.left = `${centerPx}px`; sliderFill.style.width = `${midPx - centerPx}px`; } } // Display order used by both the wide radio table and the mobile custom dropdown const displayOrder = [0, 1, 2, 3, 5, 4, 6, 7, 8, 9]; // The mobile

Subgroup Action

Left

Right

Subgroup Action

Left

Right

`; // THREE.JS SCENE SETUP const aspect = 1; // Target canvas width from the current viewport; recomputed on resize. function computeCanvasWidth() { if (window.innerWidth < 600) { return Math.min(window.innerWidth - 40, 625); } return Math.min(window.innerWidth, 625); } let width = computeCanvasWidth(); let height = width * aspect; const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(30, width/height, 1, 1000); camera.position.set(0, 0, 47); camera.lookAt(0, 0, 0); const renderer = new THREE.WebGLRenderer({antialias: true}); renderer.setClearColor("#2e2023"); // Match the backing buffer to device pixels for crisp HiDPI rendering; // cap at 2x to avoid 9x GPU work on 3x phones. renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); renderer.setSize(width, height); container.querySelector("#canvas-wrapper").appendChild(renderer.domElement); // Update the renderer when the wrapper's size changes. Aspect ratio is // fixed at 1, so the camera doesn't need updating. function resizeCanvas() { const newWidth = computeCanvasWidth(); if (newWidth === width) return; width = newWidth; height = newWidth * aspect; renderer.setSize(width, height); } const controls = new THREE.OrbitControls(camera, renderer.domElement); controls.enableZoom = false; controls.enablePan = false; controls.enableRotate = false; // MATERIALS const loader = new THREE.TextureLoader(); // Mipmaps + anisotropic filtering keep textures crisp when drawn smaller // than their native size (most of the time on mobile). const maxAniso = renderer.capabilities.getMaxAnisotropy(); function configureTexture(tex) { tex.minFilter = THREE.LinearMipmapLinearFilter; tex.magFilter = THREE.LinearFilter; tex.generateMipmaps = true; tex.anisotropy = maxAniso; return tex; } const textureHysterema = configureTexture(loader.load(hysterema)); const matBack = new THREE.MeshBasicMaterial({map: configureTexture(loader.load(back)), transparent: true}); const matCenter = new THREE.MeshBasicMaterial({map: configureTexture(loader.load(pleroma)), side: THREE.DoubleSide, transparent: true, depthWrite: false, opacity: .8, blending: THREE.AdditiveBlending}); const matFlare = new THREE.SpriteMaterial({map: configureTexture(loader.load(flare)), transparent: true, opacity: .7, blending: THREE.AdditiveBlending, depthWrite: false}); const matRays = new THREE.SpriteMaterial({map: configureTexture(loader.load(rays)), transparent: true, opacity: .4, blending: THREE.AdditiveBlending, depthWrite: false}); // CREATE 8 WEDGES let subset = [1, 1, 1, 1, 1, 1, 1, 1]; let highlight = [0, 0, 0, 0, 0, 0, 0, 0]; const r = 12.5; const wedgeVertices = [0,1, 1,1, 1,0, 1,-1, 0,-1, -1,-1, -1,0, -1,1, 0,1]; const wedgeUVs = [ [0.5, 0, 1, 0, 0.5, 0.5], [1, 0, 1, 0.5, 0.5, 0.5], [1, 0.5, 1, 1, 0.5, 0.5], [1, 1, 0.5, 1, 0.5, 0.5], [0.5, 1, 0, 1, 0.5, 0.5], [0, 1, 0, 0.5, 0.5, 0.5], [0, 0.5, 0, 0, 0.5, 0.5], [0, 0, 0.5, 0, 0.5, 0.5] ]; for (let i = 0; i < 8; i++) { const outerHelper = new THREE.Object3D(); const innerHelper = new THREE.Object3D(); scene.add(outerHelper); outerHelper.add(innerHelper); wedgeOuterHelpers.push(outerHelper); wedgeInnerHelpers.push(innerHelper); const geoWedge = new THREE.Geometry(); geoWedge.vertices.push( new THREE.Vector3(r * wedgeVertices[2*i], r * wedgeVertices[2*i+1], 0), new THREE.Vector3(r * wedgeVertices[2*i+2], r * wedgeVertices[2*i+3], 0), new THREE.Vector3(0, 0, 0) ); geoWedge.faces.push(new THREE.Face3(0, 1, 2)); geoWedge.faceVertexUvs[0] = [[ new THREE.Vector2(wedgeUVs[i][0], wedgeUVs[i][1]), new THREE.Vector2(wedgeUVs[i][2], wedgeUVs[i][3]), new THREE.Vector2(wedgeUVs[i][4], wedgeUVs[i][5]) ]]; geoWedge.computeFaceNormals(); const matWedge = new THREE.MeshBasicMaterial({ map: textureHysterema, side: THREE.DoubleSide, transparent: true, opacity: 0.8, depthWrite: false, blending: THREE.AdditiveBlending }); const wedgeMesh = new THREE.Mesh(geoWedge, matWedge); innerHelper.add(wedgeMesh); wedges.push(wedgeMesh); } // CREATE STARS let stars = []; const starPositions = [ [4.52, 9.14, 0], [9.175, 4.285, 0], [9.135, -4.45, 0], [4.45, -9.11, 0], [-4.53, -9.11, 0], [-9.19, -4.36, 0], [-9.24, 4.45, 0], [-4.44, 9.14, 0] ]; // Sprite scales in world units (constant): the projection already maps // a fixed world size to a canvas-proportional pixel size, so sprites // take the same fraction of the canvas regardless of its pixel size. // Values match the old `width / 70` and `width / 15` at width=625. const STAR_WORLD_SCALE = 625 / 70; // ≈ 8.93 const RAYS_WORLD_SCALE = 625 / 15; // ≈ 41.67 for (let i = 0; i < 8; i++) { const star = new THREE.Sprite(matFlare.clone()); star.scale.x = STAR_WORLD_SCALE; star.scale.y = STAR_WORLD_SCALE; star.position.set(starPositions[i][0], starPositions[i][1], starPositions[i][2]); wedges[i].add(star); stars.push(star); } // CENTER AND BACKGROUND const meshCenter = new THREE.Mesh(new THREE.PlaneGeometry(25, 25), matCenter); meshCenter.position.set(0, 0, .05); scene.add(meshCenter); const meshBack = new THREE.Mesh(new THREE.PlaneGeometry(32.5, 32.5), matBack); meshBack.position.set(0, 0, -14); scene.add(meshBack); const rays1 = new THREE.Sprite(matRays.clone()); rays1.scale.x = RAYS_WORLD_SCALE; rays1.scale.y = RAYS_WORLD_SCALE; scene.add(rays1); const rays2 = new THREE.Sprite(matRays.clone()); rays2.scale.x = RAYS_WORLD_SCALE; rays2.scale.y = -RAYS_WORLD_SCALE; scene.add(rays2); // Initialize animation initializeAnimation(); // Populate radio table const tableBody = container.querySelector("#radio-table-body"); displayOrder.forEach((index) => { const action = actions[index]; const row = tableBody.insertRow(); const radioCell = row.insertCell(); const radio = document.createElement("input"); radio.type = "radio"; radio.name = "action"; radio.value = index; radio.checked = index === state.action; radioCell.appendChild(radio); const iconCell = row.insertCell(); iconCell.appendChild(createWedgeIcon(action.wedges)); const groupCell = row.insertCell(); groupCell.textContent = action.group; const nameCell = row.insertCell(); nameCell.textContent = action.name; radio.addEventListener("change", () => { if (radio.checked) { requestActionChange(index); // Update mobile dropdown to match setDropdownSelected(index); } }); row.addEventListener("click", (e) => { if (e.target !== radio) { radio.checked = true; requestActionChange(index); // Update mobile dropdown to match setDropdownSelected(index); } }); }); // Initial slider fill: pass the raw default slider position (squared // would give us state.speed; this passes the visual position). requestAnimationFrame(() => updateSliderFill(0.3, container)); // Wire up speed slider. The slider thumb represents a raw value in // [-1, 1]; we store sign(raw) × raw² as the effective speed so the // response curve is gentler near zero and ramps up toward the ends. const speedSlider = container.querySelector("#speed-slider"); speedSlider.addEventListener("input", (e) => { const raw = parseFloat(e.target.value); state.speed = Math.sign(raw) * raw * raw; updateSliderFill(raw, container); }); // ───────────────────────────────────────────────────────────────────────── // CUSTOM DROPDOWN (mobile / narrow viewport) // Built so each option row contains the same SVG icon as the radio table. // ───────────────────────────────────────────────────────────────────────── const dropdownRoot = container.querySelector("#action-dropdown"); const dropdownButton = container.querySelector("#action-dropdown-button"); const dropdownButtonContent = container.querySelector("#action-dropdown-button-content"); const dropdownList = container.querySelector("#action-dropdown-list"); // Build a row of [icon, group, name] DOM matching the radio table layout function buildOptionRow(action) { const row = document.createElement("span"); row.className = "action-dropdown-option-row"; const iconWrap = document.createElement("span"); iconWrap.className = "action-dropdown-option-icon"; iconWrap.appendChild(createWedgeIcon(action.wedges)); row.appendChild(iconWrap); const groupSpan = document.createElement("span"); groupSpan.className = "action-dropdown-option-group"; groupSpan.textContent = action.group; row.appendChild(groupSpan); const nameSpan = document.createElement("span"); nameSpan.className = "action-dropdown-option-name"; nameSpan.textContent = action.name; row.appendChild(nameSpan); return row; } // Populate dropdown options displayOrder.forEach((index) => { const action = actions[index]; const li = document.createElement("li"); li.className = "action-dropdown-option"; li.setAttribute("role", "option"); li.dataset.value = String(index); li.setAttribute("aria-selected", index === state.action ? "true" : "false"); if (index === state.action) li.classList.add("selected"); li.appendChild(buildOptionRow(action)); li.addEventListener("click", () => { selectDropdownValue(index); closeDropdown(); }); dropdownList.appendChild(li); }); // Set the button label to a given action's row function renderDropdownButton(index) { dropdownButtonContent.innerHTML = ""; dropdownButtonContent.appendChild(buildOptionRow(actions[index])); } // Visually mark which list item is selected (no state change) function setDropdownSelected(index) { const items = dropdownList.querySelectorAll(".action-dropdown-option"); items.forEach((li) => { const isSelected = parseInt(li.dataset.value, 10) === index; li.classList.toggle("selected", isSelected); li.setAttribute("aria-selected", isSelected ? "true" : "false"); }); renderDropdownButton(index); } // Full selection: change state, update radios, update dropdown function selectDropdownValue(index) { requestActionChange(index); setDropdownSelected(index); const radios = container.querySelectorAll('input[name="action"]'); radios.forEach((radio) => { radio.checked = parseInt(radio.value, 10) === index; }); } function openDropdown() { dropdownList.hidden = false; dropdownRoot.classList.add("open"); dropdownButton.setAttribute("aria-expanded", "true"); } function closeDropdown() { dropdownList.hidden = true; dropdownRoot.classList.remove("open"); dropdownButton.setAttribute("aria-expanded", "false"); } function isDropdownOpen() { return !dropdownList.hidden; } dropdownButton.addEventListener("click", (e) => { e.stopPropagation(); if (isDropdownOpen()) closeDropdown(); else openDropdown(); }); // Close when clicking/tapping outside the dropdown document.addEventListener("click", (e) => { if (!isDropdownOpen()) return; if (!dropdownRoot.contains(e.target)) closeDropdown(); }); document.addEventListener("touchstart", (e) => { if (!isDropdownOpen()) return; if (!dropdownRoot.contains(e.target)) closeDropdown(); }, { passive: true }); // Close on Escape document.addEventListener("keydown", (e) => { if (e.key === "Escape" && isDropdownOpen()) closeDropdown(); }); // Initial render of button label renderDropdownButton(state.action); // Wire up toggle switches function updateToggle(side) { requestSideChange(side); const toggleWide = container.querySelector("#toggle-switch-wide"); const leftLabelWide = container.querySelector("#toggle-left-wide"); const rightLabelWide = container.querySelector("#toggle-right-wide"); if (side === 'right') { toggleWide.classList.add('active'); leftLabelWide.classList.remove('active'); rightLabelWide.classList.add('active'); } else { toggleWide.classList.remove('active'); leftLabelWide.classList.add('active'); rightLabelWide.classList.remove('active'); } const toggleMobile = container.querySelector("#toggle-switch-mobile"); const leftLabelMobile = container.querySelector("#toggle-left-mobile"); const rightLabelMobile = container.querySelector("#toggle-right-mobile"); if (side === 'right') { toggleMobile.classList.add('active'); leftLabelMobile.classList.remove('active'); rightLabelMobile.classList.add('active'); } else { toggleMobile.classList.remove('active'); leftLabelMobile.classList.add('active'); rightLabelMobile.classList.remove('active'); } } container.querySelector("#toggle-switch-wide").addEventListener("click", () => { const newSide = state.side === 'left' ? 'right' : 'left'; updateToggle(newSide); }); container.querySelector("#toggle-switch-mobile").addEventListener("click", () => { const newSide = state.side === 'left' ? 'right' : 'left'; updateToggle(newSide); }); // RAYCASTER const mouse = new THREE.Vector2(100, 100); let INTERSECTED; const raycaster = new THREE.Raycaster(); renderer.domElement.onmousemove = event => { event.preventDefault(); // Read live bounds; the canvas may have resized since last frame. const rect = renderer.domElement.getBoundingClientRect(); if (rect.width === 0 || rect.height === 0) return; mouse.x = ((event.clientX - rect.left) / rect.width) * 2 - 1; mouse.y = -((event.clientY - rect.top) / rect.height) * 2 + 1; }; // RENDER LOOP let a = 0; const pi = Math.PI; // Render-loop gating: pause when offscreen or tab is hidden so unrelated // page interactions (e.g. scroll) don't fight with the renderer. let isCanvasVisible = true; let isTabVisible = true; let isLoopRunning = false; function shouldRender() { return isCanvasVisible && isTabVisible; } function resumeRenderingIfNeeded() { if (!isLoopRunning && shouldRender()) { isLoopRunning = true; render(); } } const render = function() { if (!shouldRender()) { isLoopRunning = false; return; } requestAnimationFrame(render); // Mouse interaction raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(wedges); if (intersects.length > 0) { INTERSECTED = intersects[0].object; } else { INTERSECTED = null; } // Update highlight for (let i = 0; i < 8; i++) { highlight[i] = (INTERSECTED === wedges[i]) ? 1 : 0; } // Animation const sequenceKey = state.side[0] + state.action; const sequence = sequences[sequenceKey]; const currentSequenceMove = sequence[state.currentMoveIndex]; const currentMove = currentSequenceMove.move; const maxDelay = getMaxDelay(currentMove); const tRange = 1 + maxDelay; const isDoNothing = isDoNothingMove(currentMove); // In reversed mode, negate the slider so a positive slider during a // reverse animation rewinds t toward 0 instead of waiting for completion. const effectiveSpeed = state.reversed ? -state.speed : state.speed; // Special handling for "do nothing" moves if (isDoNothing) { if (state.pendingAction !== null || state.pendingSide !== null) { state.t = tRange; } else { state.t += tRange * Math.abs(state.speed) * 0.02; } } else { state.t += 0.05 * effectiveSpeed; } if (state.t >= tRange) { // Move completed — bake helper rotations into wedges bakeHelpers(); if (state.reversed) { // Settle to the cached target state of the just-finished move. if (!isDoNothing) { wedgePositions = targetWedgePositions; rightRotation90Count = targetRightRotation90Count; } // Track flip actions completed while 90° counter is odd if (state.side === 'right' && actions[state.action].group.startsWith('D') && rightRotation90Count % 2 !== 0 && !isDoNothing) { flipActionCount--; } const remainder = state.t - tRange; if (state.pendingAction !== null || state.pendingSide !== null) { // Apply pending changes — reset to forward mode at start of new sequence if (state.pendingAction !== null) { state.action = state.pendingAction; state.pendingAction = null; } if (state.pendingSide !== null) { state.side = state.pendingSide; state.pendingSide = null; } state.reversed = false; state.currentMoveIndex = 0; state.t = remainder; const newSequenceKey = state.side[0] + state.action; const newSequence = sequences[newSequenceKey]; setupForwardTargets(newSequence[0]); } else if (state.speed < 0) { // Still going backward — set up reverse for the previous move state.currentMoveIndex = (state.currentMoveIndex - 1 + sequence.length) % sequence.length; state.t = remainder; setupReversedTargets(sequence[state.currentMoveIndex]); } else { // Speed turned positive — switch to forward, replay the same move forward state.reversed = false; state.t = remainder; setupForwardTargets(sequence[state.currentMoveIndex]); } } else { // Settle to the cached target state of the just-finished move. if (!isDoNothing) { wedgePositions = targetWedgePositions; rightRotation90Count = targetRightRotation90Count; } // Track flip actions completed while 90° counter is odd if (state.side === 'right' && actions[state.action].group.startsWith('D') && rightRotation90Count % 2 !== 0 && !isDoNothing) { flipActionCount++; } const remainder = state.t - tRange; if (state.pendingAction !== null || state.pendingSide !== null) { if (state.pendingAction !== null) { state.action = state.pendingAction; state.pendingAction = null; } if (state.pendingSide !== null) { state.side = state.pendingSide; state.pendingSide = null; } state.currentMoveIndex = 0; state.t = remainder; const newSequenceKey = state.side[0] + state.action; const newSequence = sequences[newSequenceKey]; setupForwardTargets(newSequence[0]); } else { // Advance to next move in sequence state.currentMoveIndex = (state.currentMoveIndex + 1) % sequence.length; state.t = remainder; setupForwardTargets(sequence[state.currentMoveIndex]); } } } else if (state.t < 0) { // t crossed 0. Two cases, both with helpers ≈ identity: // (a) reversed=false (speed went negative mid-forward) → enter // reverse for the previous move. // (b) reversed=true (speed went positive mid-reverse) → exit // reverse and replay the SAME move forward. bakeHelpers(); const remainder = Math.abs(state.t); if (state.reversed) { // Case (b): exit reverse, replay same move forward. if (state.pendingAction !== null || state.pendingSide !== null) { if (state.pendingAction !== null) { state.action = state.pendingAction; state.pendingAction = null; } if (state.pendingSide !== null) { state.side = state.pendingSide; state.pendingSide = null; } state.reversed = false; state.currentMoveIndex = 0; state.t = remainder; const newSequenceKey = state.side[0] + state.action; const newSequence = sequences[newSequenceKey]; setupForwardTargets(newSequence[0]); } else { state.reversed = false; state.t = remainder; setupForwardTargets(sequence[state.currentMoveIndex]); } } else { // Case (a): enter reverse for the previous move. if (state.pendingAction !== null || state.pendingSide !== null) { if (state.pendingAction !== null) { state.action = state.pendingAction; state.pendingAction = null; } if (state.pendingSide !== null) { state.side = state.pendingSide; state.pendingSide = null; } // Start at end of new sequence in reverse mode const newSequenceKey = state.side[0] + state.action; const newSequence = sequences[newSequenceKey]; state.currentMoveIndex = newSequence.length - 1; state.reversed = true; state.t = remainder; setupReversedTargets(newSequence[state.currentMoveIndex]); } else { // Enter reverse mode for the previous move state.currentMoveIndex = (state.currentMoveIndex - 1 + sequence.length) % sequence.length; state.reversed = true; state.t = remainder; setupReversedTargets(sequence[state.currentMoveIndex]); } } } // Apply eased rotation to both helper layers if (!isDoNothing) { const clampedT = Math.max(0, Math.min(1, state.t)); for (let i = 0; i < 8; i++) { const physicalWedge = wedgePositions[i]; const innerDelay = targetInnerQuats[i].delay; const innerOffsetT = Math.max(0, Math.min(1, clampedT - innerDelay)); const innerEased = easeInOutCubic(innerOffsetT); const innerInterp = sourceInnerQuats[i].quat.clone(); innerInterp.slerp(targetInnerQuats[i].quat, innerEased); wedgeInnerHelpers[physicalWedge].quaternion.copy(innerInterp); const outerDelay = targetOuterQuats[i].delay; const outerOffsetT = Math.max(0, Math.min(1, clampedT - outerDelay)); const outerEased = easeInOutCubic(outerOffsetT); const outerInterp = sourceOuterQuats[i].quat.clone(); outerInterp.slerp(targetOuterQuats[i].quat, outerEased); wedgeOuterHelpers[physicalWedge].quaternion.copy(outerInterp); } } // Update star opacity for (let i = 0; i < 8; i++) { const physicalWedge = wedgePositions[i]; const baseStarOpacity = 0.7 * subset[physicalWedge] * (1 + Math.sin(a * 2 + pi * i / 4) * 0.02 + Math.sin(a * -3 + pi * i / 2) * 0.02 + Math.sin(a * 5 + pi * i) * 0.02); if (subset[physicalWedge] === 0) { stars[physicalWedge].material.opacity = highlight[physicalWedge] * 0.3; } else { stars[physicalWedge].material.opacity = baseStarOpacity + 0.1 * highlight[physicalWedge]; } } // Update wedge opacity with highlight for (let i = 0; i < 8; i++) { if (subset[i] === 1) { const baseOpacity = 0.8; const highlightBonus = highlight[i] * 0.2; wedges[i].material.opacity = baseOpacity + highlightBonus; } else { wedges[i].material.opacity = 0; } } // Sun rays a += 0.1; rays1.material.rotation = 0.015 * a; rays2.material.rotation = -0.02 * a; rays1.material.opacity = 0.4 * (1 + Math.sin(a * 0.2) * 0.2 + Math.sin(a * -0.3 + pi) * 0.1 + Math.sin(a * 0.5) * 0.05); rays2.material.opacity = 0.4 * (1 + Math.sin(a * 0.2 + pi) * 0.2 + Math.sin(a * -0.3) * 0.1 + Math.sin(a * 0.5 + pi) * 0.05); renderer.render(scene, camera); }; // ───────────────────────────────────────────────────────────────────────── // INPUT HANDLERS // ───────────────────────────────────────────────────────────────────────── // Closed orbit containing the clicked physical wedge under the currently- // selected action/side, against the layout the animation is moving toward. // Uses the cached target state populated at setup time so the click sees // exactly the state the render loop will settle to on completion. function applyClosedSubsetForWedge(wedgeIndex) { // Pending action/side override the still-animating values: the UI // selection drives the subset even before the animation catches up. const effectiveAction = state.pendingAction !== null ? state.pendingAction : state.action; const effectiveSide = state.pendingSide !== null ? state.pendingSide : state.side; // Pick which snapshot the animation is moving toward: // t increasing → cached target (completion will apply the permutation) // t decreasing → current state (t→0, no permutation applied) const effectiveSpeed = state.reversed ? -state.speed : state.speed; const positions = effectiveSpeed >= 0 ? targetWedgePositions : wedgePositions; const rot90Count = effectiveSpeed >= 0 ? targetRightRotation90Count : rightRotation90Count; // D2 flips swap with their conjugate when the 90° rotation parity is odd. const conjugateMap = { 3: 4, 4: 3, 5: 6, 6: 5 }; const lookupAction = (rot90Count % 2 !== 0 && conjugateMap[effectiveAction] !== undefined) ? conjugateMap[effectiveAction] : effectiveAction; const sequence = sequences[effectiveSide[0] + lookupAction]; const clickedSlot = positions.indexOf(wedgeIndex); if (clickedSlot === -1) return; // Slot connectivity: two slots are connected if they share a submove // that contributes to the permutation. Animation-only sub-moves // (layer:"outer" or permute:false) can pair slots in ways that don't // reflect the group action's orbits, so skip them — they'd mistakenly // expand the closed subset to non-orbit slots. const connections = Array.from({length: 8}, () => new Set()); for (const sequenceMove of sequence) { for (const subMove of sequenceMove.move) { if (subMove.layer === "outer") continue; if (subMove.permute === false) continue; for (let i = 0; i < subMove.slots.length; i++) { for (let j = 0; j < subMove.slots.length; j++) { if (i !== j) connections[subMove.slots[i]].add(subMove.slots[j]); } } } } // Transitive closure from clickedSlot. const connectedSlots = new Set([clickedSlot]); const toProcess = [clickedSlot]; while (toProcess.length > 0 && connectedSlots.size < 8) { const current = toProcess.shift(); for (const neighbor of connections[current]) { if (!connectedSlots.has(neighbor)) { connectedSlots.add(neighbor); toProcess.push(neighbor); } } } // Show the wedges at the connected slots in the chosen snapshot. for (let i = 0; i < 8; i++) subset[i] = 0; for (const slot of connectedSlots) subset[positions[slot]] = 1; state.filterActive = true; } // Restore all wedges function showAllWedges() { for (let i = 0; i < 8; i++) subset[i] = 1; state.filterActive = false; } // Are all wedges currently visible? function allWedgesVisible() { for (let i = 0; i < 8; i++) { if (subset[i] !== 1) return false; } return true; } // Shared by left-click and touch: if any wedge is hidden, restore all; // otherwise apply the closed subset for the hit wedge (or do nothing if // the hit was on the background). Takes a physical wedge index so the // closed-subset code can project it onto the animation's target layout. function smartSelect(wedgeIndexOrNull) { if (!allWedgesVisible()) { showAllWedges(); return; } if (wedgeIndexOrNull !== null) { applyClosedSubsetForWedge(wedgeIndexOrNull); } } // Left-click: smart-select (matches touch behavior). function clicked() { const wedgeIndex = INTERSECTED ? wedges.indexOf(INTERSECTED) : -1; smartSelect(wedgeIndex >= 0 ? wedgeIndex : null); } // Right-click: toggle the individual wedge under the cursor on/off. // Right-clicking the background does nothing; the smart left-click already // provides an easy "restore all" affordance when wedges are hidden. function rightClicked(event) { event.preventDefault(); if (!INTERSECTED) return; const index = wedges.indexOf(INTERSECTED); if (index === -1) return; subset[index] = (subset[index] + 1) % 2; // Manually toggling a wedge breaks any active closed-subset filter, // since the visible set no longer reflects an orbit. if (state.filterActive) state.filterActive = false; } // Touch handler — same smart-select logic as left-click, but raycasts // from explicit touch coordinates since touch events don't update the // mouse-driven INTERSECTED. function touched(event) { if (!event.touches || event.touches.length === 0) { // Fallback for unusual touch events: at minimum, restore all if hidden. if (!allWedgesVisible()) { showAllWedges(); event.preventDefault(); } return; } const touch = event.touches[0]; const rect = renderer.domElement.getBoundingClientRect(); const x = touch.clientX - rect.left; const y = touch.clientY - rect.top; // Ignore touches outside the canvas if (x < 0 || y < 0 || x > rect.width || y > rect.height) return; // Prevent the synthesized click that follows touchstart so we don't // double-fire the left-click handler. event.preventDefault(); // Raycast from the touch point to find the tapped wedge (if any). const touchNDC = new THREE.Vector2( (x / rect.width) * 2 - 1, -(y / rect.height) * 2 + 1 ); const touchRaycaster = new THREE.Raycaster(); touchRaycaster.setFromCamera(touchNDC, camera); const hits = touchRaycaster.intersectObjects(wedges); let wedgeIndex = null; if (hits.length > 0) { const idx = wedges.indexOf(hits[0].object); if (idx !== -1) wedgeIndex = idx; } smartSelect(wedgeIndex); } // Bound to the canvas only — clicks elsewhere on the page mustn't change // wedges. mouseout stays on window so the hover highlight clears whenever // the cursor leaves the page entirely, not just the canvas. renderer.domElement.addEventListener('click', () => { clicked() }); window.addEventListener('mouseout', () => { mouse.x = 100; mouse.y = 100 }); // Touch: same logic as left-click. passive: false lets us preventDefault() // to suppress the synthesized click that would otherwise double-fire. renderer.domElement.addEventListener('touchstart', touched, { passive: false }); // Right-click handler (toggle individual wedge) renderer.domElement.addEventListener('contextmenu', rightClicked); // Pause rendering when the canvas scrolls offscreen. 100px buffer // prevents pause/resume thrash on quick scroll-bys. if (typeof IntersectionObserver !== "undefined") { const visibilityObserver = new IntersectionObserver((entries) => { for (const entry of entries) { isCanvasVisible = entry.isIntersecting; } resumeRenderingIfNeeded(); }, { rootMargin: "100px" }); visibilityObserver.observe(renderer.domElement); } // Resize the renderer when the wrapper's size changes (orientation flips, // window resizes). Observing the wrapper gives us the CSS-laid-out width // directly, with all media queries already applied. if (typeof ResizeObserver !== "undefined") { const sizeObserver = new ResizeObserver(() => resizeCanvas()); sizeObserver.observe(container.querySelector("#canvas-wrapper")); } else { window.addEventListener("resize", resizeCanvas); } // Pause when the tab is hidden. RAF throttles already, but explicit pause // prevents work accumulating on visibilitychange. document.addEventListener("visibilitychange", () => { isTabVisible = document.visibilityState !== "hidden"; resumeRenderingIfNeeded(); }); resumeRenderingIfNeeded(); return container; }32:T1e8b,moves = ({ // No movement l0: [ {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [0]}, {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [1]}, {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [2]}, {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [3]}, {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [4]}, {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [5]}, {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [6]}, {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [7]}, ], r0: [ {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [0]}, {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [1]}, {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [2]}, {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [3]}, {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [4]}, {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [5]}, {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [6]}, {axis: [0, 0, -1], revolution: 0, delay: 0, slots: [7]}, ], // 90° rotation (counterclockwise from top) l90: [ {axis: [0, 0, -1], revolution: 0.25, delay: 0, slots: [0, 2, 4, 6]}, {axis: [0, 0, -1], revolution: 0.25, delay: 0, slots: [1, 3, 5, 7]} ], r90: [ {axis: [0, 0, -1], revolution: 0.25, delay: 0, slots: [0, 2, 4, 6]}, {axis: [0, 0, 1], revolution: 0.25, delay: 0, slots: [1, 3, 5, 7]} ], // 180° rotation, decomposed into nested perpendicular flips. // Composing a hflip (around y-axis) with a vflip (around x-axis) is the // 180° z-rotation, but applied as two simultaneous nested rotations the // wedges tumble through the disc's center plane instead of swinging // around the circumference. // // The "outer" sub-move rotates a wrapper Object3D around the y-axis; // the "inner" (default) sub-move rotates the wedge around the x-axis // inside that wrapper. Both animate together over the same t. // permutePositions only counts inner sub-moves, so each pair is swapped // exactly once. l180: [ // outer (y-axis flips) — animation only, all pairs share axis {axis: [0, -1, 0], revolution: 0.5, delay: 0, slots: [0, 4], layer: "outer"}, {axis: [0, -1, 0], revolution: 0.5, delay: 0, slots: [1, 5], layer: "outer"}, {axis: [0, -1, 0], revolution: 0.5, delay: 0, slots: [2, 6], layer: "outer"}, {axis: [0, -1, 0], revolution: 0.5, delay: 0, slots: [3, 7], layer: "outer"}, // inner (x-axis flips) — also drives the permutation {axis: [-1, 0, 0], revolution: 0.5, delay: 0, slots: [0, 4]}, {axis: [-1, 0, 0], revolution: 0.5, delay: 0, slots: [1, 5]}, {axis: [-1, 0, 0], revolution: 0.5, delay: 0, slots: [2, 6]}, {axis: [-1, 0, 0], revolution: 0.5, delay: 0, slots: [3, 7]}, ], // r180: per-slot polarity on both inner and outer layers. Even slots // tumble toward the camera (+z at midpoint); odd slots tumble away (-z). // The animation layers have been swapped relative to a previous version: // what used to be on the outer layer now lives on the inner layer // (marked permute:false so it doesn't drive the slot swap), and the // per-slot animations that used to be on the inner layer now drive the // outer layer. Inner permutation-only sub-moves still carry the // diametral pair cycles for the slot swap. r180: [ // Per-slot OUTER animations (formerly inner per-slot). {axis: [0, -1, 0], revolution: 0.5, delay: 0, slots: [0], layer: "outer"}, // -y {axis: [-1, 0, 0], revolution: 0.5, delay: 0, slots: [1], layer: "outer"}, // -x {axis: [-1, 0, 0], revolution: 0.5, delay: 0, slots: [2], layer: "outer"}, // -x {axis: [0, 1, 0], revolution: 0.5, delay: 0, slots: [3], layer: "outer"}, // +y {axis: [0, 1, 0], revolution: 0.5, delay: 0, slots: [4], layer: "outer"}, // +y {axis: [ 1, 0, 0], revolution: 0.5, delay: 0, slots: [5], layer: "outer"}, // +x {axis: [ 1, 0, 0], revolution: 0.5, delay: 0, slots: [6], layer: "outer"}, // +x {axis: [0, -1, 0], revolution: 0.5, delay: 0, slots: [7], layer: "outer"}, // -y // Inner permutation-only sub-moves (revolution 0 → identity quat). // Listed FIRST among inner-layer entries so the paired animation // sub-moves below overwrite their identity quats in getMoveQuaternions. {axis: [0, 1, 0], revolution: 0, delay: 0, slots: [0, 4]}, {axis: [0, 1, 0], revolution: 0, delay: 0, slots: [1, 5]}, {axis: [0, 1, 0], revolution: 0, delay: 0, slots: [2, 6]}, {axis: [0, 1, 0], revolution: 0, delay: 0, slots: [3, 7]}, // Paired INNER animations (formerly outer). permute:false so the // [0,3]/[4,7]/[1,6]/[2,5] groupings don't get mistaken for cycles — // they're shared-axis convenience groupings, not permutation pairs. {axis: [-1, 0, 0], revolution: 0.5, delay: 0, slots: [0, 3], permute: false}, {axis: [ 1, 0, 0], revolution: 0.5, delay: 0, slots: [4, 7], permute: false}, {axis: [0, -1, 0], revolution: 0.5, delay: 0, slots: [1, 6], permute: false}, {axis: [0, 1, 0], revolution: 0.5, delay: 0, slots: [2, 5], permute: false}, ], // 270° rotation (90° clockwise from top) l270: [ {axis: [0, 0, -1], revolution: 0.75, delay: 0, slots: [0, 2, 4, 6]}, {axis: [0, 0, -1], revolution: 0.75, delay: 0, slots: [1, 3, 5, 7]} ], r270: [ {axis: [0, 0, -1], revolution: 0.75, delay: 0, slots: [0, 2, 4, 6]}, {axis: [0, 0, 1], revolution: 0.75, delay: 0, slots: [1, 3, 5, 7]} ], // Horizontal flip lfh: [ {axis: [0, 1, 0], revolution: 0.5, delay: 0, slots: [0, 7]}, {axis: [0, 1, 0], revolution: 0.5, delay: 0, slots: [1, 6]}, {axis: [0, 1, 0], revolution: 0.5, delay: 0, slots: [2, 5]}, {axis: [0, 1, 0], revolution: 0.5, delay: 0, slots: [3, 4]} ], rfh: [ {axis: [0, 1, 0], revolution: 0.5, delay: 0, slots: [0, 7]}, {axis: [1, 0, 0], revolution: 0.5, delay: 0, slots: [1, 2]}, {axis: [0, -1, 0], revolution: 0.5, delay: 0, slots: [3, 4]}, {axis: [-1, 0, 0], revolution: 0.5, delay: 0, slots: [5, 6]} ], // Vertical flip lfv: [ {axis: [1, 0, 0], revolution: 0.5, delay: 0, slots: [0, 3]}, {axis: [1, 0, 0], revolution: 0.5, delay: 0, slots: [1, 2]}, {axis: [1, 0, 0], revolution: 0.5, delay: 0, slots: [4, 7]}, {axis: [1, 0, 0], revolution: 0.5, delay: 0, slots: [5, 6]} ], rfv: [ {axis: [1, 0, 0], revolution: 0.5, delay: 0, slots: [0, 3]}, {axis: [0, 1, 0], revolution: 0.5, delay: 0, slots: [1, 6]}, {axis: [0, -1, 0], revolution: 0.5, delay: 0, slots: [2, 5]}, {axis: [-1, 0, 0], revolution: 0.5, delay: 0, slots: [4, 7]} ], // Diagonal flip 1 (top-right to bottom-left) lfd1: [ {axis: [1, 1, 0], revolution: 0.5, delay: 0, slots: [0, 1]}, {axis: [1, 1, 0], revolution: 0.5, delay: 0, slots: [7, 2]}, {axis: [1, 1, 0], revolution: 0.5, delay: 0, slots: [6, 3]}, {axis: [1, 1, 0], revolution: 0.5, delay: 0, slots: [5, 4]} ], rfd1: [ {axis: [1, 1, 0], revolution: 0.5, delay: 0, slots: [0, 1]}, {axis: [1, -1, 0], revolution: 0.5, delay: 0, slots: [2, 3]}, {axis: [-1, -1, 0], revolution: 0.5, delay: 0, slots: [4, 5]}, {axis: [-1, 1, 0], revolution: 0.5, delay: 0, slots: [6, 7]} ], // Diagonal flip 2 (top-left to bottom-right) lfd2: [ {axis: [1, -1, 0], revolution: 0.5, delay: 0, slots: [0, 5]}, {axis: [1, -1, 0], revolution: 0.5, delay: 0, slots: [1, 4]}, {axis: [1, -1, 0], revolution: 0.5, delay: 0, slots: [2, 3]}, {axis: [1, -1, 0], revolution: 0.5, delay: 0, slots: [6, 7]} ], rfd2: [ {axis: [1, -1, 0], revolution: 0.5, delay: 0, slots: [0, 5]}, {axis: [-1, 1, 0], revolution: 0.5, delay: 0, slots: [1, 4]}, {axis: [-1, -1, 0], revolution: 0.5, delay: 0, slots: [2, 7]}, {axis: [1, 1, 0], revolution: 0.5, delay: 0, slots: [3, 6]} ], })33:T716,sequences = ({ // Left action sequences l0: [{direction: true, move: moves.l0}], l1: [{direction: true, move: moves.l180}], l2: [{direction: true, move: moves.l90}], l3: [{direction: true, move: moves.lfh}], l4: [{direction: true, move: moves.lfv}], l5: [{direction: true, move: moves.lfd1}], l6: [{direction: true, move: moves.lfd2}], l7: [ {direction: true, move: moves.lfh}, {direction: true, move: moves.lfv}, {direction: false, move: moves.lfh}, {direction: false, move: moves.lfv}, ], l8: [ {direction: true, move: moves.lfd1}, {direction: true, move: moves.lfd2}, {direction: false, move: moves.lfd1}, {direction: false, move: moves.lfd2}, ], l9: [ {direction: true, move: moves.lfh}, {direction: true, move: moves.lfd1}, {direction: true, move: moves.lfv}, {direction: true, move: moves.lfd2}, {direction: false, move: moves.lfh}, {direction: false, move: moves.lfd1}, {direction: false, move: moves.lfv}, {direction: false, move: moves.lfd2}, ], // Right action sequences r0: [{direction: true, move: moves.r0}], // r1 cycles through one 180° rotation with per-slot polarity: even slots // tumble toward the camera, odd slots tumble away. r1: [{direction: true, move: moves.r180}], r2: [{direction: true, move: moves.r90}], r3: [{direction: true, move: moves.rfh}], r4: [{direction: true, move: moves.rfv}], r5: [{direction: true, move: moves.rfd1}], r6: [{direction: true, move: moves.rfd2}], r7: [ {direction: true, move: moves.rfh}, {direction: true, move: moves.rfv} ], r8: [ {direction: true, move: moves.rfd1}, {direction: false, move: moves.rfd2} ], r9: [ {direction: true, move: moves.rfh}, {direction: true, move: moves.rfd1}, ] })34:T2490,html``35:Tf95, ### My Interpretation This mandala shows the [symmetry of the square][1]. The eight districts with small red lights in the heart _{${Hermetica.society}} are [holons][2]. Each [holon][2] _{${Hermetica.holon}} reflects the overall order of the square, but in a asymmetric, individual way according the roads and rubies it borders. This is necessary for each to differentiate itself from the [pleroma][3], and to create the emptiness necessary for movement and life. When Jung originally imagined this mandala, he assumed he was the very center, but later recanted when he realized his conscious residence was just off the corner of one of the minor lights. Even though each individual holon is asymmetric, the whole society of eight holons completes itself in the greater rotundum. This relationship between the source and its distributed manifestation is the meaning of the circle and dot _{${Hermetica.sun1}} in the [sun][7] and the [monad][8] symbol. Eight directions emanate from the chaos at the center _{${Hermetica.chaos}}. The longer length of the blue star's cardinal rays _{${Hermetica.cardinal}} indicates up, down, left, right are the primary directions. The [four part sun cross][10] _{${Hermetica.sun4}} and the [eight part sun cross][14] _{${Hermetica.sun8}} incorporates this with the solar symbol. Each reflection fixes a major road radiating out from the center park which contain an opposing pair_{${Hermetica.opposition}}of two rubies, which have [differentiated][11] from the masse confusion in the center. The circular wall with eight gates, the outer _{${Hermetica.boundary}} part of _{${Hermetica.sun8}}, is [Horos][12], which prevents the polarities from being reabsorbed by maintaining the seperation of the inner totality from the outer polarity _{${Hermetica.being}}. Even though being implies a loss of wholeness, it also implies an equal and opposite way of being, which may ultimately be reconsiled in the [hieros gamos][15] _{${Hermetica.hierosGamos}} to reobtain balance and a semblance of the whole. Each side in the square road _{${Hermetica.road}} connects two round rubies through a rectangular ruby _{${Hermetica.side}}. The rotation is in 90 degree increments _{${Hermetica.lauburu}} due to the dissimilarity between the cardinal and ordinal points, embodied in the shape of the square. Each of the eight holons is the expression of an eigth of the square road connecting a round ruby to a rectangular ruby _{${Hermetica.rubies}}. The radial roads dead end at the park, but the rotations around the square road allows [circumambulation][13] to the other side, connecting all districts into a dialectic whole. [Reflexivity][4] _{${Hermetica.ouroboros}} is necessary for consciousness to [self actualize][5] in a [cybernetic][6] feedback loop. A group can act on a set of objects and on itself, making it a reflexive [second-order cybernetic][9] schema. In addition to giving Jung peace about the problem of good and evil, the mandala also foretells the transformation of the world. [1]:https://en.wikipedia.org/wiki/Group_(mathematics)#Second_example:_a_symmetry_group [2]:https://en.wikipedia.org/wiki/Holon_(philosophy) [3]:https://en.wikipedia.org/wiki/Pleroma#Gnosticism [4]:https://en.wikipedia.org/wiki/Reflexive_relation [5]:http://ctmucommunity.org/wiki/Telic_Principle [6]:https://en.wikipedia.org/wiki/Cybernetics [7]:https://en.wikipedia.org/wiki/Solar_symbol#Astronomical_symbol [8]:https://en.wikipedia.org/wiki/Monad_(philosophy) [9]:https://en.wikipedia.org/wiki/Second-order_cybernetics [10]:https://en.wikipedia.org/wiki/Sun_cross [11]:https://en.wikipedia.org/wiki/Albedo_(alchemy) [12]:https://en.wikipedia.org/wiki/Aeon_(Gnosticism)#Horos [13]:https://en.wikipedia.org/wiki/Circumambulation [14]:https://en.wikipedia.org/wiki/Dharmachakra [15]:https://en.wikipedia.org/wiki/Hieros_gamos 36:T28cf,Hermetica = { let size = 19 let society = `` let holon = `` let sun1 = `` let chaos = `` let cardinal = `` let sun4 = `` let sun8 = `` let being = `` let opposition = `` let boundary = `` let hierosGamos = ` ` let road = `` let side = `` let lauburu = `` let rubies = `` let ouroboros = `` return ({ society: society, holon: holon, sun1: sun1, chaos: chaos, cardinal: cardinal, sun4: sun4, sun8: sun8, being: being, opposition: opposition, boundary: boundary, hierosGamos: hierosGamos, road: road, side: side, lauburu: lauburu, rubies: rubies, ouroboros: ouroboros }) }37:[{"id":"5259e88a65362c299c5c50689b004369476a9c439340e33488f48bc3564d34b34e09bd1dc5105a7b83355b8dd79fc6cf48e2289d3fba9b18ae98ed972d852769","href":"https://static.observableusercontent.com/files/5259e88a65362c299c5c50689b004369476a9c439340e33488f48bc3564d34b34e09bd1dc5105a7b83355b8dd79fc6cf48e2289d3fba9b18ae98ed972d852769","name":"Light_Blue_Rays.jpg","type":"image/jpeg","lastModified":1626477724904.602,"size":29077},{"id":"7a161bc140a5bb911f119ded7ed8bc35a438c1a06d9829f296e0bb9247283e76b3f3de2d62d4941cfe2d0f763332fcb925063cd313b45e23f67df4e544961042","href":"https://static.observableusercontent.com/files/7a161bc140a5bb911f119ded7ed8bc35a438c1a06d9829f296e0bb9247283e76b3f3de2d62d4941cfe2d0f763332fcb925063cd313b45e23f67df4e544961042","name":"Light_Red@1.jpg","type":"image/jpeg","lastModified":1626484579919.498,"size":30644},{"id":"b1e37abedd67ac89994be2a9d51865e2b6060238a89fb9def327930a62cf6d084381c5c929fe1919f4a339a2506e2489d15f376128dc11da24a21a3dfb18489d","href":"https://static.observableusercontent.com/files/b1e37abedd67ac89994be2a9d51865e2b6060238a89fb9def327930a62cf6d084381c5c929fe1919f4a339a2506e2489d15f376128dc11da24a21a3dfb18489d","name":"Walls_Texture@4.jpg","type":"image/jpeg","lastModified":1626753925851.158,"size":849446},{"id":"75b5ea79100c9ce2219fb6ed846ed85cde26e07f1f73014d9ee19744a0046bb36bde4129847c1323e69db12b5b670c3e2e9cbe789ab72d3972085c31be0ac27f","href":"https://static.observableusercontent.com/files/75b5ea79100c9ce2219fb6ed846ed85cde26e07f1f73014d9ee19744a0046bb36bde4129847c1323e69db12b5b670c3e2e9cbe789ab72d3972085c31be0ac27f","name":"Center_Texture@3.jpg","type":"image/jpeg","lastModified":1626754630439.069,"size":422764},{"id":"722191ad39af37ecc53593a5cc8a94bae4d7704d3b00a32ee8f64c1206243f1e582cd9de3b395e230b36f10209d4294c265fce3db5910f93a5d88551b3f689df","href":"https://static.observableusercontent.com/files/722191ad39af37ecc53593a5cc8a94bae4d7704d3b00a32ee8f64c1206243f1e582cd9de3b395e230b36f10209d4294c265fce3db5910f93a5d88551b3f689df","name":"window-background-3.png","type":"image/png","lastModified":1778443192678.329,"size":2457617}] 2f:{"id":"8256623296d55f9d","slug":"jungs-window-mandala","title":"Jung's Window Mandala","thumbnail":"396d708c0e550ec37f75f3c8c66da0b62bf98f219413c9db56bd424be7f96339","access_level":"public","create_time":"$D2021-03-21T09:22:21.504Z","update_time":"$D2026-07-22T16:59:40.896Z","view_time":null,"first_public_time":"$D2021-07-17T05:17:40.186Z","fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"cf45be0120eccaad","login":"laotzunami","name":"Lao","avatar_url":"https://avatars-next.observableusercontent.com/aeddc181df6ca80a347940ba62e17601ac6395e9d2c21142887eca5fd277326a","tier":"starter_2024"},"version":2558,"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"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Jung's Window Mandala","cells":[{"id":0,"value":"# Jung's Window Mandala","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":588,"value":"md` Jung described the final mandala he painted as: \n>A luminous flower in the center, with stars rotating about it. Around the flower, walls with eight gates. The whole conceived as a transparent window... The rose in the center is depicted as a ruby, its outer ring being conceived as a wheel, or a wall with gates (so that nothing can come out from inside or go in from outside)... [The rose] shone like a four-rayed star. The square represents the wall of the park and at the same time a street leading round the park in a square. From it radiate eight main streets, and from each of these eight side-streets, which meet in a shining red central point.
\n

Red Book, page 318, footnote 296

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2213,"value":"-------------------","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2294,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2298,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1828,"value":"md` **Left click** or **tap** to show an invariat subset under the subgroup action
\n**Right click** to turn individual wedges on and off.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2231,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":645,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2478,"value":"### Assets ###","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":552,"value":"md`###
Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"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":1840,"value":"import { inputsGroup } from '@bumbeishvili/input-groups'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":803,"value":"import {select} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1854,"value":"import {slider} from '@bartok32/diy-inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":857,"value":"md`###
Images`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":148,"value":"back = FileAttachment(\"window-background-3.png\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":102,"value":"pleroma = FileAttachment(\"Center_Texture@3.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":121,"value":"hysterema = FileAttachment(\"Walls_Texture@4.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":416,"value":"flare = FileAttachment(\"Light_Red@1.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":473,"value":"rays = FileAttachment(\"Light_Blue_Rays.jpg\").url()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2003,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 30:"$2f:body"