'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const WIDTH = 1000; const HEIGHT = 600; const DT = 0.016; // 60fps physics step // Vector Math Helpers const vecAdd = (v1, v2) => ({ x: v1.x + v2.x, y: v1.y + v2.y }); const vecScale = (v, s) => ({ x: v.x * s, y: v.y * s }); export default function NewtonLawsAnimation() { const [sceneIndex, setSceneIndex] = useState(0); const [elapsedSceneTime, setElapsedSceneTime] = useState(0); // Physics State // Scene 0: Inertia (Single Object) // Scene 1: F=ma (Two Objects, diff mass) // Scene 2: Action/Reaction (Two Objects collision/repulsion) const physicsState = useRef({ objects: [], particles: [], // For thruster effects }); const requestRef = useRef(); const startTimeRef = useRef(); // Scene Configuration const SCENES = [ { id: 0, title: "第一定律：惯性 (Law of Inertia)", subtitle: "物体保持静止或匀速直线运动，直到受到外力作用。", formula: "∑F = 0 ⇒ dv/dt = 0", duration: 8000, }, { id: 1, title: "第二定律：加速度 (Law of Acceleration)", subtitle: "加速度与作用力成正比，与质量成反比。", formula: "F = ma", duration: 8000, }, { id: 2, title: "第三定律：作用与反作用 (Action & Reaction)", subtitle: "每一个作用力都有一个大小相等、方向相反的反作用力。", formula: "F₁ = -F₂", duration: 8000, } ]; const resetScene = (index) => { physicsState.current.particles = []; if (index === 0) { // Inertia: Object starts moving, then friction applies later physicsState.current.objects = [ { id: 'obj1', x: 100, y: 300, vx: 150, vy: 0, mass: 20, radius: 25, color: '#38bdf8', force: {x:0, y:0} } ]; } else if (index === 1) { // F=ma: Two objects, same force, diff mass physicsState.current.objects = [ { id: 'light', x: 100, y: 200, vx: 0, vy: 0, mass: 10, radius: 20, color: '#38bdf8', force: {x:0, y:0}, label: 'm' }, { id: 'heavy', x: 100, y: 400, vx: 0, vy: 0, mass: 50, radius: 35, color: '#f472b6', force: {x:0, y:0}, label: '5m' } ]; } else if (index === 2) { // Action/Reaction: Two objects in center, push apart physicsState.current.objects = [ { id: 'p1', x: 400, y: 300, vx: 0, vy: 0, mass: 20, radius: 30, color: '#38bdf8', force: {x:0, y:0} }, { id: 'p2', x: 600, y: 300, vx: 0, vy: 0, mass: 20, radius: 30, color: '#f472b6', force: {x:0, y:0} } ]; } }; const updatePhysics = (time) => { const state = physicsState.current; const scene = SCENES[sceneIndex]; const t = time / 1000; // time in seconds within scene // --- SCENE LOGIC --- if (sceneIndex === 0) { // Inertia const obj = state.objects[0]; // Phase 1: 0-3s: Uniform motion (F=0) // Phase 2: 3-6s: External Force (Retro thrusters) // Phase 3: 6s+: Stop if (t > 3 && t < 6) { // Apply braking force obj.force = { x: -800, y: 0 }; // Add particles if (Math.random() > 0.5) { state.particles.push({ x: obj.x + obj.radius, y: obj.y + (Math.random() - 0.5) * 20, vx: 200, vy: (Math.random() - 0.5) * 50, life: 1.0, color: '#fbbf24' }); } } else { obj.force = { x: 0, y: 0 }; // Clean stop to prevent jitter if (t >= 6) obj.vx = 0; } } else if (sceneIndex === 1) { // F=ma // Apply constant force to both for 4 seconds const applyForce = t > 1 && t < 5; const forceMag = 1500; state.objects.forEach(obj => { if (applyForce) { obj.force = { x: forceMag, y: 0 }; // Thruster particles for(let k=0; k<2; k++) { state.particles.push({ x: obj.x - obj.radius, y: obj.y + (Math.random() - 0.5) * 15, vx: -150 - Math.random()*100, vy: (Math.random() - 0.5) * 50, life: 0.8, color: '#fbbf24' }); } } else { obj.force = { x: 0, y: 0 }; } }); } else if (sceneIndex === 2) { // Action/Reaction const o1 = state.objects[0]; const o2 = state.objects[1]; // Move them together slowly first if (t < 2) { o1.x = 450 - t * 25; o2.x = 550 + t * 25; // Reset for the push if (t > 1.9) { o1.x=400; o2.x=600; o1.vx=0; o2.vx=0; } } // EXPLOSION/PUSH at t=2.5 else if (t > 2.5 && t < 2.7) { const pushForce = 8000; o1.force = { x: -pushForce, y: 0 }; o2.force = { x: pushForce, y: 0 }; // Boom particles for(let k=0; k<5; k++) { state.particles.push({ x: 500, y: 300, vx: (Math.random() - 0.5) * 500, vy: (Math.random() - 0.5) * 500, life: 1.5, color: '#ffffff' }); } } else { o1.force = { x: 0, y: 0 }; o2.force = { x: 0, y: 0 }; } } // --- INTEGRATION (Euler) --- state.objects.forEach(obj => { const ax = obj.force.x / obj.mass; const ay = obj.force.y / obj.mass; obj.vx += ax * DT; obj.vy += ay * DT; obj.x += obj.vx * DT; obj.y += obj.vy * DT; }); // --- PARTICLE SYSTEM --- for (let i = state.particles.length - 1; i >= 0; i--) { const p = state.particles[i]; p.x += p.vx * DT; p.y += p.vy * DT; p.life -= DT * 2; // Fade speed if (p.life <= 0) state.particles.splice(i, 1); } }; const animate = (time) => { if (!startTimeRef.current) startTimeRef.current = time; const totalElapsed = time - startTimeRef.current; // Scene Management const currentSceneObj = SCENES[sceneIndex]; let localTime = elapsedSceneTime + 16; // increment ~16ms if (localTime > currentSceneObj.duration) { // Next scene const nextIdx = (sceneIndex + 1) % SCENES.length; setSceneIndex(nextIdx); setElapsedSceneTime(0); resetScene(nextIdx); localTime = 0; } else { setElapsedSceneTime(localTime); } updatePhysics(localTime); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { resetScene(0); requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [sceneIndex]); // Re-bind when scene index essentially "starts" loop logic // --- RENDER HELPERS --- const drawGrid = () => { const lines = []; const gridSize = 50; // Horizontal for (let y = 0; y <= HEIGHT; y += gridSize) { lines.push(); } // Vertical for (let x = 0; x <= WIDTH; x += gridSize) { lines.push(); } return {lines}; }; const renderForceVector = (obj) => { if (Math.abs(obj.force.x) < 10 && Math.abs(obj.force.y) < 10) return null; // Scale visual vector const scale = 0.1; const endX = obj.x + obj.force.x * scale; const endY = obj.y + obj.force.y * scale; return ( F ); }; const renderVelocityVector = (obj) => { if (Math.abs(obj.vx) < 5) return null; const scale = 0.3; const endX = obj.x + obj.vx * scale; const endY = obj.y + obj.vy * scale; return ( v ); }; const currentSceneData = SCENES[sceneIndex]; return (

); }