'use client'; import React, { useEffect, useRef, useState, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BACKGROUND_COLOR = '#0f172a'; const ACCENT_COLOR = '#38bdf8'; // Cyan const HARMONIC_COLORS = ['#fbbf24', '#f472b6', '#4ade80', '#818cf8']; const FourierDecomposition = () => { const requestRef = useRef(); const [time, setTime] = useState(0); // 动画循环 const animate = (t: number) => { setTime(t / 1000); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // 信号配置：基础频率，以及各个谐波的系数 // 近似方波: sin(x) + 1/3 sin(3x) + 1/5 sin(5x) + ... const harmonics = useMemo(() => [ { freq: 1, amp: 80, label: '基波 (Fundamental)', color: HARMONIC_COLORS[0] }, { freq: 3, amp: 40, label: '3次谐波', color: HARMONIC_COLORS[1] }, { freq: 5, amp: 25, label: '5次谐波', color: HARMONIC_COLORS[2] }, { freq: 7, amp: 15, label: '7次谐波', color: HARMONIC_COLORS[3] }, ], []); // 生成波形路径 const generateWavePath = (freq: number, amp: number, offsetX: number, offsetY: number, width: number) => { const points = []; const resolution = 2; for (let x = 0; x <= width; x += resolution) { const angle = (x / 50) * freq - time * 3; const y = Math.sin(angle) * amp; points.push(`${x + offsetX},${y + offsetY}`); } return `M ${points.join(' L ')}`; }; // 生成合成波路径 const generateCompositePath = (offsetX: number, offsetY: number, width: number) => { const points = []; const resolution = 2; for (let x = 0; x <= width; x += resolution) { let totalY = 0; harmonics.forEach(h => { const angle = (x / 50) * h.freq - time * 3; totalY += Math.sin(angle) * h.amp; }); points.push(`${x + offsetX},${totalY + offsetY}`); } return `M ${points.join(' L ')}`; }; return (

); }; export default FourierDecomposition;'