// ════════════════════════════════════════════════════════════ // COSMIC VISUALIZATION — The Big Bounce // A cinematic journey from parent universe through the // bounce to the birth of our cosmos // ════════════════════════════════════════════════════════════ const canvas = document.getElementById('cosmos'); const ctx = canvas.getContext('2d'); const sgCanvas = document.getElementById('scaleGraph'); const sgCtx = sgCanvas.getContext('2d'); // ── State ── let W, H, cy; let progress = 0; let playing = true; let speed = 1; const CYCLE_MS = 55000; let lastTime = null; const THROAT = 0.40; // bounce point at 40% of canvas width let throatX; // ── Phase Definitions ── const phases = [ { start: 0.00, end: 0.12, label: 'PARENT UNIVERSE \u2014 STELLAR COLLAPSE', sub: 'A dying star collapses under its own gravity' }, { start: 0.12, end: 0.24, label: 'BLACK HOLE INTERIOR', sub: 'Matter falls past the event horizon \u2014 density climbs' }, { start: 0.24, end: 0.36, label: 'APPROACHING \u03C1\u2091\u2063\u2099\u2063\u209C', sub: 'Spin-torsion resists compression \u2014 \u03C1 \u2192 0.41 \u03C1\u209A\u2097' }, { start: 0.36, end: 0.48, label: 'THE BIG BOUNCE', sub: 'Contraction reverses \u2014 a new universe is born' }, { start: 0.48, end: 0.58, label: 'RAPID EXPANSION \u2014 92 e-FOLDS', sub: 'Space-time inflates exponentially' }, { start: 0.58, end: 0.70, label: 'FIRST LIGHT \u2014 CMB RELEASED', sub: 'Recombination at z \u2248 1100 \u2014 photons decouple' }, { start: 0.70, end: 0.84, label: 'COSMIC STRUCTURE FORMS', sub: 'Dark matter filaments \u2014 galaxies ignite' }, { start: 0.84, end: 1.00, label: 'TODAY \u2014 TESTING THE BOUNCE', sub: 'f_NL = \u221235/8 \u00B7 SPHEREx 2028 \u00B7 LiteBIRD 2032' }, ]; const pipLabels = ['COLLAPSE','INTERIOR','DENSITY','BOUNCE','INFLATE','CMB','STRUCTURE','TODAY']; // ── Build phase pips ── const pipsEl = document.getElementById('phasePips'); phases.forEach((p, i) => { const pip = document.createElement('span'); pip.className = 'phase-pip'; pip.textContent = pipLabels[i]; pip.onclick = () => { progress = p.start + 0.001; }; pipsEl.appendChild(pip); }); // ═══════════════════════════════════════ // GEOMETRY — The Funnel / Hourglass // ═══════════════════════════════════════ function funnelHalfHeight(x) { const t = x / W; const minR = H * 0.016; if (t <= THROAT) { const s = (THROAT - t) / THROAT; return minR + Math.pow(s, 0.85) * H * 0.40; } else { const s = (t - THROAT) / (1 - THROAT); return minR + Math.pow(s, 1.4) * H * 0.44; } } // Pre-computed funnel profile for fast lookups let funnelProfile = []; function buildFunnelProfile() { funnelProfile = new Float32Array(W + 1); for (let x = 0; x <= W; x++) { funnelProfile[x] = funnelHalfHeight(x); } } function fH(x) { const xi = Math.max(0, Math.min(W, Math.round(x))); return funnelProfile[xi]; } // ═══════════════════════════════════════ // STARS // ═══════════════════════════════════════ const NUM_STARS = 500; let stars = []; function initStars() { stars = []; for (let i = 0; i < NUM_STARS; i++) { stars.push({ x: Math.random() * W, y: Math.random() * H, r: Math.random() * 1.4 + 0.2, bright: 0.15 + Math.random() * 0.85, speed: Math.random() * 2.5 + 0.5, offset: Math.random() * Math.PI * 2, }); } } function drawStars(time, opacity) { if (opacity <= 0.01) return; // During collapse, stars near the BH dim (being consumed) const consumeRadius = smoothstep(0.08, 0.34, progress) * Math.min(W, H) * 0.5; for (let i = 0; i < stars.length; i++) { const s = stars[i]; const twinkle = 0.5 + 0.5 * Math.sin(time * 0.001 * s.speed + s.offset); let a = s.bright * twinkle * opacity; // Stars near the throat get consumed (fade out in an expanding radius) if (consumeRadius > 10 && s.x < throatX + 50) { const dx = s.x - throatX; const dy = s.y - cy; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < consumeRadius) { a *= Math.max(0, dist / consumeRadius); } } if (a < 0.02) continue; ctx.beginPath(); ctx.arc(s.x, s.y, s.r, 0, 6.2832); ctx.fillStyle = `rgba(210,215,240,${a})`; ctx.fill(); } } // ═══════════════════════════════════════ // DRAW: DUST/GAS FIELD (ultra-fine background texture) // ═══════════════════════════════════════ let dustParticles = []; function initDust() { dustParticles = []; for (let i = 0; i < 300; i++) { dustParticles.push({ x: Math.random() * W * 0.45, y: Math.random() * H, r: 0.15 + Math.random() * 0.35, bright: 0.05 + Math.random() * 0.15, hue: 20 + Math.random() * 30, }); } } function drawDustField(time) { const alpha = (1 - smoothstep(0.30, 0.42, progress)); if (alpha < 0.01) return; for (let i = 0; i < dustParticles.length; i++) { const d = dustParticles[i]; const a = d.bright * alpha; if (a < 0.01) continue; ctx.beginPath(); ctx.arc(d.x, d.y, d.r, 0, 6.2832); ctx.fillStyle = `hsla(${d.hue}, 30%, 70%, ${a})`; ctx.fill(); } } // ═══════════════════════════════════════ // PARTICLES // ═══════════════════════════════════════ const N_COLLAPSE = 550; const N_EXPAND = 400; let collapseP = []; let expandP = []; function spawnCollapse(p) { p.baseParam = 0.03 + Math.random() * THROAT * 0.65; p.lane = (Math.random() * 2 - 1) * 0.82; p.size = 0.2 + Math.random() * 0.9; p.flicker = Math.random() * 6.28; p.drift = Math.random() * 6.28; // Warm yellows, oranges, and pale golds — NO green/cyan/blue const type = Math.random(); p.hueBase = type < 0.5 ? 30 + Math.random() * 15 : (type < 0.8 ? 15 + Math.random() * 10 : 50 + Math.random() * 5); p.satBase = 20 + Math.random() * 40; } function spawnExpand(p) { p.baseParam = THROAT + 0.03 + Math.random() * (0.96 - THROAT); // rest position spread across right side p.lane = (Math.random() * 2 - 1) * 0.85; p.size = 0.3 + Math.random() * 1.0; p.flicker = Math.random() * 6.28; p.drift = Math.random() * 6.28; } function initParticles() { collapseP = []; expandP = []; for (let i = 0; i < N_COLLAPSE; i++) { const p = {}; spawnCollapse(p); collapseP.push(p); } for (let i = 0; i < N_EXPAND; i++) { const p = {}; spawnExpand(p); expandP.push(p); } } // ═══════════════════════════════════════ // RESIZE // ═══════════════════════════════════════ function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight - 44; cy = H / 2; throatX = W * THROAT; buildFunnelProfile(); initStars(); initParticles(); initDust(); } window.addEventListener('resize', resize); resize(); // ═══════════════════════════════════════ // UTILITIES // ═══════════════════════════════════════ function lerp(a, b, t) { return a + (b - a) * Math.max(0, Math.min(1, t)); } function easeOut(t) { return 1 - Math.pow(1 - t, 3); } function easeIn(t) { return t * t * t; } function easeInOut(t) { return t < 0.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2,3)/2; } function smoothstep(a, b, x) { const t = Math.max(0, Math.min(1, (x-a)/(b-a))); return t*t*(3-2*t); } function phaseT(idx) { const p = phases[idx]; if (progress < p.start || progress >= p.end) return -1; return (progress - p.start) / (p.end - p.start); } // ═══════════════════════════════════════ // DRAW: BACKGROUND + NEBULA // ═══════════════════════════════════════ function drawBackground(time) { // Scene darkens as matter is consumed (progress 0.15→0.35) const darkness = smoothstep(0.12, 0.34, progress) * (1 - smoothstep(0.38, 0.50, progress)); // Base dark gradient const bg = ctx.createLinearGradient(0, 0, W, 0); const baseBright = lerp(0.045, 0.02, darkness); bg.addColorStop(0, `rgb(${Math.round(12*baseBright*20)},${Math.round(4*baseBright*20)},${Math.round(8*baseBright*20)})`); bg.addColorStop(THROAT, '#060610'); bg.addColorStop(1, '#060812'); ctx.fillStyle = bg; ctx.fillRect(0, 0, W, H); // Parent universe nebula (left side) — fades as matter is consumed const leftGlow = smoothstep(0.5, 0, progress) * 0.18 * (1 - darkness * 0.8); if (leftGlow > 0.01) { const n1 = ctx.createRadialGradient(W * 0.06, cy * 0.65, 0, W * 0.06, cy * 0.65, W * 0.25); n1.addColorStop(0, `rgba(140, 35, 12, ${leftGlow})`); n1.addColorStop(0.5, `rgba(80, 15, 35, ${leftGlow * 0.4})`); n1.addColorStop(1, 'rgba(30, 8, 15, 0)'); ctx.fillStyle = n1; ctx.fillRect(0, 0, W * 0.45, H); const n2 = ctx.createRadialGradient(W * 0.15, cy * 1.4, 0, W * 0.15, cy * 1.4, W * 0.2); n2.addColorStop(0, `rgba(100, 40, 8, ${leftGlow * 0.6})`); n2.addColorStop(0.5, `rgba(60, 20, 25, ${leftGlow * 0.25})`); n2.addColorStop(1, 'rgba(20, 8, 10, 0)'); ctx.fillStyle = n2; ctx.fillRect(0, 0, W * 0.4, H); // Third nebula cloud for depth const n5 = ctx.createRadialGradient(W * 0.03, cy * 0.4, 0, W * 0.03, cy * 0.4, W * 0.15); n5.addColorStop(0, `rgba(60, 20, 80, ${leftGlow * 0.4})`); n5.addColorStop(0.6, `rgba(30, 10, 50, ${leftGlow * 0.15})`); n5.addColorStop(1, 'rgba(10, 5, 20, 0)'); ctx.fillStyle = n5; ctx.fillRect(0, 0, W * 0.3, H); } // Post-bounce cool nebula (right side) const rightGlow = smoothstep(0.48, 0.72, progress) * 0.12; if (rightGlow > 0.01) { const n3 = ctx.createRadialGradient(W * 0.85, cy * 0.6, 0, W * 0.85, cy * 0.6, W * 0.3); n3.addColorStop(0, `rgba(30, 50, 120, ${rightGlow})`); n3.addColorStop(0.5, `rgba(20, 30, 80, ${rightGlow * 0.4})`); n3.addColorStop(1, 'rgba(10, 15, 40, 0)'); ctx.fillStyle = n3; ctx.fillRect(W * 0.4, 0, W * 0.6, H); const n4 = ctx.createRadialGradient(W * 0.7, cy * 1.3, 0, W * 0.7, cy * 1.3, W * 0.25); n4.addColorStop(0, `rgba(40, 20, 80, ${rightGlow * 0.8})`); n4.addColorStop(0.5, `rgba(25, 15, 50, ${rightGlow * 0.3})`); n4.addColorStop(1, 'rgba(10, 5, 25, 0)'); ctx.fillStyle = n4; ctx.fillRect(W * 0.4, 0, W * 0.6, H); } } // ═══════════════════════════════════════ // DRAW: FUNNEL (the hourglass membrane) // ═══════════════════════════════════════ function drawFunnel(time) { // Right side only reveals after the bounce const rightReveal = smoothstep(0.36, 0.56, progress); const maxX = Math.round(throatX + rightReveal * (W - throatX)); const pulse = 0.5 + 0.5 * Math.sin(time * 0.0015); const throatIntensity = smoothstep(0.1, 0.36, progress) * 2; // Single faint pass (nearly invisible funnel hint) const passes = [ { w: 1, a: 0.06 + pulse * 0.02 }, ]; for (const pass of passes) { const grad = ctx.createLinearGradient(0, 0, maxX, 0); grad.addColorStop(0, `rgba(255, 120, 40, ${pass.a * 0.6})`); const throatNorm = throatX / maxX; grad.addColorStop(Math.min(throatNorm * 0.5, 0.99), `rgba(255, 180, 80, ${pass.a * 0.8})`); grad.addColorStop(Math.min(throatNorm, 0.99), `rgba(180, 220, 255, ${pass.a * (1 + throatIntensity)})`); if (rightReveal > 0.05) { grad.addColorStop(Math.min(throatNorm + 0.15 * (1 / (maxX / W)), 0.99), `rgba(100, 160, 255, ${pass.a * 0.8 * rightReveal})`); } grad.addColorStop(1, rightReveal > 0.05 ? `rgba(60, 100, 220, ${pass.a * 0.5 * rightReveal})` : `rgba(180, 220, 255, ${pass.a})`); ctx.lineWidth = pass.w; ctx.strokeStyle = grad; // Top edge — only draw to maxX ctx.beginPath(); for (let x = 0; x <= maxX; x += 3) { const y = cy - fH(x); if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.stroke(); // Bottom edge ctx.beginPath(); for (let x = 0; x <= maxX; x += 3) { const y = cy + fH(x); if (x === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y); } ctx.stroke(); } // Subtle interior fill (only drawn portion) ctx.beginPath(); for (let x = 0; x <= maxX; x += 3) ctx.lineTo(x, cy - fH(x)); for (let x = maxX; x >= 0; x -= 3) ctx.lineTo(x, cy + fH(x)); ctx.closePath(); const fillGrad = ctx.createLinearGradient(0, 0, maxX, 0); const fillA = 0.006 + pulse * 0.003; fillGrad.addColorStop(0, `rgba(180, 80, 30, ${fillA})`); fillGrad.addColorStop(Math.min(throatX / maxX, 0.99), `rgba(150, 180, 255, ${fillA * 2})`); fillGrad.addColorStop(1, `rgba(40, 60, 150, ${fillA * 0.8})`); ctx.fillStyle = fillGrad; ctx.fill(); // Energy sparks — only on visible portion const sparkCount = 8; const sparkAlpha = 0.08 + pulse * 0.05; for (let i = 0; i < sparkCount; i++) { const sx = ((time * 0.0002 * (1 + i * 0.03) + i * 0.0618) % 1) * maxX; if (sx > maxX) continue; const topY = cy - fH(sx); const botY = cy + fH(sx); const ey = (i % 2 === 0) ? topY : botY; const pr = sx / W; const hue = pr < THROAT ? lerp(25, 200, pr / THROAT) : lerp(200, 250, (pr - THROAT) / (1 - THROAT)); ctx.beginPath(); ctx.arc(sx, ey, 1 + Math.sin(time * 0.005 + i * 3) * 0.5, 0, 6.2832); ctx.fillStyle = `hsla(${hue}, 80%, 70%, ${sparkAlpha * (0.3 + 0.7 * Math.sin(time * 0.003 + i * 7))})`; ctx.fill(); } } // ═══════════════════════════════════════ // DRAW: BLACK HOLE (dark sphere + photon ring + lensing) // ═══════════════════════════════════════ function drawBlackHole(time) { // Visible during collapse phases, fades at bounce const bhAlpha = smoothstep(0.02, 0.10, progress) * (1 - smoothstep(0.35, 0.40, progress)); if (bhAlpha < 0.01) return; const bhX = throatX; const bhR = lerp(14, 22, smoothstep(0.05, 0.30, progress)); // grows as it consumes matter const spin = time * 0.0008; // ── Gravitational lensing: distorted light ring (Einstein ring) ── const ringR = bhR + lerp(12, 8, smoothstep(0.1, 0.3, progress)); const ringPulse = 0.8 + 0.2 * Math.sin(time * 0.0025); // Outer soft glow (accretion luminosity) const outerR = bhR * 4; const og = ctx.createRadialGradient(bhX, cy, bhR * 1.5, bhX, cy, outerR); og.addColorStop(0, `rgba(255, 160, 50, ${bhAlpha * 0.25 * ringPulse})`); og.addColorStop(0.3, `rgba(255, 100, 20, ${bhAlpha * 0.10})`); og.addColorStop(0.7, `rgba(180, 50, 10, ${bhAlpha * 0.03})`); og.addColorStop(1, 'rgba(100, 20, 5, 0)'); ctx.fillStyle = og; ctx.beginPath(); ctx.arc(bhX, cy, outerR, 0, 6.2832); ctx.fill(); // Photon ring (thin bright ring just outside event horizon) ctx.save(); ctx.globalCompositeOperation = 'lighter'; for (let pass = 0; pass < 3; pass++) { const pw = [6, 2.5, 1][pass]; const pa = [0.06, 0.12, 0.25][pass]; ctx.beginPath(); ctx.arc(bhX, cy, ringR + pass * 0.5, 0, 6.2832); // Asymmetric brightness (Doppler beaming — one side brighter) const rGrad = ctx.createLinearGradient(bhX - ringR, cy, bhX + ringR, cy); rGrad.addColorStop(0, `rgba(255, 200, 120, ${pa * bhAlpha * 0.5})`); rGrad.addColorStop(0.3, `rgba(255, 240, 200, ${pa * bhAlpha * ringPulse})`); rGrad.addColorStop(0.7, `rgba(255, 180, 80, ${pa * bhAlpha * 0.7})`); rGrad.addColorStop(1, `rgba(200, 100, 40, ${pa * bhAlpha * 0.3})`); ctx.strokeStyle = rGrad; ctx.lineWidth = pw; ctx.stroke(); } // Accretion disk (tilted ellipse, behind and in front of BH) const diskOuter = bhR * 3.5; const diskTilt = 0.22; // how edge-on we see it for (let ring = 0; ring < 20; ring++) { const rf = ring / 20; const r = lerp(bhR + 4, diskOuter, rf); const bright = (1 - rf * rf) * bhAlpha * 0.15; const hue = lerp(40, 10, rf); ctx.beginPath(); ctx.ellipse(bhX, cy, r, r * diskTilt, spin, 0, Math.PI * 2); ctx.strokeStyle = `hsla(${hue}, 85%, 60%, ${bright})`; ctx.lineWidth = lerp(2, 0.5, rf); ctx.stroke(); } ctx.restore(); // ── The black sphere itself (event horizon) ── // Pure black center — nothing escapes ctx.beginPath(); ctx.arc(bhX, cy, bhR, 0, 6.2832); ctx.fillStyle = '#000000'; ctx.fill(); // Sharp edge glow right at the horizon const edgeGrad = ctx.createRadialGradient(bhX, cy, bhR - 2, bhX, cy, bhR + 5); edgeGrad.addColorStop(0, 'rgba(0, 0, 0, 0)'); edgeGrad.addColorStop(0.4, `rgba(100, 140, 200, ${bhAlpha * 0.15})`); edgeGrad.addColorStop(0.7, `rgba(150, 180, 220, ${bhAlpha * 0.08})`); edgeGrad.addColorStop(1, 'rgba(80, 100, 160, 0)'); ctx.beginPath(); ctx.arc(bhX, cy, bhR + 5, 0, 6.2832); ctx.fillStyle = edgeGrad; ctx.fill(); // ── Matter streams spiraling into BH ── const streamAlpha = bhAlpha * lerp(0.4, 0.15, smoothstep(0.20, 0.34, progress)); const numStreams = 5; for (let s = 0; s < numStreams; s++) { ctx.beginPath(); const baseAngle = spin * 3 + (s / numStreams) * Math.PI * 2; for (let j = 0; j < 50; j++) { const jf = j / 50; const spiralR = bhR + 5 + jf * bhR * 2.5; const angle = baseAngle - jf * 2.5; // spiral inward const px = bhX + Math.cos(angle) * spiralR; const py = cy + Math.sin(angle) * spiralR * (0.3 + jf * 0.4); if (j === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py); } ctx.strokeStyle = `rgba(255, 150, 50, ${streamAlpha * (0.3 + 0.7 * Math.sin(s * 2.1))})`; ctx.lineWidth = 1.2; ctx.stroke(); } } // ═══════════════════════════════════════ // DRAW: PRE-BOUNCE DARKNESS (everything goes black) // ═══════════════════════════════════════ function drawPreBounceDarkness(time) { // As BH consumes everything, the scene fades to near-total black // Then the tiny point at the throat goes from black to white const darkenPhase = smoothstep(0.28, 0.36, progress); // 0→1 as we approach bounce const preBounce = smoothstep(0.34, 0.38, progress); // the moment just before if (darkenPhase < 0.01) return; // Darken the entire left side ctx.fillStyle = `rgba(0, 0, 0, ${darkenPhase * 0.85})`; ctx.fillRect(0, 0, throatX + 30, H); // Tiny point at throat transitions from black to white-hot if (preBounce > 0.01) { const pointR = lerp(3, 8, preBounce); const whiteness = easeIn(preBounce); const pg = ctx.createRadialGradient(throatX, cy, 0, throatX, cy, pointR * 3); pg.addColorStop(0, `rgba(255, 255, 255, ${whiteness * 0.9})`); pg.addColorStop(0.3, `rgba(200, 220, 255, ${whiteness * 0.4})`); pg.addColorStop(0.7, `rgba(100, 140, 220, ${whiteness * 0.1})`); pg.addColorStop(1, 'rgba(50, 70, 150, 0)'); ctx.fillStyle = pg; ctx.beginPath(); ctx.arc(throatX, cy, pointR * 3, 0, 6.2832); ctx.fill(); } } // ═══════════════════════════════════════ // DRAW: COLLAPSE PARTICLES (left → throat) // ═══════════════════════════════════════ function drawCollapseParticles(time, dt) { const collapseAlpha = 1 - smoothstep(0.40, 0.50, progress); if (collapseAlpha < 0.01) return; // Compression: 0 = particles at rest positions, 1 = all compressed to throat const compression = smoothstep(0.0, 0.36, progress); for (let i = 0; i < collapseP.length; i++) { const p = collapseP[i]; // Position driven by progress — moves from baseParam toward throat const targetParam = lerp(p.baseParam, THROAT - 0.005, easeIn(compression)); // Gentle organic drift (not wild motion) const drift = Math.sin(time * 0.0008 + p.drift) * 0.012 * (1 - compression); const param = Math.max(0.01, Math.min(THROAT - 0.005, targetParam + drift)); // Lane compresses toward center as particles approach throat const laneCompression = lerp(1, 0.08, easeIn(compression)); const effectiveLane = p.lane * laneCompression; // Screen position const px = param * W; const maxY = fH(px); const py = cy + effectiveLane * maxY; // Color: varied at rest → all converge to hot white when compressed const hue = lerp(p.hueBase, 45, compression * compression); const light = lerp(55, 88, compression * compression); const sat = lerp(p.satBase, 40, compression); const alpha = lerp(0.35, 0.8, compression) * collapseAlpha; const sz = p.size * lerp(0.8, 1.4, compression); // Gentle flicker const flicker = 0.8 + 0.2 * Math.sin(time * 0.002 + p.flicker); ctx.beginPath(); ctx.arc(px, py, sz * flicker, 0, 6.2832); ctx.fillStyle = `hsla(${hue}, ${sat}%, ${light}%, ${alpha * flicker})`; ctx.fill(); } } // ═══════════════════════════════════════ // DRAW: EXPANSION PARTICLES (throat → right) // ═══════════════════════════════════════ function drawExpansionParticles(time, dt) { const expandAlpha = smoothstep(0.39, 0.48, progress); if (expandAlpha < 0.01) return; // Expansion: 0 = all at throat, 1 = fully spread to rest positions const expansion = smoothstep(0.39, 0.88, progress); for (let i = 0; i < expandP.length; i++) { const p = expandP[i]; // Position driven by progress — moves from throat toward baseParam const targetParam = lerp(THROAT + 0.005, p.baseParam, easeOut(expansion)); const drift = Math.sin(time * 0.0008 + p.drift) * 0.008 * expansion; const param = Math.min(0.99, targetParam + drift); // Lane starts compressed, spreads as particles expand const effectiveLane = p.lane * easeOut(expansion); // Screen position const px = param * W; const maxY = fH(px); const py = cy + effectiveLane * maxY; // Color: white-blue (near throat) → cool blue-purple (spread out) const distNorm = (param - THROAT) / (1 - THROAT); const hue = lerp(210, 275, distNorm); const light = lerp(82, 55, distNorm); const sat = lerp(60, 75, distNorm); const alpha = lerp(0.75, 0.25, distNorm) * expandAlpha; const sz = p.size * lerp(1.3, 0.6, distNorm); const flicker = 0.8 + 0.2 * Math.sin(time * 0.002 + p.flicker); ctx.beginPath(); ctx.arc(px, py, sz * flicker, 0, 6.2832); ctx.fillStyle = `hsla(${hue}, ${sat}%, ${light}%, ${alpha * flicker})`; ctx.fill(); } } // ═══════════════════════════════════════ // DRAW: INFALLING DEBRIS (particles being consumed by BH) // ═══════════════════════════════════════ function drawInfallingDebris(time) { const alpha = smoothstep(0.04, 0.12, progress) * (1 - smoothstep(0.32, 0.38, progress)); if (alpha < 0.01) return; const spin = time * 0.0006; // Debris particles orbiting and spiraling into the BH const debrisCount = 50; for (let i = 0; i < debrisCount; i++) { const baseAngle = (i / debrisCount) * Math.PI * 2; const orbitPhase = (time * 0.001 * (0.5 + i * 0.02) + i * 1.7) % (Math.PI * 2); const orbitR = 30 + i * 1.5 - smoothstep(0.15, 0.35, progress) * i * 0.8; if (orbitR < 8) continue; // consumed const px = throatX + Math.cos(orbitPhase) * orbitR; const py = cy + Math.sin(orbitPhase) * orbitR * 0.3; const distFrac = orbitR / 100; const sz = 0.3 + distFrac * 0.6; const bright = alpha * (1 - distFrac * 0.6) * (0.4 + 0.6 * Math.sin(time * 0.003 + i * 5)); const hue = lerp(35, 15, 1 - distFrac); ctx.beginPath(); ctx.arc(px, py, sz, 0, 6.2832); ctx.fillStyle = `hsla(${hue}, 85%, 60%, ${bright})`; ctx.fill(); } } // ═══════════════════════════════════════ // DRAW: BOUNCE FLASH // ═══════════════════════════════════════ function drawBounceFlash(time) { const t = phaseT(3); if (t < 0) return; // Flash intensity: sharp rise, slow fade const flashI = t < 0.15 ? easeOut(t / 0.15) : Math.pow(1 - (t - 0.15) / 0.85, 2.5); if (flashI < 0.01) return; // Screen-wide flash (right side only) if (flashI > 0.3) { ctx.fillStyle = `rgba(255, 255, 255, ${(flashI - 0.3) * 0.8})`; ctx.fillRect(throatX, 0, W - throatX, H); } // Central radiance const radR = flashI * Math.min(W, H) * 0.5; const rg = ctx.createRadialGradient(throatX, cy, 0, throatX, cy, radR); rg.addColorStop(0, `rgba(255, 255, 255, ${flashI * 0.95})`); rg.addColorStop(0.15, `rgba(220, 235, 255, ${flashI * 0.7})`); rg.addColorStop(0.4, `rgba(120, 160, 255, ${flashI * 0.25})`); rg.addColorStop(0.7, `rgba(60, 80, 200, ${flashI * 0.06})`); rg.addColorStop(1, 'rgba(30, 40, 120, 0)'); ctx.fillStyle = rg; ctx.fillRect(throatX - 20, 0, W - throatX + 20, H); // Shockwave rings (right semicircle only) for (let i = 0; i < 5; i++) { const rt = Math.max(0, t - i * 0.08); if (rt <= 0) continue; const ringR = easeOut(rt) * Math.max(W, H) * 0.55; const ringA = Math.max(0, 1 - rt * 1.3) * 0.35; const hue = lerp(220, 280, rt); ctx.beginPath(); ctx.arc(throatX, cy, ringR, -Math.PI/2, Math.PI/2); ctx.strokeStyle = `hsla(${hue}, 75%, 75%, ${ringA})`; ctx.lineWidth = lerp(5, 0.5, rt); ctx.stroke(); } } // ═══════════════════════════════════════ // DRAW: INFLATION GRID (expansion phase) // ═══════════════════════════════════════ function drawInflationGrid(time) { const t = phaseT(4); if (t < 0) return; const spacing = lerp(25, 120, easeIn(t)); const alpha = lerp(0.08, 0.015, t); const startX = throatX; ctx.strokeStyle = `rgba(100, 150, 255, ${alpha})`; ctx.lineWidth = 0.5; // Vertical lines expanding from throat rightward const numV = 30; for (let i = -5; i <= numV; i++) { const x = startX + i * spacing; if (x < startX - 20 || x > W + spacing) continue; const topY = cy - fH(Math.max(0, Math.min(W, x))); const botY = cy + fH(Math.max(0, Math.min(W, x))); ctx.beginPath(); ctx.moveTo(x, topY); ctx.lineTo(x, botY); ctx.stroke(); } // Horizontal lines const numH = 20; for (let i = -numH; i <= numH; i++) { const y = cy + i * spacing * 0.7; if (y < 0 || y > H) continue; ctx.beginPath(); let started = false; for (let x = Math.max(0, startX - 20); x <= W; x += 5) { const topY = cy - fH(x); const botY = cy + fH(x); if (y >= topY && y <= botY) { if (!started) { ctx.moveTo(x, y); started = true; } else ctx.lineTo(x, y); } } ctx.stroke(); } } // ═══════════════════════════════════════ // DRAW: CMB WALL // ═══════════════════════════════════════ function drawCMBWall(time) { const t = phaseT(5); if (t < 0) return; // CMB as a vertical band moving rightward from throat const bandX = lerp(throatX + 40, W * 0.75, easeOut(t)); const bandW = 50 + t * 30; // Warm golden glow const cg = ctx.createLinearGradient(bandX - bandW, 0, bandX + bandW, 0); cg.addColorStop(0, 'rgba(255, 160, 30, 0)'); cg.addColorStop(0.3, `rgba(255, 180, 50, ${0.12 + 0.06 * Math.sin(time * 0.002)})`); cg.addColorStop(0.5, `rgba(255, 200, 80, ${0.18 + 0.06 * Math.sin(time * 0.003)})`); cg.addColorStop(0.7, `rgba(255, 170, 40, ${0.12 + 0.05 * Math.sin(time * 0.002 + 1)})`); cg.addColorStop(1, 'rgba(255, 140, 20, 0)'); // Clip to funnel ctx.save(); ctx.beginPath(); for (let x = 0; x <= W; x += 3) ctx.lineTo(x, cy - fH(x)); for (let x = W; x >= 0; x -= 3) ctx.lineTo(x, cy + fH(x)); ctx.closePath(); ctx.clip(); ctx.fillStyle = cg; ctx.fillRect(bandX - bandW, 0, bandW * 2, H); // CMB fluctuation dots const dotCount = 80; for (let i = 0; i < dotCount; i++) { const dx = bandX + (Math.sin(i * 137.5) * 0.5) * bandW; const dy = cy + (Math.cos(i * 73.1) * 0.5 + 0.5 - 0.5) * fH(dx) * 1.6; const sz = 2 + Math.sin(i * 31.7) * 1; const bright = 0.15 + 0.1 * Math.sin(time * 0.002 + i * 5); const isHot = i % 3 === 0; ctx.beginPath(); ctx.arc(dx, dy, sz, 0, 6.2832); ctx.fillStyle = isHot ? `rgba(255, 220, 100, ${bright * (1 - t * 0.5)})` : `rgba(200, 120, 40, ${bright * 0.6 * (1 - t * 0.5)})`; ctx.fill(); } // Polarization streaks (birefringence hint) if (t > 0.4) { const polA = lerp(0, 0.2, (t - 0.4) / 0.5); for (let i = 0; i < 20; i++) { const angle = Math.sin(i * 47.3) * Math.PI; const px = bandX + Math.sin(i * 97.1) * bandW * 0.3; const py = cy + Math.cos(i * 63.7) * fH(px) * 0.6; const len = 10; ctx.beginPath(); ctx.moveTo(px - Math.cos(angle) * len, py - Math.sin(angle) * len); ctx.lineTo(px + Math.cos(angle) * len, py + Math.sin(angle) * len); ctx.strokeStyle = `rgba(255, 220, 120, ${polA})`; ctx.lineWidth = 1.2; ctx.stroke(); } } ctx.restore(); // CMB release annotation if (t > 0.3) { const textA = easeOut((t - 0.3) / 0.4); ctx.save(); ctx.font = `500 ${Math.min(11, W * 0.013)}px 'IBM Plex Mono', monospace`; ctx.textAlign = 'center'; ctx.fillStyle = `rgba(255, 200, 100, ${textA * 0.7})`; ctx.fillText('z \u2248 1100 \u2014 first light escapes', bandX, cy - fH(bandX) - 12); ctx.restore(); } } // ═══════════════════════════════════════ // DRAW: COSMIC WEB + GALAXIES // ═══════════════════════════════════════ // Deterministic galaxy positions (seeded by index) function seed(i, a, b) { return (Math.sin(i * a + b) * 0.5 + 0.5); } function drawCosmicStructure(time) { const t = phaseT(6); if (t < 0) return; const structureAlpha = easeOut(Math.min(t * 1.5, 1)); const regionLeft = throatX + (W - throatX) * 0.15; const regionW = (W - throatX) * 0.8; // Cosmic web filaments ctx.save(); ctx.beginPath(); for (let x = 0; x <= W; x += 3) ctx.lineTo(x, cy - fH(x)); for (let x = W; x >= 0; x -= 3) ctx.lineTo(x, cy + fH(x)); ctx.closePath(); ctx.clip(); const nodeCount = 18; const nodes = []; for (let i = 0; i < nodeCount; i++) { const nx = regionLeft + seed(i, 127.1, 311.7) * regionW; const maxH = fH(nx) * 0.8; const ny = cy + (seed(i, 269.5, 183.3) - 0.5) * maxH * 2; nodes.push({ x: nx, y: ny }); } // Filaments const filA = structureAlpha * 0.25; for (let i = 0; i < nodeCount; i++) { for (let j = i + 1; j < nodeCount; j++) { const dx = nodes[i].x - nodes[j].x; const dy = nodes[i].y - nodes[j].y; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < W * 0.18) { const a = filA * (1 - dist / (W * 0.18)); const mx = (nodes[i].x + nodes[j].x) / 2 + Math.sin(i + j) * 25; const my = (nodes[i].y + nodes[j].y) / 2 + Math.cos(i * j * 0.1) * 25; ctx.beginPath(); ctx.moveTo(nodes[i].x, nodes[i].y); ctx.quadraticCurveTo(mx, my, nodes[j].x, nodes[j].y); ctx.strokeStyle = `rgba(70, 90, 180, ${a})`; ctx.lineWidth = 1 + a * 4; ctx.stroke(); } } } // Galaxy clusters at nodes const clA = easeOut(Math.max(0, (t - 0.15) * 1.4)); for (let i = 0; i < nodeCount; i++) { const n = nodes[i]; const sz = 3 + seed(i, 7.7, 0) * 3; const cg = ctx.createRadialGradient(n.x, n.y, 0, n.x, n.y, sz * 5); cg.addColorStop(0, `rgba(180, 160, 255, ${0.4 * clA})`); cg.addColorStop(0.4, `rgba(100, 80, 200, ${0.15 * clA})`); cg.addColorStop(1, 'rgba(50, 30, 120, 0)'); ctx.fillStyle = cg; ctx.beginPath(); ctx.arc(n.x, n.y, sz * 5, 0, 6.2832); ctx.fill(); // Core ctx.beginPath(); ctx.arc(n.x, n.y, sz * 0.6, 0, 6.2832); ctx.fillStyle = `rgba(220, 210, 255, ${0.6 * clA})`; ctx.fill(); } // Prominent spiral galaxies if (t > 0.3) { const galA = easeOut((t - 0.3) / 0.5); const galaxies = [ { x: regionLeft + regionW * 0.25, y: cy - H * 0.08, size: 45 }, { x: regionLeft + regionW * 0.6, y: cy + H * 0.12, size: 55 }, { x: regionLeft + regionW * 0.85, y: cy - H * 0.05, size: 35 }, { x: regionLeft + regionW * 0.4, y: cy + H * 0.25, size: 30 }, { x: regionLeft + regionW * 0.15, y: cy + H * 0.18, size: 25 }, ]; for (const g of galaxies) { if (g.y > cy - fH(g.x) && g.y < cy + fH(g.x)) { drawSpiralGalaxy(g.x, g.y, time, galA, g.size); } } } ctx.restore(); } function drawSpiralGalaxy(gx, gy, time, alpha, size) { const spin = time * 0.0004; // Halo const hg = ctx.createRadialGradient(gx, gy, 0, gx, gy, size * 1.1); hg.addColorStop(0, `rgba(200, 180, 255, ${0.12 * alpha})`); hg.addColorStop(0.5, `rgba(80, 60, 160, ${0.04 * alpha})`); hg.addColorStop(1, 'rgba(30, 20, 80, 0)'); ctx.fillStyle = hg; ctx.beginPath(); ctx.arc(gx, gy, size * 1.1, 0, 6.2832); ctx.fill(); // Arms ctx.save(); ctx.globalCompositeOperation = 'lighter'; for (let arm = 0; arm < 3; arm++) { const armOff = (arm / 3) * Math.PI * 2; ctx.beginPath(); for (let s = 0; s < 90; s++) { const sf = s / 90; const angle = spin + armOff + sf * Math.PI * 2.8; const r = sf * size; const px = gx + Math.cos(angle) * r; const py = gy + Math.sin(angle) * r * 0.5; if (s === 0) ctx.moveTo(px, py); else ctx.lineTo(px, py); } ctx.strokeStyle = `rgba(160, 150, 240, ${0.18 * alpha})`; ctx.lineWidth = 1.5; ctx.stroke(); // Stars along arm for (let s = 2; s < 25; s++) { const sf = s / 25; const angle = spin + armOff + sf * Math.PI * 2.8 + Math.sin(s * 5.7) * 0.12; const r = sf * size + Math.sin(s * 3.1) * 2; const px = gx + Math.cos(angle) * r; const py = gy + Math.sin(angle) * r * 0.5; ctx.beginPath(); ctx.arc(px, py, 0.6 + Math.sin(s * 11) * 0.25, 0, 6.2832); ctx.fillStyle = `rgba(210, 205, 255, ${0.4 * alpha})`; ctx.fill(); } } ctx.restore(); // Bright core const cg = ctx.createRadialGradient(gx, gy, 0, gx, gy, size * 0.12); cg.addColorStop(0, `rgba(255, 240, 200, ${0.7 * alpha})`); cg.addColorStop(0.6, `rgba(255, 220, 180, ${0.3 * alpha})`); cg.addColorStop(1, 'rgba(200, 180, 255, 0)'); ctx.fillStyle = cg; ctx.beginPath(); ctx.arc(gx, gy, size * 0.12, 0, 6.2832); ctx.fill(); } // ═══════════════════════════════════════ // DRAW: TODAY (predictions + Earth) // ═══════════════════════════════════════ function drawToday(time) { const t = phaseT(7); if (t < 0) return; // Draw structure as background drawCosmicStructure(time); const fadeIn = easeOut(Math.min(t * 2.5, 1)); const rightZone = throatX + (W - throatX) * 0.5; // Earth const earthR = 16; const earthX = rightZone; const earthY = cy + H * 0.08; // Earth glow const eg = ctx.createRadialGradient(earthX, earthY, earthR * 0.5, earthX, earthY, earthR * 2.8); eg.addColorStop(0, `rgba(50, 120, 200, ${0.25 * fadeIn})`); eg.addColorStop(0.5, `rgba(30, 80, 150, ${0.08 * fadeIn})`); eg.addColorStop(1, 'rgba(20, 50, 100, 0)'); ctx.fillStyle = eg; ctx.beginPath(); ctx.arc(earthX, earthY, earthR * 2.8, 0, 6.2832); ctx.fill(); // Earth body const ebg = ctx.createRadialGradient(earthX - 3, earthY - 3, 0, earthX, earthY, earthR); ebg.addColorStop(0, '#4a9eda'); ebg.addColorStop(0.3, '#2d7ab8'); ebg.addColorStop(0.55, '#1d6a3a'); ebg.addColorStop(0.75, '#2d7ab8'); ebg.addColorStop(1, '#1a4a7a'); ctx.beginPath(); ctx.arc(earthX, earthY, earthR, 0, 6.2832); ctx.fillStyle = ebg; ctx.fill(); // Telescope/satellite const telX = earthX; const telY = earthY - earthR - 22; ctx.save(); ctx.translate(telX, telY); ctx.rotate(Math.sin(time * 0.001) * 0.08); ctx.beginPath(); ctx.moveTo(0, -8); ctx.lineTo(-4, 5); ctx.lineTo(4, 5); ctx.closePath(); ctx.fillStyle = `rgba(180, 190, 210, ${0.6 * fadeIn})`; ctx.fill(); ctx.restore(); // Data beams from telescope if (t > 0.2) { const beamA = lerp(0, 0.35, (t - 0.2) / 0.4); ctx.save(); ctx.globalCompositeOperation = 'lighter'; for (let i = 0; i < 8; i++) { const angle = -Math.PI / 2 + (i - 3.5) * 0.18; const len = W * 0.3; for (let d = 0; d < 15; d++) { const df = d / 15; const offset = (time * 0.0015 + i * 0.25) % 1; const dPos = (df + offset) % 1; const dx = telX + Math.cos(angle) * len * dPos; const dy = telY + Math.sin(angle) * len * dPos; ctx.beginPath(); ctx.arc(dx, dy, 0.8 * (1 - dPos), 0, 6.2832); ctx.fillStyle = `rgba(80, 180, 255, ${beamA * (1 - dPos) * 0.4})`; ctx.fill(); } } ctx.restore(); } // Prediction labels if (t > 0.25) { const labA = easeOut((t - 0.25) / 0.35); ctx.save(); ctx.textAlign = 'center'; // f_NL prediction const fSize = Math.min(22, W * 0.026); ctx.font = `600 ${fSize}px 'IBM Plex Mono', monospace`; ctx.fillStyle = `rgba(255, 200, 70, ${labA})`; ctx.fillText('f\u2099\u2097 = \u221235/8', rightZone, cy - H * 0.20); ctx.font = `400 ${Math.min(10, W * 0.013)}px 'IBM Plex Mono', monospace`; ctx.fillStyle = `rgba(255, 200, 70, ${labA * 0.5})`; ctx.fillText('minimally parameterized matter bounce prediction', rightZone, cy - H * 0.20 + 18); // Birefringence ctx.font = `600 ${fSize}px 'IBM Plex Mono', monospace`; ctx.fillStyle = `rgba(139, 92, 246, ${labA})`; ctx.fillText('\u03B2 = 0.27\u00B0', rightZone, cy - H * 0.10); ctx.font = `400 ${Math.min(10, W * 0.013)}px 'IBM Plex Mono', monospace`; ctx.fillStyle = `rgba(139, 92, 246, ${labA * 0.5})`; ctx.fillText('cosmic birefringence \u2014 ALP natural', rightZone, cy - H * 0.10 + 18); ctx.restore(); } // Mission labels if (t > 0.45) { const mA = easeOut((t - 0.45) / 0.3); ctx.save(); const mSize = Math.min(12, W * 0.014); ctx.font = `500 ${mSize}px 'IBM Plex Mono', monospace`; // SPHEREx ctx.textAlign = 'left'; const sX = rightZone + W * 0.08; const sY = cy + H * 0.22; ctx.fillStyle = `rgba(59, 130, 246, ${mA})`; ctx.fillText('SPHEREx ~2028', sX, sY); ctx.font = `400 ${Math.min(9, W * 0.011)}px 'IBM Plex Mono', monospace`; ctx.fillStyle = `rgba(59, 130, 246, ${mA * 0.55})`; ctx.fillText('\u03C3(f\u2099\u2097) \u2248 0.5', sX, sY + 14); // LiteBIRD ctx.textAlign = 'right'; const lX = rightZone - W * 0.08; const lY = cy + H * 0.22; ctx.font = `500 ${mSize}px 'IBM Plex Mono', monospace`; ctx.fillStyle = `rgba(168, 85, 247, ${mA})`; ctx.fillText('LiteBIRD ~2032', lX, lY); ctx.font = `400 ${Math.min(9, W * 0.011)}px 'IBM Plex Mono', monospace`; ctx.fillStyle = `rgba(168, 85, 247, ${mA * 0.55})`; ctx.fillText('\u03B2 at 9\u03C3', lX, lY + 14); ctx.restore(); } // Final question if (t > 0.65) { const qA = easeOut((t - 0.65) / 0.2); ctx.save(); ctx.textAlign = 'center'; ctx.font = `600 ${Math.min(18, W * 0.022)}px 'Inter', sans-serif`; ctx.fillStyle = `rgba(255, 255, 255, ${qA * 0.85})`; ctx.fillText('Did our universe bounce into existence?', rightZone, cy + H * 0.35); ctx.restore(); } } // ═══════════════════════════════════════ // DRAW: PARENT UNIVERSE CONTENT (left side) // ═══════════════════════════════════════ function drawParentUniverse(time) { const alpha = 1 - smoothstep(0.30, 0.45, progress); if (alpha < 0.01) return; // Faint distant galaxies in the parent universe (left side) ctx.save(); ctx.beginPath(); for (let x = 0; x <= W * 0.5; x += 3) ctx.lineTo(x, cy - fH(x)); for (let x = W * 0.5; x >= 0; x -= 3) ctx.lineTo(x, cy + fH(x)); ctx.closePath(); ctx.clip(); const galCount = 8; for (let i = 0; i < galCount; i++) { const gx = W * 0.03 + seed(i, 53.1, 17.3) * throatX * 0.7; const gy = cy + (seed(i, 89.7, 41.2) - 0.5) * fH(gx) * 1.4; const sz = 1.5 + seed(i, 11.3, 7.7) * 3; const bright = alpha * (0.15 + seed(i, 33.1, 5.5) * 0.2); // Tiny galaxy blobs const gg = ctx.createRadialGradient(gx, gy, 0, gx, gy, sz); gg.addColorStop(0, `rgba(255, 200, 150, ${bright})`); gg.addColorStop(0.5, `rgba(200, 130, 80, ${bright * 0.4})`); gg.addColorStop(1, 'rgba(150, 80, 40, 0)'); ctx.fillStyle = gg; ctx.beginPath(); ctx.arc(gx, gy, sz, 0, 6.2832); ctx.fill(); } // Matter streams flowing toward throat if (progress < 0.30) { const streamA = alpha * 0.15; for (let i = 0; i < 6; i++) { const startX = W * 0.02 + seed(i, 71.3, 23.1) * throatX * 0.5; const startY = cy + (seed(i, 43.7, 91.2) - 0.5) * fH(startX) * 0.8; ctx.beginPath(); ctx.moveTo(startX, startY); // Curve toward throat const cpX = (startX + throatX) * 0.5; const cpY = cy + (startY - cy) * 0.3; ctx.quadraticCurveTo(cpX, cpY, throatX - 10, cy); ctx.strokeStyle = `rgba(255, 150, 60, ${streamA})`; ctx.lineWidth = 1.5; ctx.stroke(); } } ctx.restore(); } // ═══════════════════════════════════════ // DRAW: VIGNETTE // ═══════════════════════════════════════ function drawVignette() { const vg = ctx.createRadialGradient(W * 0.5, H * 0.5, Math.min(W, H) * 0.3, W * 0.5, H * 0.5, Math.max(W, H) * 0.72); vg.addColorStop(0, 'rgba(0, 0, 0, 0)'); vg.addColorStop(1, 'rgba(0, 0, 0, 0.55)'); ctx.fillStyle = vg; ctx.fillRect(0, 0, W, H); } // ═══════════════════════════════════════ // DRAW: SCALE FACTOR GRAPH // ═══════════════════════════════════════ function drawScaleGraph() { const sw = sgCanvas.width; const sh = sgCanvas.height; sgCtx.clearRect(0, 0, sw, sh); // Background sgCtx.fillStyle = 'rgba(6, 6, 16, 0.7)'; sgCtx.fillRect(0, 0, sw, sh); sgCtx.strokeStyle = 'rgba(255, 255, 255, 0.08)'; sgCtx.lineWidth = 1; sgCtx.strokeRect(0.5, 0.5, sw - 1, sh - 1); // Label sgCtx.font = '9px "IBM Plex Mono", monospace'; sgCtx.fillStyle = 'rgba(255, 255, 255, 0.35)'; sgCtx.textAlign = 'left'; sgCtx.fillText('a(t)', 6, 14); sgCtx.textAlign = 'right'; sgCtx.fillText('scale factor', sw - 6, 14); // The bounce curve: a(t) = a_min * cosh-like shape const bounceNorm = 0.38; // where bounce happens on the graph (matches phase timing) const pad = { l: 8, r: 8, t: 22, b: 12 }; const gw = sw - pad.l - pad.r; const gh = sh - pad.t - pad.b; sgCtx.beginPath(); for (let i = 0; i <= gw; i++) { const t = i / gw; const dt = (t - bounceNorm) * 4; const aVal = 1 + dt * dt * 0.8; // parabolic approximation of cosh const normalized = Math.max(0, Math.min(1, 1 - 1 / aVal)); const px = pad.l + i; const py = pad.t + gh - normalized * gh; if (i === 0) sgCtx.moveTo(px, py); else sgCtx.lineTo(px, py); } sgCtx.strokeStyle = 'rgba(100, 180, 255, 0.45)'; sgCtx.lineWidth = 1.5; sgCtx.stroke(); // Current position marker const markerI = progress * gw; const mdt = (progress - bounceNorm) * 4; const mVal = 1 + mdt * mdt * 0.8; const mNorm = Math.max(0, Math.min(1, 1 - 1 / mVal)); const mx = pad.l + markerI; const my = pad.t + gh - mNorm * gh; sgCtx.beginPath(); sgCtx.arc(mx, my, 3, 0, 6.2832); sgCtx.fillStyle = '#fff'; sgCtx.fill(); sgCtx.beginPath(); sgCtx.arc(mx, my, 5, 0, 6.2832); sgCtx.strokeStyle = 'rgba(100, 180, 255, 0.4)'; sgCtx.lineWidth = 1; sgCtx.stroke(); // Bounce label const bx = pad.l + bounceNorm * gw; sgCtx.beginPath(); sgCtx.moveTo(bx, pad.t); sgCtx.lineTo(bx, pad.t + gh); sgCtx.strokeStyle = 'rgba(255, 255, 255, 0.08)'; sgCtx.lineWidth = 0.5; sgCtx.stroke(); sgCtx.font = '7px "IBM Plex Mono", monospace'; sgCtx.fillStyle = 'rgba(255, 255, 255, 0.2)'; sgCtx.textAlign = 'center'; sgCtx.fillText('bounce', bx, sh - 3); } // ════════════════════════════════════════════════════════════ // MAIN RENDER LOOP // ════════════════════════════════════════════════════════════ function render(timestamp) { if (!lastTime) lastTime = timestamp; const dt = Math.min(timestamp - lastTime, 50); // cap delta lastTime = timestamp; if (playing) { progress += (dt / CYCLE_MS) * speed; if (progress >= 1) progress = 0; } const time = timestamp; // ── Hard clip: nothing renders past the visible funnel region ── const _rightReveal = smoothstep(0.36, 0.56, progress); const _maxVisibleX = throatX + _rightReveal * (W - throatX); // ── Layer 1: Background + nebula ── drawBackground(time); // ── Layer 2: Stars ── const starAlpha = progress < 0.36 ? 0.6 : (progress < 0.48 ? lerp(0.6, 0.1, (progress - 0.36) / 0.12) : lerp(0.1, 0.5, smoothstep(0.55, 0.75, progress))); drawStars(time, starAlpha); // ── Layer 2b: Dust/gas field ── drawDustField(time); // ── Layer 3: Parent universe content ── drawParentUniverse(time); // ── Clip all funnel/effect drawing to visible region ── ctx.save(); ctx.beginPath(); ctx.rect(0, 0, _maxVisibleX + 30, H); ctx.clip(); // ── Layer 4: Funnel geometry ── drawFunnel(time); // ── Layer 5: Black hole (dark sphere + photon ring + lensing) ── drawBlackHole(time); // ── Layer 6: Infalling debris ── drawInfallingDebris(time); // ── Layer 6b: Pre-bounce darkness + ignition point ── drawPreBounceDarkness(time); // ── Layer 7: Collapse particles ── drawCollapseParticles(time, dt); // ── Layer 8: Expansion particles ── drawExpansionParticles(time, dt); // ── Layer 9: Bounce flash (on top of everything) ── drawBounceFlash(time); // ── Layer 10: Inflation grid ── drawInflationGrid(time); // ── Layer 11: CMB wall ── drawCMBWall(time); // ── Layer 12: Cosmic structure + galaxies ── if (phaseT(6) >= 0) drawCosmicStructure(time); // ── Layer 13: Today overlay ── if (phaseT(7) >= 0) drawToday(time); ctx.restore(); // remove clip // ── Layer 14: Vignette ── drawVignette(); // ── Scale factor graph ── drawScaleGraph(); // ── UI updates ── updateUI(); requestAnimationFrame(render); } // ═══════════════════════════════════════ // UI UPDATES // ═══════════════════════════════════════ const phaseLabel = document.getElementById('phaseLabel'); const timelineFill = document.getElementById('timelineFill'); const densityMeter = document.getElementById('densityMeter'); const densityFillEl = document.getElementById('densityFill'); const densityValueEl = document.getElementById('densityValue'); function updateUI() { timelineFill.style.width = (progress * 100) + '%'; let currentPhase = 0; for (let i = 0; i < phases.length; i++) { if (progress >= phases[i].start && progress < phases[i].end) { currentPhase = i; break; } } const p = phases[currentPhase]; phaseLabel.innerHTML = p.label + '' + p.sub + ''; const pips = document.querySelectorAll('.phase-pip'); pips.forEach((pip, i) => pip.classList.toggle('active', i === currentPhase)); // Density meter (visible during approach phases) if (progress >= 0.08 && progress < 0.50) { densityMeter.style.opacity = '1'; let density; if (progress < 0.12) density = lerp(0, 0.05, (progress - 0.08) / 0.04); else if (progress < 0.24) density = lerp(0.05, 0.4, (progress - 0.12) / 0.12); else if (progress < 0.36) density = lerp(0.4, 0.99, (progress - 0.24) / 0.12); else if (progress < 0.40) density = lerp(0.99, 1.0, (progress - 0.36) / 0.04); else density = lerp(1.0, 0.2, (progress - 0.40) / 0.10); densityFillEl.style.height = (density * 100) + '%'; densityValueEl.textContent = density.toFixed(2); } else { densityMeter.style.opacity = '0'; } } // ═══════════════════════════════════════ // CONTROLS // ═══════════════════════════════════════ const playBtn = document.getElementById('playBtn'); const playIcon = document.getElementById('playIcon'); playBtn.addEventListener('click', () => { playing = !playing; playIcon.innerHTML = playing ? '' : ''; }); // Start playing playIcon.innerHTML = ''; const speedBtns = { '0.5': document.getElementById('speedDown'), '1': document.getElementById('speedNorm'), '2': document.getElementById('speedUp'), }; function setSpeed(s) { speed = s; Object.entries(speedBtns).forEach(([k, btn]) => btn.classList.toggle('active', parseFloat(k) === s)); } speedBtns['0.5'].addEventListener('click', () => setSpeed(0.5)); speedBtns['1'].addEventListener('click', () => setSpeed(1)); speedBtns['2'].addEventListener('click', () => setSpeed(2)); // Timeline scrubbing const timelineTrack = document.getElementById('timelineTrack'); let dragging = false; function setProgressFromEvent(e) { const rect = timelineTrack.getBoundingClientRect(); const x = (e.clientX || (e.touches && e.touches[0].clientX)) - rect.left; progress = Math.max(0, Math.min(0.999, x / rect.width)); } timelineTrack.addEventListener('mousedown', (e) => { dragging = true; setProgressFromEvent(e); }); window.addEventListener('mousemove', (e) => { if (dragging) setProgressFromEvent(e); }); window.addEventListener('mouseup', () => { dragging = false; }); timelineTrack.addEventListener('touchstart', (e) => { dragging = true; setProgressFromEvent(e); }, { passive: true }); window.addEventListener('touchmove', (e) => { if (dragging) setProgressFromEvent(e); }, { passive: true }); window.addEventListener('touchend', () => { dragging = false; }); // Keyboard shortcuts window.addEventListener('keydown', (e) => { if (e.key === ' ' || e.key === 'k') { e.preventDefault(); playBtn.click(); } else if (e.key === 'ArrowRight') progress = Math.min(0.999, progress + 0.02); else if (e.key === 'ArrowLeft') progress = Math.max(0, progress - 0.02); else if (e.key === '1') setSpeed(0.5); else if (e.key === '2') setSpeed(1); else if (e.key === '3') setSpeed(2); }); // ── Start ── requestAnimationFrame(render);

Bounce Visualization