'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ----------------------------------------------------------------------------- // Constants & Config // ----------------------------------------------------------------------------- const WIDTH = 800; const HEIGHT = 500; const ORIGIN_X = WIDTH / 2; const ORIGIN_Y = HEIGHT / 2; const SCALE_X = 60; // pixels per unit x const SCALE_Y = 120; // pixels per unit y (amplitude) const MAX_TERMS = 9; // Number of non-zero terms for sin(x) (corresponds to power 17 or so) const ANIMATION_SPEED = 0.015; // Progress increment per frame // Colors const COLOR_BG = "#0f172a"; const COLOR_AXIS = "#334155"; const COLOR_GRID = "#1e293b"; const COLOR_TARGET = "#34d399"; // Emerald 400 (sin x) const COLOR_APPROX = "#fbbf24"; // Amber 400 (Taylor) const COLOR_TEXT = "#f8fafc"; const COLOR_TEXT_SUB = "#94a3b8"; // ----------------------------------------------------------------------------- // Math Helpers // ----------------------------------------------------------------------------- // Factorial cache to improve performance const factorialCache: number[] = [1, 1]; const getFactorial = (n: number): number => { if (n < 0) return 1; if (factorialCache[n]) return factorialCache[n]; for (let i = factorialCache.length; i <= n; i++) { factorialCache[i] = i * factorialCache[i - 1]; } return factorialCache[n]; }; // Calculate sin(x) approximation using Maclaurin series (Taylor at 0) // sin(x) = x - x^3/3! + x^5/5! - x^7/7! ... // Term index k=0 -> x^1, k=1 -> x^3, k=2 -> x^5 const calculateTaylorSin = (x: number, progress: number) => { let sum = 0; // progress is a float, e.g., 2.5 means: // full term 0 + full term 1 + 0.5 * term 2 const maxIndex = Math.ceil(progress); for (let k = 0; k < maxIndex; k++) { const power = 2 * k + 1; const sign = k % 2 === 0 ? 1 : -1; let term = sign * Math.pow(x, power) / getFactorial(power); // Smooth transition for the last term if (k === maxIndex - 1) { const fractionalPart = progress - Math.floor(progress); // Use a ease-in-out curve for smoother visual entry of the term const ease = fractionalPart === 0 ? 1 : (1 - Math.cos(fractionalPart * Math.PI)) / 2; term *= ease; } sum += term; } return sum; }; // ----------------------------------------------------------------------------- // Component // ----------------------------------------------------------------------------- export const TaylorSeriesAnimation = () => { // Animation State // currentProgress represents how many terms are added. // 0.0 -> 1.0 (1st term appears), 1.0 -> 2.0 (2nd term appears), etc. const [currentProgress, setCurrentProgress] = useState(0); const [isPaused, setIsPaused] = useState(false); const requestRef = useRef(); // Loop useEffect(() => { const animate = () => { if (!isPaused) { setCurrentProgress(prev => { let next = prev + ANIMATION_SPEED; if (next > MAX_TERMS + 0.5) { // Pause briefly at the end then reset // Logic handled below to wait, but for simple loop: if (next > MAX_TERMS + 3) return 0; // Wait a bit then reset return next; } return next; }); } requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, [isPaused]); // Derived values for display const visibleTerms = Math.floor(currentProgress) + (currentProgress % 1 > 0.01 ? 1 : 0); const activeTermIndex = Math.floor(currentProgress); // Generate Paths const { targetPath, approxPath } = useMemo(() => { let dTarget = ""; let dApprox = ""; // Resolution: calculate points every 2 pixels const step = 2; let first = true; for (let sx = 0; sx <= WIDTH; sx += step) { // Screen X to Math X const mx = (sx - ORIGIN_X) / SCALE_X; // Calculate Y values const myTarget = Math.sin(mx); const myApprox = calculateTaylorSin(mx, currentProgress); // Math Y to Screen Y // Note: SVG Y increases downwards, Math Y increases upwards const syTarget = ORIGIN_Y - (myTarget * SCALE_Y); const syApprox = ORIGIN_Y - (myApprox * SCALE_Y); // Avoid drawing lines to infinity if numbers explode const SAFE_LIMIT = 5000; const safeSyApprox = Math.max(-SAFE_LIMIT, Math.min(SAFE_LIMIT, syApprox)); if (first) { dTarget += `M ${sx} ${syTarget}`; dApprox += `M ${sx} ${safeSyApprox}`; first = false; } else { dTarget += ` L ${sx} ${syTarget}`; dApprox += ` L ${sx} ${safeSyApprox}`; } } return { targetPath: dTarget, approxPath: dApprox }; }, [currentProgress]); // Generate Math Formula String const formulaTerms = useMemo(() => { const terms = []; // Show up to activeTermIndex const limit = Math.min(activeTermIndex, 4); // Only show first 5 terms in text to save space for (let k = 0; k <= limit; k++) { const power = 2 * k + 1; const sign = k % 2 === 0 ? (k === 0 ? "" : "+ ") : "- "; const numerator = power === 1 ? "x" : `x^${power}`; const denominator = power === 1 ? "" : `/${power}!`; // Highlight the term currently being added/animated const isAnimating = k === Math.floor(currentProgress); const opacity = isAnimating ? Math.min(1, (currentProgress % 1) * 2 + 0.2) : 1; terms.push( {sign}{numerator}{denominator} {" "} ); } if (activeTermIndex > 4) { terms.push(+ ...); } return terms; }, [currentProgress, activeTermIndex]); // Helper to generate grid lines const renderGrid = () => { const lines = []; // Vertical Lines (Pi steps) const piStep = Math.PI; // Left side for (let x = 0; x > -ORIGIN_X / SCALE_X; x -= piStep/2) { const sx = ORIGIN_X + x * SCALE_X; lines.push(); } // Right side for (let x = piStep/2; x < (WIDTH - ORIGIN_X) / SCALE_X; x += piStep/2) { const sx = ORIGIN_X + x * SCALE_X; lines.push(); } // Horizontal Lines for (let y = -2; y <= 2; y += 0.5) { if (y === 0) continue; const sy = ORIGIN_Y - y * SCALE_Y; lines.push(); } return lines; }; return (

{/* Header Info */}

泰勒级数展开 (Taylor Series)

函数: f(x) = sin(x) | 近似: P(x)

N = {Math.min(activeTermIndex, MAX_TERMS)}

多项式项数

{/* Main Visualization */}

{/* Play/Pause Overlay Button */} {/* Reset Hint */} {currentProgress > MAX_TERMS + 1 && (

RESTARTING...

)}

观察随着阶数(N)的增加，黄色曲线如何在 x=0 附近逐渐“贴合”绿色的正弦曲线。这直观地展示了泰勒级数收敛的过程。

); };