```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ---------------------------------------------------------------------- // 物理引擎与常量定义 // ---------------------------------------------------------------------- const VIEW_WIDTH = 800; const VIEW_HEIGHT = 500; const PARTICLE_COUNT = 100; // 10x10 Grid const PARTICLE_RADIUS = 4; const GRID_SPACING = 25; // 阶段定义 const PHASE_ORDER = 'ORDER'; // 有序 (晶体/低熵) const PHASE_TRANSITION = 'TRANSITION'; // 过渡 (吸热/键断裂) const PHASE_CHAOS = 'CHAOS'; // 混沌 (气体/高熵) const PHASE_RESET = 'RESET'; // 重置 (麦克斯韦妖/做功复位) export default function EntropySimulation() { // ---------------------------------------------------------------------- // 状态管理 // ---------------------------------------------------------------------- // 为了高性能动画，使用 ref 存储粒子物理状态，只在帧同步时触发重绘 const particlesRef = useRef( Array.from({ length: PARTICLE_COUNT }, (_, i) => { const row = Math.floor(i / 10); const col = i % 10; // 初始网格位置 (居中) const targetX = VIEW_WIDTH / 2 - (4.5 * GRID_SPACING) + col * GRID_SPACING; const targetY = VIEW_HEIGHT / 2 - (4.5 * GRID_SPACING) + row * GRID_SPACING; return { id: i, x: targetX, y: targetY, vx: 0, vy: 0, targetX, targetY, color: '#38bdf8', // Sky blue energy: 0, // 热动能 }; }) ); const [phase, setPhase] = useState(PHASE_ORDER); const [entropyValue, setEntropyValue] = useState(0); // 0 - 100 const [temperature, setTemperature] = useState(0); // 0 - 1000 K const [time, setTime] = useState(0); // 用于动画驱动 // 动画循环引用 const requestRef = useRef(); const phaseTimerRef = useRef(0); // ---------------------------------------------------------------------- // 物理模拟核心循环 // ---------------------------------------------------------------------- const updatePhysics = () => { const particles = particlesRef.current; phaseTimerRef.current += 1; const t = phaseTimerRef.current; // 状态机逻辑 let currentPhase = phase; let nextEntropy = entropyValue; let nextTemp = temperature; // 1. 有序阶段 (0 - 180 frames ~ 3s) if (currentPhase === PHASE_ORDER) { nextTemp = 20 + Math.random() * 5; // 低温 nextEntropy = Math.min(nextEntropy + 0.05, 5); // 低熵 particles.forEach(p => { // 简谐运动：被束缚在晶格点附近 const k = 0.05; // 弹簧系数 const ax = (p.targetX - p.x) * k; const ay = (p.targetY - p.y) * k; // 轻微热震动 p.vx = (p.vx + ax) * 0.9 + (Math.random() - 0.5) * 0.2; p.vy = (p.vy + ay) * 0.9 + (Math.random() - 0.5) * 0.2; p.x += p.vx; p.y += p.vy; p.color = '#38bdf8'; // 冷色 }); if (t > 180) { setPhase(PHASE_TRANSITION); phaseTimerRef.current = 0; } } // 2. 过渡阶段 (0 - 180 frames ~ 3s) else if (currentPhase === PHASE_TRANSITION) { nextTemp = 20 + (t / 180) * 500; // 温度升高 nextEntropy = 5 + (t / 180) * 30; // 熵开始增加 particles.forEach(p => { // 弹簧力减弱 (键断裂) const k = 0.05 * (1 - t / 180); const ax = (p.targetX - p.x) * k; const ay = (p.targetY - p.y) * k; // 热骚动增加 const noise = (t / 180) * 2.0; p.vx = (p.vx + ax) * 0.95 + (Math.random() - 0.5) * noise; p.vy = (p.vy + ay) * 0.95 + (Math.random() - 0.5) * noise; p.x += p.vx; p.y += p.vy; // 颜色变暖 p.color = interpolateColor('#38bdf8', '#f472b6', t / 180); }); if (t > 180) { setPhase(PHASE_CHAOS); phaseTimerRef.current = 0; } } // 3. 混沌阶段 (0 - 300 frames ~ 5s) else if (currentPhase === PHASE_CHAOS) { nextTemp = 500 + Math.random() * 50; // 高温 nextEntropy = Math.min(nextEntropy + 0.2, 100); // 熵最大化 particles.forEach(p => { // 纯布朗运动 / 理想气体模式 // 没有回复力，只有边界碰撞 p.x += p.vx; p.y += p.vy; // 边界碰撞 (盒子范围) const margin = 50; if (p.x < margin) { p.x = margin; p.vx *= -1; } if (p.x > VIEW_WIDTH - margin) { p.x = VIEW_WIDTH - margin; p.vx *= -1; } if (p.y < margin + 50) { p.y = margin + 50; p.vy *= -1; } // Top margin for text if (p.y > VIEW_HEIGHT - margin) { p.y = VIEW_HEIGHT - margin; p.vy *= -1; } // 颜色保持高能状态 p.color = '#f472b6'; // Hot Pink/Purple }); if (t > 300) { setPhase(PHASE_RESET); phaseTimerRef.current = 0; } } // 4. 重置阶段 (0 - 120 frames ~ 2s) else if (currentPhase === PHASE_RESET) { nextTemp = 500 * (1 - t / 120); nextEntropy = 100 * (1 - t / 120); particles.forEach(p => { // 强制拉回原位 (麦克斯韦妖干预) const dx = p.targetX - p.x; const dy = p.targetY - p.y; p.x += dx * 0.05; p.y += dy * 0.05; // 速度归零 p.vx *= 0.8; p.vy *= 0.8; p.color = interpolateColor('#f472b6', '#38bdf8', t / 120); }); if (t > 120) { setPhase(PHASE_ORDER); phaseTimerRef.current = 0; } } setEntropyValue(nextEntropy); setTemperature(nextTemp); setTime(prev => prev + 1); // 触发重绘 requestRef.current = requestAnimationFrame(updatePhysics); }; useEffect(() => { requestRef.current = requestAnimationFrame(updatePhysics); return () => cancelAnimationFrame(requestRef.current!); }, [phase]); // Phase change might re-trigger but ref keeps loop stable // ---------------------------------------------------------------------- // 辅助渲染计算 // ---------------------------------------------------------------------- // 简单的颜色插值器 const interpolateColor = (c1: string, c2: string, factor: number) => { // 简化处理，实际可以使用 chroma.js 或 tinycolor，这里只做简单的 CSS 变量切换或硬编码 // 为了性能，这里我们只做简单的阈值切换或保留 React 重新渲染颜色 // 真正的插值在 SVG 动画中比较昂贵，这里我们简单处理： return factor > 0.5 ? c2 : c1; }; // 计算连接线 (仅在有序阶段显示，模拟化学键) const renderBonds = () => { if (phase === PHASE_CHAOS || (phase === PHASE_RESET && phaseTimerRef.current < 60)) return null; const bonds = []; const particles = particlesRef.current; const opacity = phase === PHASE_TRANSITION ? 1 - (phaseTimerRef.current / 180) : (phase === PHASE_RESET ? (phaseTimerRef.current / 120) : 0.3); if (opacity <= 0.01) return null; // 只连接相邻的网格点 (水平和垂直) for (let i = 0; i < PARTICLE_COUNT; i++) { const p1 = particles[i]; // Right neighbor if ((i + 1) % 10 !== 0) { const p2 = particles[i + 1]; // Distance check to break bonds visually const dist = Math.hypot(p1.x - p2.x, p1.y - p2.y); if (dist < GRID_SPACING * 1.5) { bonds.push(); } } // Bottom neighbor if (i < 90) { const p2 = particles[i + 10]; const dist = Math.hypot(p1.x - p2.x, p1.y - p2.y); if (dist < GRID_SPACING * 1.5) { bonds.push(); } } } return {bonds}; }; // ---------------------------------------------------------------------- // UI 组件 // ---------------------------------------------------------------------- const getPhaseLabel = () => { switch(phase) { case PHASE_ORDER: return "低熵状态 (Low Entropy)"; case PHASE_TRANSITION: return "能量注入 / 熵增 (Increasing Entropy)"; case PHASE_CHAOS: return "热平衡 / 最大熵 (Max Entropy)"; case PHASE_RESET: return "系统重置 (System Reset)"; default: return ""; } }; const getPhaseDesc = () => { switch(phase) { case PHASE_ORDER: return "微观粒子排列有序，系统信息量大，ΔS ≈ 0"; case PHASE_TRANSITION: return "系统吸收热量，结构崩塌，无序度上升 ΔS > 0"; case PHASE_CHAOS: return "粒子随机分布，无序度达到最大值，无法做功"; case PHASE_RESET: return "引入外部做功，逆转熵增过程 (理想实验)"; default: return ""; } }; // 生成动态的背景网格 const GridBackground = useMemo(() => ( {Array.from({ length: 20 }).map((_, i) => ( ))} {Array.from({ length: 15 }).map((_, i) => ( ))} ), []); return (

{/* 顶部 HUD */}

MONITORING SYSTEM

ENTROPY.SIM

{getPhaseLabel()}

{getPhaseDesc()}

THERMODYNAMICS

TEMP (T) {Math.round(temperature)} K

ENTROPY (S) {entropyValue.toFixed(2)}

{/* 底部图表模拟 */}

{/* 主动画区域 */}

); } ```