import React, { useEffect, useRef, useState, useMemo } from 'react'; const WavePropagationDemo = () => { const canvasRef = useRef(null); const containerRef = useRef(null); const [fps, setFps] = useState(0); const [modeIndex, setModeIndex] = useState(0); // Simulation Constants const SIM_WIDTH = 200; // Lower resolution for performance, scaled up via CSS const SIM_HEIGHT = 120; // Scenarios configuration const scenarios = useMemo(() => [ { name: "单源传播 (Single Source)", desc: "理想点波源的各向同性传播", sources: [{ x: 0.5, y: 0.5 }], freq: 0.8, speed: 1.0 }, { name: "双源干涉 (Interference)", desc: "杨氏双缝干涉模拟，相干波叠加形成明暗条纹", sources: [{ x: 0.35, y: 0.5 }, { x: 0.65, y: 0.5 }], freq: 1.2, speed: 0.8 }, { name: "三源相位阵 (Phased Array)", desc: "多波源叠加形成的复杂波场分布", sources: [{ x: 0.5, y: 0.3 }, { x: 0.35, y: 0.7 }, { x: 0.65, y: 0.7 }], freq: 1.5, speed: 0.6 }, { name: "高频衍射 (Diffraction High-Freq)", desc: "高频短波在空间中的快速传播演示", sources: [{ x: 0.2, y: 0.5 }, { x: 0.8, y: 0.5 }], freq: 2.5, speed: 1.5 } ], []); // Animation State const timeRef = useRef(0); const frameRef = useRef(0); const lastTimeRef = useRef(0); // Smooth transition state const currentSourcesRef = useRef(scenarios[0].sources); const currentFreqRef = useRef(scenarios[0].freq); // Auto-switch modes useEffect(() => { const interval = setInterval(() => { setModeIndex((prev) => (prev + 1) % scenarios.length); }, 6000); // Switch every 6 seconds return () => clearInterval(interval); }, [scenarios.length]); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d', { alpha: false }); // Create image data buffer const imgData = ctx.createImageData(SIM_WIDTH, SIM_HEIGHT); const data = imgData.data; const render = (timestamp) => { // FPS Calculation if (timestamp - lastTimeRef.current >= 1000) { setFps(frameRef.current); frameRef.current = 0; lastTimeRef.current = timestamp; } frameRef.current++; // Update Time timeRef.current += 0.05; const t = timeRef.current; // Target parameters const targetScenario = scenarios[modeIndex]; const lerpSpeed = 0.05; // Lerp Frequency currentFreqRef.current += (targetScenario.freq - currentFreqRef.current) * lerpSpeed; // Lerp Sources (Handle length mismatch by hiding/showing) const targetSources = targetScenario.sources; const activeSources = currentSourcesRef.current; // Adjust array length gradually if (activeSources.length < targetSources.length) { if (Math.random() > 0.9) activeSources.push({ ...targetSources[activeSources.length] }); } else if (activeSources.length > targetSources.length) { if (Math.random() > 0.9) activeSources.pop(); } // Move sources activeSources.forEach((src, i) => { if (targetSources[i]) { src.x += (targetSources[i].x - src.x) * lerpSpeed; src.y += (targetSources[i].y - src.y) * lerpSpeed; } }); // Pixel Calculation const w = SIM_WIDTH; const h = SIM_HEIGHT; const freq = currentFreqRef.current; const phaseOffset = t * 2.0; // Optimization: Pre-calculate constants const maxDist = Math.sqrt(w*w + h*h); for (let y = 0; y < h; y++) { for (let x = 0; x < w; x++) { let amplitude = 0; // Superposition Principle for (let s of activeSources) { const sx = s.x * w; const sy = s.y * h; const dist = Math.sqrt((x - sx) ** 2 + (y - sy) ** 2); // Wave equation: A * sin(k*r - w*t) // Adding a decay factor (1/dist) for realism, clamped to avoid infinity const decay = Math.min(1.5, 30 / (dist + 5)); amplitude += Math.sin(dist * 0.2 * freq - phaseOffset) * decay; } // Color Mapping (Palette: Deep Slate -> Cyan -> White) // Normalize amplitude roughly between -2 and 2 const intensity = amplitude; const index = (y * w + x) * 4; // Base color #0f172a (15, 23, 42) let r = 15; let g = 23; let b = 42; if (intensity > 0) { // Peaks: Add Cyan/White const val = Math.min(255, intensity * 180); r += val * 0.2; // Tint red slightly g += val; // Green b += val; // Blue } else { // Troughs: Darker or Purple tint const val = Math.min(100, Math.abs(intensity) * 80); r += val * 0.5; // Purple shift b += val * 0.8; } data[index] = r; data[index + 1] = g; data[index + 2] = b; data[index + 3] = 255; // Alpha } } ctx.putImageData(imgData, 0, 0); requestAnimationFrame(render); }; const animId = requestAnimationFrame(render); return () => cancelAnimationFrame(animId); }, [modeIndex, scenarios]); // UI Helper for current scenario const currentScenario = scenarios[modeIndex]; return (

{/* Background Canvas Layer */}

WAVE_SIMULATION // 波场模拟

{currentScenario.name}