Saved in:
Bibliographic Details
Main Author: Oulad Brahim, Elias
Format: Recurso digital
Language:English
Published: Zenodo 2026
Online Access:https://doi.org/10.5281/zenodo.19481996
Tags: Add Tag
No Tags, Be the first to tag this record!
Table of Contents:
  • <p>Companion materials to "The D-Space Seesaw: Resolution of the Yang-Mills Mass Gap Problem" (Elias Oulad Brahim, 2026).</p> <p> </p> <p>This deposit contains three interactive React artifacts visualizing the recursive seesaw mechanism that derives the Yang-Mills mass gap and the pion mass from a single algebraic identity.</p> <p> </p> <p>1. The Recursive Seesaw (seesaw-recursion.jsx)</p> <p>Animated diagram showing the three levels of the D-Space seesaw: confinement at φ¹² = 322 MeV, the mass gap at φ²⁴/60 = 1728 MeV, and the pion at φ²²·⁵/360 = 139.9 MeV. Each level applies the same operation: the exponent shifts by −Nc/2 and the denominator expands by ×2Nc. The visualization tracks each scale in the D-Space building and displays the mechanism connecting them. Interactive: tap each level to explore.</p> <p> </p> <p>2. Inside the Glueball (glueball.jsx)</p> <p>Three-phase animation of the glueball's internal structure. Phase 1 (Lock): the confinement boundary, 12 nodes connected by chromoelectric flux tubes at D = −12. Phase 2 (Square): the glueball itself, 60 color-charged degrees of freedom (3 colors × 5 rings of 12) sealed inside the confinement wall, with string tension lines and a pressure boundary. Phase 3 (Mirror): the pion emerging inside the glueball as a quark-antiquark pair (u, d̄) orbiting through a chiral cloud of 360 effective seats. Interactive: tap to switch between phases.</p> <p> </p> <p>3. Anatomy of the Glueball (glueball-layers.jsx)</p> <p>All three structural layers rendered simultaneously as concentric shells of a single animated particle. Outer shell (gold): the confinement boundary at Λ = φ¹² with 12 flux-tube-connected nodes. Middle shell (red): the 60 tri-colored seats of the glueball at Δ = φ²⁴/60. Inner core (blue): the pion as a quark-antiquark pair with vibrating flux tube, surrounded by the chiral cloud. This is the first visualization showing the glueball and the pion as nested iterations of the same confinement mechanism.</p> <p> </p> <p>Key result visualized: the pion mass (139.9 MeV, 0.26% from experiment) emerges as the second iteration of the seesaw that produces the glueball mass (1728 MeV, 0.23σ from lattice QCD). The recursive formula is m_π = Δ × Tc / (2Nc × ΛQCD), where every quantity on the right side is derived from φ and the Pythagorean triple (3, 4, 5) with zero free parameters.</p> <p> </p> <p>The identification of the pion as the "mass gap of the mass gap" is consistent with recent findings in holographic QCD (2025), where glueball dominance in pion gravitational form factors was established through the AdS/CFT correspondence. The present framework arrives at the same structural relationship from number theory rather than from the gravitational dual.</p> <p>4. Anatomy of Confinement (confinement-seesaw.jsx)</p> <p>Radial geometric visualization of the three-level confinement seesaw. Outer shell (gold): 12 flux-tube-connected nodes forming the confinement boundary at Λ = φ¹² = 322 MeV, with D = −Nc × Nst = −12. Middle shell (red): 60 color-charged gluonic degrees of freedom (|A₅| = 60) scattered across three rings inside the boundary, representing the glueball mass gap at Δ = φ²⁴/60 = 1728 MeV. Inner core (blue): a quark-antiquark pair connected by a vibrating flux tube, surrounded by a chiral cloud of 6 orbiting particles, representing the pion at m_π = φ²²·⁵/360 = 139.9 MeV. The confinement barrier is quantified: isolating a single color charge costs φ²⁸⁰ ≈ 10⁵⁸ MeV, exceeding the Planck mass by a factor of 10³⁶. The manifold partitions 840 states into 3 color channels of 280 = Nst × C(8,4) each, leaving no allowed address for an isolated color state. Interactive: tap each level to highlight its shell and see the seesaw mechanism connecting them.</p> <p> </p> <p>5. Proton Spin Decomposition (proton-spin-3d.jsx)</p> <p>Three-dimensional visualization of the proton spin-½ budget derived from the Pythagorean triple (3, 4, 5). Three coexisting wave modes fill the full proton volume as a quantum superposition. Red standing waves (9 radial modes): quark spin contribution ΔΣ/2 = Nc²/h² = 9/25 = 36.0% (experimental: 30 ± 6%, COMPASS/HERMES). Green curling vortex fields (3 color spirals with 2 arms each): gluon spin contribution ΔG = Nst²·Nc/(h²·L₄) = 48/175 = 27.4% (lattice QCD: 25 ± 10%). Blue orbital wavefunctions (4 spherical harmonic modes at different tilts): orbital angular momentum L = Nst³/(h²·L₄) = 64/175 = 36.6% (predicted, not yet isolated experimentally). The (3, 4, 5) triangle is inscribed at the center. The three fractions sum to unity with zero free parameters: 9/25 + 48/175 + 64/175 = 1. A hidden identity emerges: αs(Λ_QCD) = quark spin fraction = β₀/h² = 9/25 = 0.36, connecting the strong coupling at confinement to the spin structure through the same Pythagorean partition. Interactive: tap each component to isolate its wave mode while others fade. Drag to rotate the 3D sphere.</p> <p> </p> <p>6. Five Factorizations of αG (gravity-seesaw.jsx)</p> <p> </p> <p>Three-dimensional visualization of the gravity seesaw derived from the Brahim mirror spectrum. Ten Brahim numbers B = {27, 42, 60, 75, 97, 117, 139, 154, 172, 187} are arranged as nodes on a transparent sphere, sized proportionally to their values and colored by mirror pair. Five curved lines connect each pair through the center, representing five independent factorizations of the gravitational coupling: αG = φ^(−Bᵢ) × φ^(−B₁₁₋ᵢ), with each pair summing to S = 214. A golden mirror plane at the equator represents the mirror axis, tilted by the Nst/h² = 4/25 = 0.16 correction that shifts gravity from the exact center. The white central node marks K = 107 = Brahim mean = D(mₑ), the electron mass position. An orange offset marker shows the actual gravitational coupling at D(αG) = S + Nst/h² = 214.16, matching experiment to 647 ppm. The gravity seesaw parallels the QCD seesaw: QCD shifts by δ₄ = −3 (color deviation), gravity shifts by δ₅/h² = +0.16 (spacetime deviation divided by Pythagorean closure). Both corrections emerge from the same Brahim palindrome. Proton lifetime: τ_p = φ^(2 × 214.16) × t_Pl ≈ 10³⁸·⁷⁵ years, testable at Hyper-Kamiokande. Interactive: tap any mirror pair to isolate its factorization. Drag to rotate.</p> <p> </p> <p>7. Anatomy of the QCD Vacuum (qcd-vacuum.jsx)</p> <p> </p> <p>Three-dimensional visualization of the QCD vacuum as three nested transparent shells, each representing a distinct layer of vacuum structure connected by the RG seesaw. Outer shell (red): the gluon condensate ⟨(αs/π)G²⟩ = (β₀²/8π²)·φ⁴⁸ = 0.011 GeV⁴ (SVZ sum rules: 0.012 ± 0.006 GeV⁴), rendered as 12 turbulent field lines writhing through the confinement region. The RG seesaw squares the running: β₀ → β₀² = δ₄⁴ = 81, mirroring how the mass gap seesaw squares the energy (φ¹² → φ²⁴). Middle shell (purple): the quark condensate ⟨q̄q⟩^(1/3) = −287 MeV (experimental: −270 ± 30 MeV), rendered as 6 chiral wave rings at different 3D orientations with 20 quark-antiquark pair dots orbiting on the shell surface. Inner core (yellow): the strong CP parameter θ_QCD = φ^(−L₈) = φ⁻⁴⁷ = 1.5 × 10⁻¹⁰, rendered as 4 instanton winding spirals converging to an intense central point. L₈ = 47 is the eighth Lucas number. The predicted value sits just below the current experimental bound |θ| < 1.8 × 10⁻¹⁰ and will be definitively tested by the n2EDM experiment at PSI (sensitivity ~10⁻¹³). Topological susceptibility: χ_top^(1/4) = 80.2 MeV (lattice QCD: 75.5 ± 1.8 MeV). Interactive: tap each layer to isolate it. Drag to rotate.</p> <p> </p> <p>8. The Second Strong Force (dark-matter.jsx)</p> <p> </p> <p>Three-dimensional visualization of the E8/D4 coset decomposition showing visible and dark QCD as twin confining gauge theories. Two transparent spheres are displayed side by side. Left sphere (gold): visible QCD hadron spectrum — pion (140 MeV), rho meson (775 MeV), proton (938 MeV), delta baryon (1232 MeV) rendered as concentric particle shells orbiting at their mass radii. Right sphere (purple): dark QCD hadron spectrum — dark pion (736 MeV), dark rho (4.19 GeV), dark baryon (5.118 GeV, the dark matter candidate), dark delta (6.65 GeV), with four orange spiraling dark photon force carriers winding through the interior. Ten golden bridge arcs connecting the two spheres represent the 10 Brahim cosets of D4 within E8: 240 roots = 10 × 24. SO(8) triality gives Nc = 3 in both sectors. The confinement ratio φ³ = 4.236 is identical in both. The only difference is the mass scale, set by the manifold ratio 240/44. The dark baryon mass m_DM = 5.118 GeV is a specific testable prediction: XENONnT combined with the Migdal effect (confirmed at 5σ in Nature, January 2026) can now probe this exact mass range. Interactive: tap to isolate visible sector, dark sector, or the E8 bridge. Drag to rotate.</p> <p> </p> <p>9. The Depth of Dark Energy (dark-energy.jsx)</p> <p> </p> <p>Three-dimensional cosmic zoom traversing 122 orders of magnitude from the Planck scale to the cosmological constant. Six landmark shells are nested concentrically at exponentially increasing radii, each representing a structural floor of D-space. Planck origin (white, D = 0): the manifold's starting point. QCD confinement (gold, D = 12): Λ_QCD = φ¹² = 322 MeV. Electron mass (blue, D = 107): the Brahim mean K = 107, the center of mass of the entire spectrum. Gravity (green, D = 214): the mirror axis S = 214.16. Proton decay (red, D = 428): τ_p ≈ 10³⁸·⁷⁵ years. Cosmological constant (purple, D = 582): Λ_CC ≈ 10⁻¹²² M⁴_Pl. The suppression depth D(Λ_CC) = 840/(Nc·ln φ) = 581.86 translates to 581.86 × log₁₀(φ) = 121.6 orders of magnitude, matching the observed 121.55. Substructure: 840/3 = 280 = Nst × C(8,4), the full manifold partitioned by color in golden log units. The Hubble tension appears as a fork at D = 214: H₀(local)/H₀(CMB) = φ^(1/(2Nc)) = φ^(1/6) = 1.0835 (observed: 1.0843, deviation 754 ppm). The exponent 1/(2Nc) encodes color confinement as the physical mechanism separating the two cosmic epochs. Interactive: drag vertically to zoom through D-space. Contextual information cards appear at each landmark.</p> <p> </p> <p>10. The D-Space Journey (dspace-journey.jsx)</p> <p> </p> <p>Unified four-dimensional visualization combining all six phenomena into a single continuous traversal of D-space. The fourth dimension is the D-position itself: dragging vertically moves through the manifold from D = 0 (Planck) to D = 582 (cosmological constant), while dragging horizontally rotates the 3D geometry. The visualization morphs continuously between six phases. Phase 1 (D = 0–50): a white Planck origin, 12 confinement nodes materialize connected by flux tubes. Phase 2 (D = 8–60): red standing waves fill the sphere — proton spin — with the (3,4,5) triangle at center. Phase 3 (D = 50–300): confinement nodes dissolve as 10 Brahim nodes crystallize at mirror positions, five pair lines thread through center, the gravity offset marker pulses at D = 214. Phase 4 (D = 220–430): Brahim nodes smoothly migrate to vacuum shell positions, colors shifting from pair-colors to vacuum-shell colors; turbulent gluon field lines, chiral rings, and instanton windings emerge as the nodes arrive. Phase 5 (D = 380–540): the sphere splits into twin visible/dark QCD sectors connected by golden E8 bridge arcs. Phase 6 (D = 470–582): a vast purple void shell expands outward, engulfing all prior structures which contract to a bright core; 60 particles drift outward representing accelerating expansion; the Hubble tension fork appears. A progress bar with eight phase waypoints tracks the current D-position and displays orders of magnitude below Planck in real time. All geometry exists simultaneously with opacity and position controlled by D, ensuring every transition is a smooth morph rather than a discrete switch. This is the first visualization showing the entire energy hierarchy of the universe — from quantum gravity to dark energy — as projections of a single 840-state manifold.</p> <p>---</p> <p>Key result visualized: six phenomena previously invisible to observation — quark confinement, proton spin structure, the gravitational hierarchy, QCD vacuum condensates, dark matter composition, and the cosmological constant — emerge as different D-positions within one geometric object, derived from φ, the Pythagorean triple (3, 4, 5), and the Lucas recurrence with seeds (3, 4), with zero free parameters.</p> <p> </p> <p>All artifacts are standalone React components using Three.js (r128) for 3D rendering. No external dependencies beyond React, Three.js, and standard browser APIs.</p> <p> </p> <p>Keywords: D-Space, Brahim Framework, confinement, proton spin, gravitational coupling, QCD vacuum, gluon condensate, strong CP, dark matter, dark energy, cosmological constant, Hubble tension, E8, golden ratio, Pythagorean triple, seesaw mechanism</p> <p> </p> <p>Keywords: Yang-Mills, mass gap, glueball, pion, golden ratio, D-Space, seesaw mechanism, QCD confinement, chiral symmetry, recursive structure, Brahim Framework</p> <p> </p> <p>Related publication: DOI</p> <p>https://doi.org/10.5281/zenodo.19442428</p> <p>https://zenodo.org/records/19442428</p> <p>ORCID: 0009-0009-3302-9532</p> <p> </p> <pre><code>import { useState, useEffect, useRef } from "react"; import * as THREE from "three"; const TAU = Math.PI * 2; const PHI = (1 + Math.sqrt(5)) / 2; const D_MAX = 582; const B = [27, 42, 60, 75, 97, 117, 139, 154, 172, 187]; const S = 214; const PAIR_COLORS = [0xff6b6b, 0xffa96b, 0xd4a857, 0x6bffa9, 0x6bb5ff]; const CSS = { bg: "#0a0a0f", gold: "#d4a857", white: "#e8e4dc", muted: "#6b6b7b", accent: "#f39c12" }; // Smooth interpolation for phase visibility function phase(d, start, peak, end) { if (d < start || d > end) return 0; if (d < peak) return (d - start) / (peak - start); return 1 - (d - peak) / (end - peak); } const PHASES = [ { d: 0, label: "Planck origin", sub: "D = 0 · The manifold begins", color: "#ffffff" }, { d: 12, label: "Confinement", sub: "D = 12 · Λ = φ¹² = 322 MeV", color: "#d4a857" }, { d: 15, label: "Proton spin", sub: "D ≈ 15 · (3,4,5) partition", color: "#e74c3c" }, { d: 107, label: "Brahim mean", sub: "D = 107 · K = mₑ/M_Pl", color: "#3498db" }, { d: 214, label: "Gravity mirror", sub: "D = 214.16 · αG = φ⁻²¹⁴", color: "#27ae60" }, { d: 320, label: "QCD vacuum", sub: "D ≈ 320 · β₀ → β₀² seesaw", color: "#8e44ad" }, { d: 440, label: "Dark matter", sub: "D ≈ 440 · The second QCD", color: "#9b59b6" }, { d: 582, label: "Dark energy", sub: "D = 582 · Λ_CC ≈ 10⁻¹²²", color: "#8e44ad" }, ]; export default function DSpaceJourney() { const mountRef = useRef(null); const dRef = useRef(0); const targetRef = useRef(0); const [currentD, setCurrentD] = useState(0); useEffect(() => { const container = mountRef.current; if (!container) return; const w = container.clientWidth; const h = w; const R = 2; const scene = new THREE.Scene(); scene.background = new THREE.Color(CSS.bg); const camera = new THREE.PerspectiveCamera(50, 1, 0.01, 200); const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(w, h); renderer.setPixelRatio(Math.min(window.devicePixelRatio || 1, 2)); renderer.sortObjects = true; container.appendChild(renderer.domElement); const world = new THREE.Group(); scene.add(world); // ========================================================= // 1. PLANCK ORIGIN — white core, always present // ========================================================= const originMat = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 1, depthWrite: false }); const origin = new THREE.Mesh(new THREE.SphereGeometry(0.08, 16, 16), originMat); const originGlowMat = new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.15, depthWrite: false }); const originGlow = new THREE.Mesh(new THREE.SphereGeometry(0.3, 12, 12), originGlowMat); world.add(origin); world.add(originGlow); // ========================================================= // 2. CONFINEMENT — 12 nodes + flux web // ========================================================= const confGroup = new THREE.Group(); world.add(confGroup); const confNodes = []; for (let i = 0; i < 12; i++) { const theta = Math.acos(1 - 2 * (i + 0.5) / 12); const phi = i * PHI * TAU; const pos = new THREE.Vector3( R * 0.9 * Math.sin(theta) * Math.cos(phi), R * 0.9 * Math.sin(theta) * Math.sin(phi), R * 0.9 * Math.cos(theta) ); const nMat = new THREE.MeshBasicMaterial({ color: [0xe74c3c, 0x27ae60, 0x3498db][i % 3], transparent: true, opacity: 0, depthWrite: false }); const node = new THREE.Mesh(new THREE.SphereGeometry(0.06, 8, 8), nMat); node.position.copy(pos); confGroup.add(node); confNodes.push({ mesh: node, pos, theta, phi }); } // Flux tubes between nearby nodes const fluxLines = []; for (let i = 0; i < 12; i++) { for (let j = i + 1; j < 12; j++) { if (confNodes[i].pos.distanceTo(confNodes[j].pos) < R * 1.3) { const geo = new THREE.BufferGeometry().setFromPoints([confNodes[i].pos, confNodes[j].pos]); const mat = new THREE.LineBasicMaterial({ color: 0xd4a857, transparent: true, opacity: 0, depthWrite: false }); const line = new THREE.Line(geo, mat); confGroup.add(line); fluxLines.push(mat); } } } // Confinement shell const confShellMat = new THREE.MeshBasicMaterial({ color: 0xd4a857, transparent: true, opacity: 0, depthWrite: false, side: THREE.DoubleSide }); confGroup.add(new THREE.Mesh(new THREE.SphereGeometry(R * 0.91, 24, 24), confShellMat)); // ========================================================= // 3. SPIN WAVES — 9 standing waves + (3,4,5) triangle // ========================================================= const spinGroup = new THREE.Group(); world.add(spinGroup); const spinLines = []; for (let w = 0; w < 9; w++) { const theta = (w / 9) * Math.PI; const phiB = ((w * 137.5) / 180) * Math.PI; const pts = []; for (let s = 0; s <= 40; s++) pts.push(new THREE.Vector3(0, 0, 0)); const geo = new THREE.BufferGeometry().setFromPoints(pts); const mat = new THREE.LineBasicMaterial({ color: 0xe74c3c, transparent: true, opacity: 0, depthWrite: false }); const line = new THREE.Line(geo, mat); line.userData = { theta, phiB, freq: 3 + (w % 3) }; spinGroup.add(line); spinLines.push(line); } // Triangle const triPts = [new THREE.Vector3(0,0,0), new THREE.Vector3(0.35,0,0), new THREE.Vector3(0,0.26,0), new THREE.Vector3(0,0,0)]; const triMat = new THREE.LineBasicMaterial({ color: 0xd4a857, transparent: true, opacity: 0, depthWrite: false }); const tri = new THREE.Line(new THREE.BufferGeometry().setFromPoints(triPts), triMat); spinGroup.add(tri); // ========================================================= // 4. BRAHIM NODES — 10 nodes rearranging from confinement // ========================================================= const brahimGroup = new THREE.Group(); world.add(brahimGroup); const brahimNodes = []; const brahimLines = []; // Vacuum target positions: nodes redistribute to three shells // Outer 4 → gluon shell, middle 3 → chiral, inner 3 → theta const vacTargets = []; const vacShellRadii = [R * 0.88, R * 0.88, R * 0.55, R * 0.55, R * 0.55, R * 0.55, R * 0.2, R * 0.2, R * 0.88, R * 0.88]; for (let i = 0; i < 10; i++) { const pairIdx = i < 5 ? i : 9 - i; const dev = (B[i] - 107) / 107; const lat = dev * (Math.PI / 2) * 0.85; const lonBase = (pairIdx / 5) * TAU * 0.8 + 0.3; const lon = i < 5 ? lonBase : lonBase + Math.PI; const pos = new THREE.Vector3( R * 0.85 * Math.cos(lat) * Math.cos(lon), R * 0.85 * Math.sin(lat), R * 0.85 * Math.cos(lat) * Math.sin(lon) ); // Vacuum target: spread on assigned shell const vr = vacShellRadii[i]; const vTheta = Math.acos(1 - 2 * (i + 0.5) / 10); const vPhi = (i / 10) * TAU * PHI; const vPos = new THREE.Vector3( vr * Math.sin(vTheta) * Math.cos(vPhi), vr * Math.sin(vTheta) * Math.sin(vPhi), vr * Math.cos(vTheta) ); vacTargets.push(vPos); const nMat = new THREE.MeshBasicMaterial({ color: PAIR_COLORS[pairIdx], transparent: true, opacity: 0, depthWrite: false }); const node = new THREE.Mesh(new THREE.SphereGeometry(0.05, 8, 8), nMat); node.position.copy(pos); brahimGroup.add(node); brahimNodes.push({ mesh: node, mat: nMat, pos, pair: pairIdx, vacPos: vPos }); } // Pair connection lines (with enough points to morph into curves) const pairLineGeos = []; for (let p = 0; p < 5; p++) { const p1 = brahimNodes[p].pos; const p2 = brahimNodes[9 - p].pos; const curve = new THREE.QuadraticBezierCurve3(p1, new THREE.Vector3(0, 0, 0), p2); const geo = new THREE.BufferGeometry().setFromPoints(curve.getPoints(30)); const mat = new THREE.LineBasicMaterial({ color: PAIR_COLORS[p], transparent: true, opacity: 0, depthWrite: false }); brahimGroup.add(new THREE.Line(geo, mat)); brahimLines.push(mat); pairLineGeos.push(geo); } // Mirror plane const mirrorMat = new THREE.MeshBasicMaterial({ color: 0xd4a857, transparent: true, opacity: 0, depthWrite: false, side: THREE.DoubleSide }); const mirror = new THREE.Mesh(new THREE.RingGeometry(0, R * 0.85, 48), mirrorMat); mirror.rotation.x = Math.PI / 2 + 0.08; brahimGroup.add(mirror); // Gravity offset marker — the Nst/h² = 0.16 correction const gravOffsetMat = new THREE.MeshBasicMaterial({ color: 0xf39c12, transparent: true, opacity: 0, depthWrite: false }); const gravOffset = new THREE.Mesh(new THREE.SphereGeometry(0.04, 10, 10), gravOffsetMat); gravOffset.position.set(0, 0.12, 0); // slightly above center brahimGroup.add(gravOffset); const gravGlowMat = new THREE.MeshBasicMaterial({ color: 0xf39c12, transparent: true, opacity: 0, depthWrite: false }); const gravGlow = new THREE.Mesh(new THREE.SphereGeometry(0.12, 8, 8), gravGlowMat); gravGlow.position.copy(gravOffset.position); brahimGroup.add(gravGlow); // ========================================================= // 5. VACUUM SHELLS — gluon (outer), chiral (mid), theta (core) // ========================================================= const vacGroup = new THREE.Group(); world.add(vacGroup); const vacShells = []; const vacConfig = [ { r: R * 0.88, color: 0xc0392b, count: 8 }, { r: R * 0.55, color: 0x8e44ad, count: 6 }, { r: R * 0.2, color: 0xf1c40f, count: 4 }, ]; vacConfig.forEach((vc, vi) => { const lines = []; for (let i = 0; i < vc.count; i++) { const pts = []; for (let s = 0; s <= 50; s++) pts.push(new THREE.Vector3(0, 0, 0)); const geo = new THREE.BufferGeometry().setFromPoints(pts); const mat = new THREE.LineBasicMaterial({ color: vc.color, transparent: true, opacity: 0, depthWrite: false }); const line = new THREE.Line(geo, mat); line.userData = { vi, li: i, r: vc.r }; vacGroup.add(line); lines.push(line); } vacShells.push(lines); }); // ========================================================= // 6. DARK MATTER — twin spheres splitting apart // ========================================================= const dmGroup = new THREE.Group(); world.add(dmGroup); const dmVisible = new THREE.Group(); dmGroup.add(dmVisible); const dmDark = new THREE.Group(); dmGroup.add(dmDark); // Each sector: shell + particles [dmVisible, dmDark].forEach((grp, gi) => { const col = gi === 0 ? 0xd4a857 : 0x9b59b6; // Shell const sMat = new THREE.MeshBasicMaterial({ color: col, transparent: true, opacity: 0, depthWrite: false, wireframe: true }); grp.add(new THREE.Mesh(new THREE.SphereGeometry(R * 0.7, 12, 8), sMat)); // Particles for (let i = 0; i < 30; i++) { const theta = Math.acos(2 * Math.random() - 1); const phi = Math.random() * TAU; const r = R * (0.15 + Math.random() * 0.5); const pMat = new THREE.MeshBasicMaterial({ color: gi === 0 ? [0x3498db, 0xd4a857, 0xe67e22][i % 3] : [0x8e44ad, 0xf39c12, 0xe74c3c][i % 3], transparent: true, opacity: 0, depthWrite: false }); const p = new THREE.Mesh(new THREE.SphereGeometry(0.025, 6, 6), pMat); p.position.set(r * Math.sin(theta) * Math.cos(phi), r * Math.sin(theta) * Math.sin(phi), r * Math.cos(theta)); p.userData = { theta, phi, r, speed: 0.1 + Math.random() * 0.3 }; grp.add(p); } }); // Bridge arcs between twins const bridgeMats = []; for (let i = 0; i < 6; i++) { const angle = (i / 6) * TAU; const bow = new THREE.Vector3(0, Math.sin(angle) * 0.5, Math.cos(angle) * 0.5); const pts = []; for (let s = 0; s <= 20; s++) { const f = s / 20; const x = -1.2 + f * 2.4; const y = bow.y * Math.sin(f * Math.PI); const z = bow.z * Math.sin(f * Math.PI); pts.push(new THREE.Vector3(x, y, z)); } const mat = new THREE.LineBasicMaterial({ color: 0xf39c12, transparent: true, opacity: 0, depthWrite: false }); dmGroup.add(new THREE.Line(new THREE.BufferGeometry().setFromPoints(pts), mat)); bridgeMats.push(mat); } // ========================================================= // 7. DARK ENERGY — the expanding void that engulfs everything // ========================================================= const deGroup = new THREE.Group(); world.add(deGroup); // Vast outer shell — rendered from INSIDE (BackSide) so you feel enclosed const voidR = R * 4; const voidShellMat = new THREE.MeshBasicMaterial({ color: 0x8e44ad, transparent: true, opacity: 0, depthWrite: false, side: THREE.BackSide, }); const voidShell = new THREE.Mesh(new THREE.SphereGeometry(voidR, 32, 32), voidShellMat); deGroup.add(voidShell); // Second inner void shell for depth const voidInnerMat = new THREE.MeshBasicMaterial({ color: 0x6c3483, transparent: true, opacity: 0, depthWrite: false, side: THREE.BackSide, }); deGroup.add(new THREE.Mesh(new THREE.SphereGeometry(voidR * 0.7, 24, 24), voidInnerMat)); // Void wireframe — the structure of the cosmological constant const voidWireMat = new THREE.MeshBasicMaterial({ color: 0x8e44ad, wireframe: true, transparent: true, opacity: 0, depthWrite: false, }); const voidWire = new THREE.Mesh(new THREE.SphereGeometry(voidR * 0.95, 8, 6), voidWireMat); deGroup.add(voidWire); // Accelerating expansion particles — drifting outward const deParticleCount = 60; const deParticles = []; for (let i = 0; i < deParticleCount; i++) { const theta = Math.acos(2 * Math.random() - 1); const phi = Math.random() * TAU; const r = R * (0.5 + Math.random() * 3); const pMat = new THREE.MeshBasicMaterial({ color: [0x8e44ad, 0x9b59b6, 0x6c3483, 0xbb8fce][i % 4], transparent: true, opacity: 0, depthWrite: false, }); const p = new THREE.Mesh(new THREE.SphereGeometry(0.02 + Math.random() * 0.015, 6, 6), pMat); p.position.set( r * Math.sin(theta) * Math.cos(phi), r * Math.sin(theta) * Math.sin(phi), r * Math.cos(theta) ); p.userData = { theta, phi, baseR: r, driftSpeed: 0.02 + Math.random() * 0.04 }; deGroup.add(p); deParticles.push(p); } // Hubble tension fork markers const hubbleLocal = new THREE.Mesh( new THREE.SphereGeometry(0.04, 8, 8), new THREE.MeshBasicMaterial({ color: 0xf39c12, transparent: true, opacity: 0, depthWrite: false }) ); hubbleLocal.position.set(0.3, 0.3, 0); deGroup.add(hubbleLocal); const hubbleCMB = new THREE.Mesh( new THREE.SphereGeometry(0.04, 8, 8), new THREE.MeshBasicMaterial({ color: 0x3498db, transparent: true, opacity: 0, depthWrite: false }) ); hubbleCMB.position.set(-0.3, -0.3, 0); deGroup.add(hubbleCMB); const hubbleLine = new THREE.Line( new THREE.BufferGeometry().setFromPoints([hubbleLocal.position, hubbleCMB.position]), new THREE.LineBasicMaterial({ color: 0xf39c12, transparent: true, opacity: 0, depthWrite: false }) ); deGroup.add(hubbleLine); // ========================================================= // CONTROLS // ========================================================= const drag = { on: false, px: 0, py: 0, ry: 0 }; const el = renderer.domElement; const onS = (x, y) => { drag.on = true; drag.px = x; drag.py = y; }; const onM = (x, y) => { if (!drag.on) return; const dx = x - drag.px; const dy = y - drag.py; drag.ry += dx * 0.005; targetRef.current = Math.max(0, Math.min(D_MAX, targetRef.current + dy * 1.5)); drag.px = x; drag.py = y; }; const onE = () => { drag.on = false; }; el.addEventListener("mousedown", e => onS(e.clientX, e.clientY)); el.addEventListener("mousemove", e => onM(e.clientX, e.clientY)); el.addEventListener("mouseup", onE); el.addEventListener("mouseleave", onE); el.addEventListener("touchstart", e => { e.preventDefault(); onS(e.touches[0].clientX, e.touches[0].clientY); }, { passive: false }); el.addEventListener("touchmove", e => { e.preventDefault(); onM(e.touches[0].clientX, e.touches[0].clientY); }, { passive: false }); el.addEventListener("touchend", onE); // ========================================================= // ANIMATION // ========================================================= let running = true; const clock = new THREE.Clock(); const animate = () => { if (!running) return; requestAnimationFrame(animate); const t = clock.getElapsedTime(); // Smooth D transition dRef.current += (targetRef.current - dRef.current) * 0.05; const D = dRef.current; setCurrentD(Math.round(D)); // Auto-rotate if (!drag.on) drag.ry += 0.003; world.rotation.y = drag.ry; // Camera: pulls back more dramatically at dark energy depths const camDist = 4.5 + (D / D_MAX) * 4 + (D > 480 ? (D - 480) * 0.08 : 0); camera.position.set(0, camDist * 0.15, camDist); camera.lookAt(0, 0, 0); // === PHASE OPACITIES === const pConf = phase(D, 0, 15, 80); const pSpin = phase(D, 8, 20, 60); const pBrahim = phase(D, 50, 160, 300); const pVac = phase(D, 220, 320, 430); const pDM = phase(D, 380, 450, 540); const pDE = phase(D, 470, 550, 600); // Origin shrinks with D const originScale = Math.max(0.05, 1 - D / D_MAX * 0.9); origin.scale.setScalar(originScale); originGlow.scale.setScalar(originScale * 2); originMat.opacity = 0.5 + originScale * 0.5; originGlowMat.opacity = originScale * 0.12; // --- CONFINEMENT --- confNodes.forEach((cn, i) => { cn.mesh.material.opacity = pConf * 0.8; const pulse = 1 + Math.sin(t * 2 + i * 0.5) * 0.1 * pConf; cn.mesh.scale.setScalar(pulse); }); fluxLines.forEach(m => { m.opacity = pConf * 0.25; }); confShellMat.opacity = pConf * 0.03; // --- SPIN WAVES --- spinLines.forEach(line => { const { theta, phiB, freq } = line.userData; const positions = line.geometry.attributes.position.array; const dir = new THREE.Vector3(Math.sin(theta)*Math.cos(phiB), Math.sin(theta)*Math.sin(phiB), Math.cos(theta)).normalize(); const perp = new THREE.Vector3(-Math.sin(phiB), Math.cos(phiB), 0).normalize(); const amp = R * 0.06 * pSpin; for (let s = 0; s <= 40; s++) { const f = s / 40; const r = f * R * 0.88; const disp = amp * Math.sin(freq * f * Math.PI) * Math.sin(t * 2.5); const base = dir.clone().multiplyScalar(r); const off = perp.clone().multiplyScalar(disp); positions[s*3] = base.x + off.x; positions[s*3+1] = base.y + off.y; positions[s*3+2] = base.z + off.z; } line.geometry.attributes.position.needsUpdate = true; line.material.opacity = pSpin * 0.5; }); triMat.opacity = pSpin * 0.5; // --- BRAHIM → GRAVITY → VACUUM (smooth morph) --- const pGrav = phase(D, 140, 214, 280); // gravity sub-phase peaks at D=214 // morphT: 0 = pure Brahim positions, 1 = vacuum shell positions const morphT = Math.max(0, Math.min(1, (D - 220) / 120)); // Nodes interpolate between Brahim and vacuum positions brahimNodes.forEach((bn, i) => { const bPos = bn.pos; const vPos = bn.vacPos; // Lerp position bn.mesh.position.set( bPos.x + (vPos.x - bPos.x) * morphT, bPos.y + (vPos.y - bPos.y) * morphT, </code></pre>