/* viz.jsx — all programmatic SVG visualizations (no rasters, ever) */ /* ================================================================= EOANI ================================================================= */ /* Tidal-lock cross-section. Host page hero. */ function EoaniTidalLock({ w = 640, h = 340, interactive = true }) { const [x, setX] = React.useState(0.5); const onMove = e => { if (!interactive) return; const r = e.currentTarget.getBoundingClientRect(); setX(Math.max(0, Math.min(1, (e.clientX - r.left) / r.width))); }; const zones = [ { x0: 0.00, x1: 0.18, label: '永昼热区', temp: '~380 K', color: '#ff6b35' }, { x0: 0.18, x1: 0.38, label: '日下环', temp: '~320 K', color: '#e8821f' }, { x0: 0.38, x1: 0.62, label: '晨昏带', temp: '~270 K', color: '#8b3a1f' }, { x0: 0.62, x1: 0.82, label: '夜侧冻区', temp: '~180 K', color: '#3a1c14' }, { x0: 0.82, x1: 1.00, label: '永夜冰区', temp: '~95 K', color: '#0a0604' }, ]; return ( {zones.map((z, i) => ( ))} {/* star to the left */} ← Ross 128 (M4V) {/* planet disc */} {zones.map((z, i) => ( ))} {/* limb shading */} {/* grid */} {[-90,-45,0,45,90].map(d => ( ))} {/* cursor readout */} {interactive && (()=>{ const px = -130 + 260 * x; const idx = zones.findIndex(z => x >= z.x0 && x < z.x1); const z = zones[Math.max(0, idx)]; return ( {z.label} {z.temp} · Δ {(0.1 + Math.random()*0.4).toFixed(2)} mK ); })()} {/* zone labels */} {zones.map((z, i) => ( {z.label} ))} {interactive ? 'cursor · 热分辨 ~0.1 mK' : '潮汐锁定剖面 · Ross 128 b'} ); } /* Slow magnetic-field vector field that drifts */ function EoaniMagneticField({ w = 800, h = 260 }) { const [t, setT] = React.useState(0); React.useEffect(() => { let raf, start = performance.now(); const loop = n => { setT((n - start) / 1000); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); const cols = 28, rows = 8; const arrows = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { const x = (c + 0.5) * (w / cols); const y = (r + 0.5) * (h / rows); // dipole-ish: angle depends on position + slow drift const dx = x - w/2, dy = y - h/2; const base = Math.atan2(dy, dx) + Math.PI/2; const angle = base + 0.25 * Math.sin(t * 0.1 + r * 0.3) + 0.15 * Math.cos(t * 0.07 + c * 0.2); const len = 14; arrows.push({ x, y, angle, len, key: `${r}-${c}` }); } } return ( {arrows.map(a => ( ))} ); } /* Millennium slider: project a human age onto Eoani caste lifespans */ function EoaniMillenniumSlider() { const [age, setAge] = React.useState(30); const castes = [ { zh: '大衡', en: 'Magni', min: 1000, max: 1300, color: '#8b3a1f' }, { zh: '衡者', en: 'Eoan Integri', min: 600, max: 900, color: '#b8431e' }, { zh: '半衡', en: 'Mediari', min: 200, max: 400, color: '#d4641f' }, { zh: '微衡', en: 'Infra-Eoani', min: 80, max: 150, color: '#e8821f' }, { zh: '失衡', en: 'Ephemeri', min: 30, max: 60, color: '#ff6b35' }, ]; const max = 1300; return (
你的年龄投影到衡格寿命刻度 {age} 岁
setAge(+e.target.value)} style={{width:'100%', accentColor:'#e8821f'}} />
{castes.map((c, i) => (
{c.zh}{c.en}
{c.min}–{c.max} y
))}
一位大衡看你的一生，像你看一个蜉蝣的一天。 若折现率 r = 0.01%/年（衡族）对比 r = 5%/年（人类），同一份千年契约的现值相差 ≈ 1021 倍。
); } /* ================================================================= KETOI ================================================================= */ /* Flowing spectrogram band used as title ornament + hero */ function KetoiSpectrogram({ w = 900, h = 200, bars = 180 }) { const [t, setT] = React.useState(0); React.useEffect(() => { let raf, start = performance.now(); const loop = n => { setT((n - start) / 1000); raf = requestAnimationFrame(loop); }; raf = requestAnimationFrame(loop); return () => cancelAnimationFrame(raf); }, []); const cells = []; const rows = 16; const bw = w / bars; const rh = h / rows; for (let i = 0; i < bars; i++) { for (let r = 0; r < rows; r++) { // layered sinusoids produce speech-like envelope const x = i / bars * 8 - t * 0.6; const base = Math.exp(-Math.pow((r - 7) / 4, 2)); const wobble = 0.7 * Math.sin(x * 1.2 + r * 0.25) + 0.4 * Math.sin(x * 2.5 - r * 0.5 + t * 0.2) + 0.3 * Math.sin(x * 0.6 + t * 0.1); const v = Math.max(0, base + 0.15 * wobble); if (v < 0.04) continue; const hue = 190 + 40 * (r / rows) + 20 * Math.sin(t * 0.1); cells.push( ); } } return ( {cells} ); } /* Echo radar: one 'word' (text) rendered as an echogram */ function KetoiEchoRadar({ w = 520, h = 340, word = '鲸语族你好' }) { const N = word.length; const cx = w / 2, cy = h / 2; const rings = Array.from({length: 6}).map((_, i) => 40 + i * 32); const echoes = []; for (let i = 0; i < N; i++) { const ch = word.charCodeAt(i); const angle = (i / N) * Math.PI * 2 - Math.PI / 2; const r1 = 50 + (ch % 13) * 10; const r2 = r1 + 10 + (ch % 7) * 5; echoes.push( ); } return ( {rings.map(r => )} {echoes} echogram · "{word}" · 同一名字不同深度的回波签名 ); } /* Downward astronomy: phonon array pointing DOWN into the ocean floor */ function KetoiDownwardAstronomy({ w = 800, h = 320 }) { return ( {/* surface */} {/* surface waves */} `Q ${i*20+10} ${30+Math.sin(i*0.7)*6} ${i*20+20} 40`).join(' ')}`} fill="none" stroke="#7fc4d9" strokeOpacity="0.5" /> 海面 SURFACE {/* array of phonon receivers on sea floor pointing down */} {Array.from({length: 7}).map((_, i) => { const x = (i - 3) * 60; return ( {/* beams going down */} {Array.from({length:5}).map((_,j)=>( ))} ); })} 海床 BENTHIC ARRAY · 声子望远镜 {/* arrow UP = last frontier */} 天空 · 最晚发现 ); } /* Polarization skin swatch — responds to mouse */ function KetoiPolarization({ w = 260, h = 260 }) { const [m, setM] = React.useState({ x: 0.5, y: 0.5 }); const onMove = e => { const r = e.currentTarget.getBoundingClientRect(); setM({ x: (e.clientX - r.left)/r.width, y: (e.clientY - r.top)/r.height }); }; const tiles = []; for (let r = 0; r < 10; r++) { for (let c = 0; c < 10; c++) { const dx = c/9 - m.x, dy = r/9 - m.y; const d = Math.sqrt(dx*dx + dy*dy); const hue = 180 + 180 * ((c + r + d * 3) % 1); const angle = Math.atan2(dy, dx) * 180/Math.PI + d * 200; tiles.push( ); } } return {tiles}; } /* Wave divider for section breaks */ function KetoiWaveDivider({ w = 1440, h = 20 }) { const path = `M 0 ${h/2} ` + Array.from({length: 60}).map((_, i) => `Q ${i*24+12} ${h/2 + (i%2===0 ? -h/2 : h/2)} ${(i+1)*24} ${h/2}` ).join(' '); return ( ); } /* ================================================================= HUVARI ================================================================= */ /* Flowing field lines — interactive */ function HuvariFieldLines({ w = 900, h = 340 }) { const [src, setSrc] = React.useState({ x: 0.6, y: 0.5 }); const onMove = e => { const r = e.currentTarget.getBoundingClientRect(); setSrc({ x: (e.clientX - r.left)/r.width, y: (e.clientY - r.top)/r.height }); }; const cx = src.x * w, cy = src.y * h; const cx2 = w - cx, cy2 = h - cy; const lines = []; const N = 24; for (let i = 0; i < N; i++) { const theta = (i / N) * Math.PI * 2; const pts = []; let x = cx + Math.cos(theta) * 10; let y = cy + Math.sin(theta) * 10; for (let s = 0; s < 160; s++) { const dx1 = x - cx, dy1 = y - cy, r1 = Math.max(8, Math.hypot(dx1,dy1)); const dx2 = x - cx2, dy2 = y - cy2, r2 = Math.max(8, Math.hypot(dx2,dy2)); const fx = dx1/(r1*r1*r1) - dx2/(r2*r2*r2); const fy = dy1/(r1*r1*r1) - dy2/(r2*r2*r2); const m = Math.hypot(fx, fy); if (m < 1e-7) break; x += fx/m * 4; y += fy/m * 4; pts.push(`${x.toFixed(1)} ${y.toFixed(1)}`); if (x < -10 || x > w + 10 || y < -10 || y > h + 10) break; } lines.push(); } // equipotentials const equipot = []; for (let k = 1; k <= 5; k++) { const rr = k * 28; equipot.push(); equipot.push(); } return ( {equipot} {lines} +q −q cursor · 等位线 (金) · 场线 (青) ); } /* Hex semiconductor lattice — nods to electrical railways */ function HuvariLattice({ w = 520, h = 320 }) { const hexes = []; const s = 28; const hw = Math.sqrt(3) * s; for (let r = 0; r < 8; r++) { for (let c = 0; c < 12; c++) { const cx = c * hw + (r % 2 ? hw/2 : 0) + 20; const cy = r * s * 1.5 + 28; const pts = Array.from({length:6}).map((_,i)=>{ const a = i * Math.PI/3 - Math.PI/2; return `${(cx + Math.cos(a) * s).toFixed(1)},${(cy + Math.sin(a)*s).toFixed(1)}`; }).join(' '); const doped = (r*7+c*3) % 11 === 0; hexes.push( ); } } return {hexes}; } /* Clean-industry vs carbon-industry timeline */ function HuvariCleanVsCarbon({ w = 900, h = 260 }) { const yrs = [-300, 0, 300, 600, 900, 1200, 1500, 1712, 1900, 2000, 2100]; const scale = x => 60 + (x - yrs[0]) / (yrs[yrs.length-1] - yrs[0]) * (w - 120); // invented curves illustrating co2 equivalent const huvari = yrs.map(y => [scale(y), 170 - Math.min(1, Math.max(0, (y+200)/2200)) * 8]); const human = yrs.map(y => [scale(y), 220 - (y < 1712 ? 4 : Math.min(80, (y-1700)*0.5))]); return ( 大气碳当量 (任意单位) {/* Huvari curve — basically flat */} p.join(',')).join(' ')} fill="none" stroke="#00ffa3" strokeWidth="2" /> 涣族 {/* Human curve — hockey stick */} p.join(',')).join(' ')} fill="none" stroke="#ff4500" strokeWidth="2" /> 人类 {/* year ticks */} {yrs.map((y, i) => ( {y} ))} {/* 1712 marker */} 1712 · 首次接触 ); } /* ================================================================= THAVARI ================================================================= */ /* Strain tensor rose */ function ThavariTensorRose({ w = 340, h = 340 }) { const cx = w/2, cy = h/2; const N = 36; const rays = []; for (let i = 0; i < N; i++) { const a = (i / N) * Math.PI * 2; // symmetric tensor: σxx cos² + σyy sin² + 2σxy sinθcosθ const σxx = 0.9, σyy = 0.4, σxy = 0.25; const r = 40 + 90 * (σxx * Math.cos(a)**2 + σyy * Math.sin(a)**2 + 2 * σxy * Math.sin(a) * Math.cos(a)); rays.push({ x1: cx, y1: cy, x2: cx + Math.cos(a) * r, y2: cy + Math.sin(a) * r }); } return ( {[40, 70, 100, 130].map(r => ( ))} `${r.x2},${r.y2}`).join(' ')} fill="#00ffc8" fillOpacity="0.15" stroke="#00ffc8" strokeOpacity="0.7" /> {rays.map((r, i) => )} 应变玫瑰 σᵢⱼ ); } /* Ice-shell cross-section */ function ThavariIceShell({ w = 900, h = 420 }) { return ( {/* space */} 真空 · VACUUM {Array.from({length:30}).map((_,i)=>( ))} {/* ice shell */} 冰壳 ICE SHELL ~4.2 km {/* crack / Magellan-I melt probe */} 麦哲伦一号 · 2300 {/* subsurface ocean */} 地下海 SUBGLACIAL OCEAN · 震族所在 {/* hydrothermal vents + biolume */} {[0.18, 0.40, 0.55, 0.75, 0.88].map((px, i) => ( {/* biolume sparks */} {Array.from({length: 5}).map((_, j) => ( ))} ))} {/* host giant implied by tidal strain */} [推断] 宿主巨行星 ); } /* Octothrone: eight-minded rosette */ function ThavariOctothrone({ w = 320, h = 320 }) { const cx = w/2, cy = h/2, R = 110; const nodes = Array.from({length:8}).map((_,i)=>{ const a = i * Math.PI * 2 / 8 - Math.PI/2; return { x: cx + Math.cos(a) * R, y: cy + Math.sin(a) * R }; }); const edges = []; for (let i = 0; i < 8; i++) for (let j = i+1; j < 8; j++) { edges.push(); } return ( {edges} {nodes.map((n, i) => ( ))} 共焦 ); } /* ================================================================= HUMAN ================================================================= */ /* Solar system (to-scale-ish, stylized) with 2200–2300 settlements */ function HumanSolarSystem({ w = 1000, h = 260 }) { const bodies = [ { name: '太阳', en: 'Sun', au: 0.00, r: 16, color: '#ff8c00', label: '' }, { name: '水星', en: 'Mercury', au: 0.39, r: 2.5, color: '#8a8172', label: '' }, { name: '金星', en: 'Venus', au: 0.72, r: 4, color: '#d4a86e', label: '研究站' }, { name: '地球', en: 'Earth', au: 1.00, r: 4, color: '#4a90c9', label: '母行星' }, { name: '月球', en: 'Luna', au: 1.01, r: 1.8, color: '#c5c5c5', label: '工业 + 月背阵列' }, { name: '火星', en: 'Mars', au: 1.52, r: 3, color: '#c54d2c', label: '永久定居 · 2060' }, { name: '谷神', en: 'Ceres', au: 2.77, r: 1.2, color: '#8c7e70', label: '带矿' }, { name: '木卫二',en:'Europa', au: 5.20, r: 2.5, color: '#c8b898', label: '冰下研究' }, { name: '土卫六',en:'Titan', au: 9.58, r: 3, color: '#e0a86e', label: '大气殖民 · 2140' }, ]; const scaleAU = x => 40 + Math.pow(x, 0.45) * 220; return ( {bodies.map((b, i) => { const x = scaleAU(b.au); return ( {b.name} {b.label && {b.label}} {b.au > 0 && {b.au.toFixed(2)} AU} ); })} {/* axis label */} 人类聚居地 · 2200–2300 ); } /* Magellan-I technical sketch */ function HumanMagellan({ w = 520, h = 220 }) { return ( {/* body */} {/* fusion exhaust */} {Array.from({length:10}).map((_,i)=>( ))} {/* radiators */} {/* annotations */} [1] 熔探舱 [2] 辐射翅 [3] 燃料储槽 [4] 聚变炉 [5] 喷流 · 0.1c 麦哲伦一号 · 2250 发射 · 2300 抵波江 ε 冰卫星 ); } /* Lifespan comparison — horizontal bars */ function HumanLifespan({ w = 900, h = 320 }) { const bars = [ { label: '人类 (2025)', en: 'Human 2025', val: 80, color: '#6c757d' }, { label: '人类 (2280)', en: 'Human 2280', val: 150, color: '#0066cc' }, { label: '鲸语族 · 文化', en: 'Ketoi culture', val: 120, color: '#2e86ab' }, { label: '涣族 · 工程', en: 'Huvari eng.', val: 250, color: '#00d9ff' }, { label: '震族 · 自然', en: 'Thavari nat.', val: 450, color: '#00ffc8' }, { label: '衡族 · 衡者', en: 'Eoan Integri', val: 800, color: '#e8821f' }, { label: '衡族 · 大衡', en: 'Magni', val: 1200, color: '#8b3a1f' }, ]; const maxV = 1300; const scale = v => 180 + v / maxV * (w - 220); return ( {bars.map((b, i) => { const y = 28 + i * 38; return ( {b.label} {b.val} y ); })} {/* human 2280 benchmark line */} 当代人类健康寿命 ); } /* Contact-delay diagram — light-years */ function HumanContactDelay({ w = 520, h = 260 }) { const cx = w/2, cy = h/2; const stars = [ { name: '波江 ε', ly: 10.5, color: '#00ffc8', angle: -1.1 }, { name: 'Ross 128', ly: 11.0, color: '#e8821f', angle: 0.2 }, { name: '天仓', ly: 11.9, color: '#2e86ab', angle: 1.4 }, { name: '82 G. Eri',ly: 19.7, color: '#00d9ff', angle: 2.7 }, ]; const scale = ly => 30 + ly * 7; return ( {[5,10,15,20].map(r => ( {r} ly ))} 太阳 {stars.map(s => { const x = cx + Math.cos(s.angle) * scale(s.ly); const y = cy + Math.sin(s.angle) * scale(s.ly); return ( {s.name} {s.ly} ly · rt {(s.ly*2).toFixed(1)} y ); })} ); } /* ================================================================= Home — species card previews (each a tiny specialized viz) ================================================================= */ function HomeCardViz({ id }) { if (id === 'eoani') { return ( ); } if (id === 'ketoi') { return (
); } if (id === 'huvari') { return ( {Array.from({length:10}).map((_,i)=>( ))} {Array.from({length:7}).map((_,i)=>( ))} ); } if (id === 'thavari') { return (
); } if (id === 'human') { return (
); } return null; } Object.assign(window, { EoaniTidalLock, EoaniMagneticField, EoaniMillenniumSlider, KetoiSpectrogram, KetoiEchoRadar, KetoiDownwardAstronomy, KetoiPolarization, KetoiWaveDivider, HuvariFieldLines, HuvariLattice, HuvariCleanVsCarbon, ThavariTensorRose, ThavariIceShell, ThavariOctothrone, HumanSolarSystem, HumanMagellan, HumanLifespan, HumanContactDelay, HomeCardViz });