2e:null 2f:["$","title",null,{"children":"Sphere in nnn dimensions | Yao Liu | Observable"}] 34:T46ba,{ const container = document.createElement("div"); container.style.fontFamily = "system-ui, sans-serif"; container.style.maxWidth = "1100px"; container.style.margin = "0 auto"; // --- Responsive CSS Injection --- const style = document.createElement("style"); style.textContent = ` .main-layout { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; } .math-box { order: 1; /* Above SVG on mobile */ background: #f8f9fa; border: 1px solid #eaeaea; border-radius: 8px; padding: 16px; font-family: Georgia, "Times New Roman", serif; color: #333; font-size: clamp(14px, 3.5vw, 18px); } .math-block { display: flex; flex-direction: column; align-items: flex-end; /* Right-aligns the block contents */ margin-bottom: 16px; } .math-block:last-child { margin-bottom: 0; } .math-row { display: flex; align-items: center; justify-content: flex-end; /* Right-aligns the row */ flex-wrap: wrap; gap: 6px; } .numerical-row { margin-top: 6px; font-size: 1.05em; } .svg-wrapper { order: 2; /* Below math on mobile */ position: relative; width: 100%; aspect-ratio: 1 / 1; /* Square on mobile */ background: #fcfcfc; border: 1px solid #eaeaea; border-radius: 8px; overflow: hidden; } /* LaTeX-style Fraction Classes */ .frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.1; margin: 0 4px; } .frac .num { border-bottom: 1px solid #333; padding: 0 6px 2px; } .frac .den { padding: 2px 6px 0; } /* DESKTOP LAYOUT */ @media (min-width: 800px) { .main-layout { position: relative; display: block; } .svg-wrapper { aspect-ratio: 16 / 9; /* Ultra-wide desktop canvas */ } .math-box { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); width: 38%; /* Fills the empty right side of the canvas */ background: transparent; border: none; padding: 0; z-index: 10; pointer-events: none; /* Let clicks pass to SVG */ } } `; container.appendChild(style); // --- DOM Layout --- const layout = document.createElement("div"); layout.className = "main-layout"; container.appendChild(layout); const mathDiv = document.createElement("div"); mathDiv.className = "math-box"; layout.appendChild(mathDiv); const svgWrapper = document.createElement("div"); svgWrapper.className = "svg-wrapper"; layout.appendChild(svgWrapper); const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); svg.style.width = "100%"; svg.style.height = "100%"; svgWrapper.appendChild(svg); // --- UI Controls (Bottom) --- const controls = document.createElement("div"); controls.style.display = "flex"; controls.style.alignItems = "center"; controls.style.justifyContent = "center"; controls.style.gap = "15px"; const btnStyle = ` width: 50px; height: 50px; font-size: 28px; font-weight: bold; cursor: pointer; border-radius: 8px; border: 1px solid #ccc; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 4px rgba(0,0,0,0.05); color: #333; user-select: none; touch-action: manipulation; `; const btnMinus = document.createElement("button"); btnMinus.innerHTML = "−"; btnMinus.style.cssText = btnStyle; const nLabel = document.createElement("div"); nLabel.style.fontSize = "22px"; nLabel.style.fontWeight = "600"; nLabel.style.width = "40px"; nLabel.style.textAlign = "center"; nLabel.style.userSelect = "none"; const btnPlus = document.createElement("button"); btnPlus.innerHTML = "+"; btnPlus.style.cssText = btnStyle; const btnRun = document.createElement("button"); btnRun.textContent = "Rotate"; btnRun.style.cssText = ` height: 50px; padding: 0 24px; font-size: 16px; cursor: pointer; border-radius: 8px; font-weight: 600; border: 1px solid #007BFF; background: #007BFF; color: white; box-shadow: 0 2px 4px rgba(0,123,255,0.2); margin-left: 10px; touch-action: manipulation; letter-spacing: 0.5px; `; controls.append(btnMinus, nLabel, btnPlus, btnRun); container.append(controls); // --- Math Helpers --- function randn() { let u = 0, v = 0; while(u === 0) u = Math.random(); while(v === 0) v = Math.random(); return Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v); } function generateW(n) { let r = Array.from({length: n}, randn); let mean = r.reduce((a,b) => a+b, 0) / n; let w = r.map(x => x - mean); let norm = Math.sqrt(w.reduce((a,b) => a + b*b, 0)); return w.map(x => x / norm); } function factorial(k) { if (k <= 1) return 1; return k * factorial(k - 1); } function doubleFactorial(k) { if (k <= 1) return 1; return k * doubleFactorial(k - 2); } function getNumericalVolume(n) { let k = Math.floor(n / 2); if (n % 2 === 0) return Math.pow(Math.PI, k) / factorial(k); else return (Math.pow(2, k + 1) * Math.pow(Math.PI, k)) / doubleFactorial(n); } function getSimplifiedVolume(n) { let k = Math.floor(n / 2); let num_coeff = (n % 2 === 0) ? 1 : Math.pow(2, k + 1); let num_pi_power = k; let den_coeff = (n % 2 === 0) ? factorial(k) : doubleFactorial(n); let piStr = ""; if (num_pi_power === 1) piStr = "π"; else if (num_pi_power > 1) piStr = `π^{${num_pi_power}}`; let numStr = ""; if (num_coeff === 1 && piStr !== "") numStr = piStr; else if (num_coeff !== 1) numStr = `${num_coeff}${piStr}`; else numStr = "1"; if (den_coeff === 1) return `${numStr}`; return `${numStr}${den_coeff}`; } function getSimplifiedOrthant(n) { let k = Math.floor(n / 2); let num_pi_power = k; let den_coeff = (n % 2 === 0) ? Math.pow(2, 2*k) * factorial(k) : Math.pow(2, k) * doubleFactorial(n); let piStr = ""; if (num_pi_power === 0) piStr = "1"; else if (num_pi_power === 1) piStr = "π"; else piStr = `π^{${num_pi_power}}`; return `${piStr}${den_coeff}`; } let n = 3; let w = generateW(n); let wTarget = generateW(n); const rotSpeed = 0.012; let isRunning = false; let animFrame = null; let canvasWidth = 800, canvasHeight = 600; function updateUI() { nLabel.textContent = n; let volStr = getSimplifiedVolume(n); let numVol = getNumericalVolume(n); let orthStr = getSimplifiedOrthant(n); let numOrth = numVol / Math.pow(2, n); mathDiv.innerHTML = `

Volume of n-ball = π n/2 (n/2)! = ${volStr} \approx ${numVol.toFixed(4)}

Spherical Orthant Unit Cube = ${orthStr} \approx ${numOrth.toFixed(4)}

`; } // --- Main Render Engine --- function render() { svg.innerHTML = ""; svg.setAttribute("viewBox", `0 0 ${canvasWidth} ${canvasHeight}`); // ABSOLUTE FIXED SCALE LOGIC // The scale is strictly a fraction of the canvasHeight. // It does not change with 'n', so you visually see higher dimensions grow! const scale = canvasHeight * 0.28; // Origin is locked perfectly in place relative to the screen bounds. let originX, originY; if (canvasWidth > canvasHeight * 1.2) { originX = canvasHeight * 0.20; // Anchored left on wide desktop originY = canvasHeight * 0.85; // Anchored bottom } else { originX = canvasWidth * 0.15; // Anchored left on narrow mobile originY = canvasHeight * 0.85; // Anchored bottom } const mapX = (X) => originX + X * scale; const mapY = (Y) => originY - Y * scale; let points =[]; let edges =[]; const numVertices = 1 << n; for (let i = 0; i < numVertices; i++) { let k = 0, z = 0; for (let j = 0; j < n; j++) { if ((i & (1 << j)) !== 0) { k++; z += w[j]; } } let u = k / Math.sqrt(n); let X = (u + z) / Math.SQRT2; let Y = (u - z) / Math.SQRT2; points.push({ i, k, X, Y }); } for (let i = 0; i < numVertices; i++) { for (let j = 0; j < n; j++) { if ((i & (1 << j)) === 0) { edges.push({ source: i, target: i | (1 << j) }); } } } let orthantPts =[]; const steps = 400; for (let i = 0; i < steps; i++) { let theta = (i / steps) * 2 * Math.PI; let cosT = Math.cos(theta); let sinT = Math.sin(theta); let d =[], k_pos = 0, sum_d2 = 0; for (let j = 0; j < n; j++) { let dj = cosT / Math.sqrt(n) + sinT * w[j]; d.push(dj); if (dj > 0) { k_pos++; sum_d2 += dj * dj; } } let X = 0, Y = 0; if (k_pos > 0) { let L = Math.sqrt(sum_d2); let u = 0, z = 0; for (let j = 0; j < n; j++) { if (d[j] > 0) { let xj = d[j] / L; u += xj / Math.sqrt(n); z += xj * w[j]; } } X = (u + z) / Math.SQRT2; Y = (u - z) / Math.SQRT2; } orthantPts.push({ X, Y }); } const shadowPoly = document.createElementNS("http://www.w3.org/2000/svg", "polygon"); shadowPoly.setAttribute("points", orthantPts.map(p => `${mapX(p.X)},${mapY(p.Y)}`).join(" ")); shadowPoly.setAttribute("fill", "rgba(0, 123, 255, 0.08)"); svg.appendChild(shadowPoly); const edgeGroup = document.createElementNS("http://www.w3.org/2000/svg", "g"); edges.forEach(e => { const line = document.createElementNS("http://www.w3.org/2000/svg", "line"); let p1 = points[e.source]; let p2 = points[e.target]; line.setAttribute("x1", mapX(p1.X)); line.setAttribute("y1", mapY(p1.Y)); line.setAttribute("x2", mapX(p2.X)); line.setAttribute("y2", mapY(p2.Y)); line.setAttribute("stroke", "rgba(160, 160, 160, 0.3)"); line.setAttribute("stroke-width", 1.5); edgeGroup.appendChild(line); }); for (let j = 0; j < n; j++) { let p1 = points[0], p2 = points[1 << j]; const axisEdge = document.createElementNS("http://www.w3.org/2000/svg", "line"); axisEdge.setAttribute("x1", mapX(p1.X)); axisEdge.setAttribute("y1", mapY(p1.Y)); axisEdge.setAttribute("x2", mapX(p2.X)); axisEdge.setAttribute("y2", mapY(p2.Y)); axisEdge.setAttribute("stroke", "rgba(0, 180, 50, 0.6)"); axisEdge.setAttribute("stroke-width", 2.5); edgeGroup.appendChild(axisEdge); } svg.appendChild(edgeGroup); const arcGroup = document.createElementNS("http://www.w3.org/2000/svg", "g"); for (let i = 1; i < (1 << n); i++) { let I =[]; for (let j = 0; j < n; j++) if ((i & (1 << j))) I.push(j); let k = I.length; if (k < 2) continue; let left = -Math.PI, right = Math.PI; for (let j of I) { let theta = Math.atan2(w[j], 1 / Math.sqrt(n)); left = Math.max(left, theta - Math.PI / 2); right = Math.min(right, theta + Math.PI / 2); } let arcPts =[]; const arcSteps = k === n ? 80 : Math.max(10, 30 - n * 2); for(let step = 0; step <= arcSteps; step++) { let phi = left + (right - left) * (step / arcSteps); let cosP = Math.cos(phi), sinP = Math.sin(phi); let u_val = 0, z_val = 0, norm2 = 0; for (let j of I) { let wx = cosP / Math.sqrt(n) + sinP * w[j]; if (wx < 0) wx = 0; u_val += wx / Math.sqrt(n); z_val += wx * w[j]; norm2 += wx * wx; } if (norm2 > 1e-9) { let L = Math.sqrt(norm2); let X = (u_val/L + z_val/L) / Math.SQRT2; let Y = (u_val/L - z_val/L) / Math.SQRT2; arcPts.push({X, Y}); } } const poly = document.createElementNS("http://www.w3.org/2000/svg", "polyline"); poly.setAttribute("points", arcPts.map(p => `${mapX(p.X)},${mapY(p.Y)}`).join(" ")); poly.setAttribute("fill", "none"); if (k === n) { poly.setAttribute("stroke", "#007BFF"); poly.setAttribute("stroke-width", 3.5); } else if (k === 2) { poly.setAttribute("stroke", "rgba(232, 62, 140, 0.7)"); poly.setAttribute("stroke-width", 1.5); } else { let ratio = (k - 2) / (n - 2); let r = Math.round(232 + ratio * (0 - 232)); let g = Math.round(62 + ratio * (123 - 62)); let b = Math.round(140 + ratio * (255 - 140)); poly.setAttribute("stroke", `rgba(${r}, ${g}, ${b}, ${0.7 + 0.3*ratio})`); poly.setAttribute("stroke-width", 1.5 + 1.5 * ratio); } poly.setAttribute("stroke-linecap", "round"); arcGroup.appendChild(poly); } svg.appendChild(arcGroup); const axis = document.createElementNS("http://www.w3.org/2000/svg", "line"); axis.setAttribute("x1", mapX(0)); axis.setAttribute("y1", mapY(0)); axis.setAttribute("x2", mapX(Math.sqrt(n/2))); axis.setAttribute("y2", mapY(Math.sqrt(n/2))); axis.setAttribute("stroke", "#888"); axis.setAttribute("stroke-width", 2); axis.setAttribute("stroke-dasharray", "5,5"); svg.appendChild(axis); const nodeGroup = document.createElementNS("http://www.w3.org/2000/svg", "g"); points.forEach(p => { const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle"); circle.setAttribute("cx", mapX(p.X)); circle.setAttribute("cy", mapY(p.Y)); circle.setAttribute("r", 5.5); circle.setAttribute("fill", `hsl(${(p.k / n) * 280}, 85%, 60%)`); circle.setAttribute("stroke", "#fff"); circle.setAttribute("stroke-width", 1); nodeGroup.appendChild(circle); }); svg.appendChild(nodeGroup); const addLabel = (X, Y, txtEl, ox, oy) => { txtEl.setAttribute("x", mapX(X) + ox); txtEl.setAttribute("y", mapY(Y) + oy); txtEl.setAttribute("font-family", "Georgia, 'Times New Roman', serif"); txtEl.setAttribute("fill", "#555"); svg.appendChild(txtEl); }; const originLabel = document.createElementNS("http://www.w3.org/2000/svg", "text"); originLabel.setAttribute("text-anchor", "end"); originLabel.setAttribute("font-style", "italic"); originLabel.setAttribute("font-size", "18px"); originLabel.textContent = "0"; addLabel(0, 0, originLabel, -12, 20); const farLabel = document.createElementNS("http://www.w3.org/2000/svg", "text"); farLabel.setAttribute("font-size", "20px"); farLabel.innerHTML = `√n`; addLabel(Math.sqrt(n/2), Math.sqrt(n/2), farLabel, 12, -10); } function animationStep() { if (!isRunning) return; let dot = w.reduce((sum, val, i) => sum + val * wTarget[i], 0); dot = Math.max(-1, Math.min(1, dot)); let theta = Math.acos(dot); if (theta <= rotSpeed) { w = wTarget.slice(); wTarget = generateW(n); } else { let v = wTarget.map((val, i) => val - dot * w[i]); let norm_v = Math.sqrt(v.reduce((sum, x) => sum + x * x, 0)); if (norm_v > 1e-8) { v = v.map(x => x / norm_v); let cosS = Math.cos(rotSpeed), sinS = Math.sin(rotSpeed); w = w.map((val, i) => val * cosS + v[i] * sinS); let mean_w = w.reduce((sum, x) => sum + x, 0) / n; w = w.map(x => x - mean_w); let norm_w = Math.sqrt(w.reduce((sum, x) => sum + x * x, 0)); w = w.map(x => x / norm_w); } else { wTarget = generateW(n); } } render(); animFrame = requestAnimationFrame(animationStep); } function setDimension(newN) { if (newN >= 2 && newN <= 10) { n = newN; w = generateW(n); wTarget = generateW(n); updateUI(); if (!isRunning) render(); } } btnMinus.addEventListener("click", () => setDimension(n - 1)); btnPlus.addEventListener("click", () => setDimension(n + 1)); btnRun.addEventListener("click", () => { isRunning = !isRunning; if (isRunning) { btnRun.textContent = "Stop"; btnRun.style.background = "#DC3545"; btnRun.style.borderColor = "#DC3545"; animationStep(); } else { btnRun.textContent = "Rotate"; btnRun.style.background = "#007BFF"; btnRun.style.borderColor = "#007BFF"; if (animFrame) cancelAnimationFrame(animFrame); } }); const resizeObserver = new ResizeObserver(entries => { for (let entry of entries) { if (entry.contentRect.width > 0) { canvasWidth = entry.contentRect.width; canvasHeight = entry.contentRect.height; render(); } } }); resizeObserver.observe(svgWrapper); updateUI(); return container; }35:[] 32:{"id":"3245c62b686c532e","slug":"sphere-in-n-dimensions","title":"Sphere in nnn dimensions","thumbnail":"8d2b6f5bcaaf3a0f06fe81834c790ba875adeddb2a57c4938f63bda71442d1ae","access_level":"public","create_time":"$D2026-03-14T00:50:10.842Z","update_time":"$D2026-03-24T04:11:55.857Z","view_time":null,"first_public_time":"$D2026-03-14T01:20:46.166Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"490427fcc4ec2c1d","login":"liuyao12","name":"Yao Liu","avatar_url":"https://avatars-next.observableusercontent.com/895964f8b86922c183ea757cd86944e8e9d463ef5ba08171fab539d4dc087c54","tier":"starter_2024"},"version":109,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ae908de8dd38723a","login":"liuyao12","name":"Yao Liu","avatar_url":"https://avatars-next.observableusercontent.com/895964f8b86922c183ea757cd86944e8e9d463ef5ba08171fab539d4dc087c54","tier":null}],"members":[{"type":"team","id":"490427fcc4ec2c1d","login":"liuyao12","name":"Yao Liu","avatar_url":"https://avatars-next.observableusercontent.com/895964f8b86922c183ea757cd86944e8e9d463ef5ba08171fab539d4dc087c54","tier":"starter_2024","role":"editor"},{"type":"individual","id":"ae908de8dd38723a","login":"liuyao12","name":"Yao Liu","avatar_url":"https://avatars-next.observableusercontent.com/895964f8b86922c183ea757cd86944e8e9d463ef5ba08171fab539d4dc087c54","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Sphere in nnn dimensions","cells":[{"id":0,"value":"# Sphere in ${tex`n`} dimensions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"* Code by Gemini\n* Inspired by 3blue1brown's video: https://www.youtube.com/watch?v=fsLh-NYhOoU\n\nThe volume of the unit ball in dimension ${tex`n`} is given by the remarkably simple formula ${tex`\\dfrac{\\pi^{n/2}}{(n/2)!}`}, which vanishes as ${tex`n \\to \\infty`}. Projecting the ball in the two-dimensional screen is not very illuminating. However, we can do it for the quadrant/octant/... or the *orthant* of the unit ball, where all the coordinates are positive, sitting in the box ${tex`[0,1]^n`} like this (with the longest diagonal fixed):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"The moral is that there is a lot more room in higher dimensions, even within the unit cube ${tex`[0,1]^n`}. Another indicator of the moral is the kissing number, the maximum number of spheres/balls (of the same size) you can fit around a given ball, with no overlapping.\n\n| ${tex`n`} | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 24 |\n|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|:---:|\n| ${tex`K_n`} | 6 | 12 | 24 | 40–44 | 72–77 | 126–134 | 240 | 306–363 | 510–553 | 196560 |\n| ${tex`2^n`} | 4 | 8 | 16 | 32 | 64 | 128 | 256 | 512 | 1024 | 16777216 |\n\nThat means there's less than one ball per unit ball, as you past dimension 8.\n\nIt's perhaps more interesting to pack spherical quadrants (with ever smaller radii) inside the unit cube, similar to Apollonian circle packings. The total volume should approach 1.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"### The Rotation Mechanism\n\nTo animate the projection, the viewing direction is defined by a unit vector strictly orthogonal to the main diagonal. This mathematically confines all valid projection angles to the surface of an ${tex`(n-2)`}-dimensional sphere. \n\nInstead of a jittery random walk, the animation uses **Spherical Linear Interpolation (SLERP)**. The system selects a random target projection on this sphere and smoothly rotates directly toward it along the shortest possible path (a great circle). Upon arriving, it instantly picks a new random target and pivots. \n\nThis creates elegant, sweeping arcs through high-dimensional configuration spaces. In 3D, where the available projection space is merely a 1D circle, this method naturally forces the visualization to sweep gracefully back and forth like a pendulum.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"