'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // 粒子系统配置 const MAX_BUBBLES = 60; const MAX_STEAM = 40; interface Particle { id: number; x: number; y: number; size: number; speed: number; wobbleOffset: number; opacity: number; } export const BoilingWaterSimulation = () => { // 仿真状态 const [temperature, setTemperature] = useState(20); const [time, setTime] = useState(0); const [phase, setPhase] = useState('初始化'); // 粒子引用 (使用 Ref 避免重渲染时的闭包问题和性能损耗) const bubblesRef = useRef([]); const steamRef = useRef([]); const requestRef = useRef(); const startTimeRef = useRef(Date.now()); // 用于强制渲染的 tick const [, setTick] = useState(0); // 物理参数 const BOILING_POINT = 100; const HEATING_RATE = 0.15; // 升温速度 const COOLING_RATE = 0.5; // 重置时的降温速度 const BEAKER_BOTTOM = 450; const BEAKER_TOP = 150; const BEAKER_CENTER_X = 350; const BEAKER_WIDTH = 260; useEffect(() => { let isHeating = true; let holdBoilTimer = 0; const animate = () => { // 1. 温度控制逻辑 setTemperature(prevTemp => { let nextTemp = prevTemp; if (isHeating) { // 模拟加热曲线：随着温度升高，温升速率稍微变慢（散热增加） const rate = HEATING_RATE * (1 - (prevTemp / 150)); nextTemp += rate; if (nextTemp >= BOILING_POINT) { nextTemp = BOILING_POINT + (Math.random() * 0.5 - 0.25); // 在100度附近波动 holdBoilTimer++; if (holdBoilTimer > 400) { // 保持沸腾一段时间后重置 isHeating = false; holdBoilTimer = 0; } } } else { // 快速冷却重置 nextTemp -= COOLING_RATE * 5; if (nextTemp <= 20) { nextTemp = 20; isHeating = true; // 清空粒子 bubblesRef.current = []; steamRef.current = []; startTimeRef.current = Date.now(); setTime(0); } } return nextTemp; }); // 更新时间 setTime((Date.now() - startTimeRef.current) / 1000); // 2. 状态文本逻辑 setTemperature(t => { if (t < 40) setPhase('自然对流 (Natural Convection)'); else if (t < 90) setPhase('核态沸腾起始 (Nucleate Boiling)'); else if (t < 99) setPhase('过渡沸腾 (Transition Boiling)'); else setPhase('膜态/剧烈沸腾 (Rolling Boil)'); return t; }); // 3. 气泡物理系统 (Bubble Physics) setTemperature(currentTemp => { const bubbleChance = Math.max(0, (currentTemp - 50) / 500); // 温度越高，产生概率越大 const isBoiling = currentTemp >= 98; // 生成气泡 if (Math.random() < bubbleChance + (isBoiling ? 0.3 : 0)) { if (bubblesRef.current.length < MAX_BUBBLES) { const sizeBase = isBoiling ? 8 : 3; bubblesRef.current.push({ id: Math.random(), x: BEAKER_CENTER_X - BEAKER_WIDTH/2 + 20 + Math.random() * (BEAKER_WIDTH - 40), y: BEAKER_BOTTOM - 10, size: Math.random() * sizeBase + 2, speed: Math.random() * 2 + (currentTemp / 30), wobbleOffset: Math.random() * Math.PI * 2, opacity: 0 }); } } // 更新气泡位置 bubblesRef.current = bubblesRef.current.map(b => { // 浮力加速 const speedUp = b.y < 300 ? 1.05 : 1; const newY = b.y - b.speed * speedUp; // 左右摆动 const wobble = Math.sin(newY * 0.05 + b.wobbleOffset) * (b.size / 3); // 气泡膨胀 (随着压强减小/上升) const growth = 1.005; const newSize = Math.min(b.size * growth, 25); // 沸腾前的过冷水会导致气泡在上升中消失 let newOpacity = Math.min(1, b.opacity + 0.1); if (currentTemp < 90 && newY < 300) { newSize * 0.95; // 缩水 newOpacity -= 0.02; } return { ...b, y: newY, x: b.x + wobble * 0.1, size: newSize, opacity: newOpacity }; }).filter(b => b.y > BEAKER_TOP + 20 && b.opacity > 0); // 到达液面或消失 // 4. 蒸汽物理系统 (Steam Physics) if (currentTemp > 80) { const steamChance = (currentTemp - 80) / 100; if (Math.random() < steamChance) { if (steamRef.current.length < MAX_STEAM) { steamRef.current.push({ id: Math.random(), x: BEAKER_CENTER_X - BEAKER_WIDTH/2 + Math.random() * BEAKER_WIDTH, y: BEAKER_TOP + 10, size: Math.random() * 10 + 10, speed: Math.random() * 1 + 1, wobbleOffset: Math.random() * 10, opacity: 0.6 }); } } } steamRef.current = steamRef.current.map(s => ({ ...s, y: s.y - s.speed, x: s.x + Math.sin(s.y * 0.02) * 0.5, size: s.size * 1.01, opacity: s.opacity - 0.01 })).filter(s => s.opacity > 0); return currentTemp; }); setTick(t => t + 1); // 触发重绘 requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, []); // 动态生成水面波浪路径 const surfacePath = useMemo(() => { const segments = 20; const width = BEAKER_WIDTH; const startX = BEAKER_CENTER_X - width/2; const turbulence = Math.max(0, (temperature - 60) / 40); // 温度越高波浪越大 let d = `M ${startX} ${BEAKER_TOP + 10}`; for (let i = 0; i <= segments; i++) { const x = startX + (width / segments) * i; // 使用时间戳制造波浪动画 const yOffset = Math.sin(Date.now() / 200 + i) * (2 + turbulence * 8); d += ` L ${x} ${BEAKER_TOP + 10 + yOffset}`; } d += ` L ${startX + width} ${BEAKER_BOTTOM} L ${startX} ${BEAKER_BOTTOM} Z`; return d; }, [temperature, /* tick triggers re-calc via parent re-render */]); // 计算图表路径 const graphPoints = useMemo(() => { // 简化的可视化：绘制最近一段时间的温度 // 这里做一个静态背景线 + 动态当前点的效果更适合这种实时渲染 return ""; }, []); // 颜色计算 const heaterColor = temperature < 50 ? '#4b5563' : `rgb(${Math.min(255, (temperature - 40) * 4)}, 50, 50)`; const waterColor = '#0ea5e9'; // Sky 500 return ( ); };