'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ----------------------------------------------------------------------------- // Constants & Configuration // ----------------------------------------------------------------------------- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // Orbital Parameters const A = 350; // Semi-major axis const ECCENTRICITY = 0.6; // High eccentricity to exaggerate speed difference const B = A * Math.sqrt(1 - ECCENTRICITY * ECCENTRICITY); // Semi-minor axis const ORBIT_PERIOD = 800; // Frames per orbit (slower is smoother) // Colors const COLOR_BG = '#0f172a'; const COLOR_SUN = '#fbbf24'; // Amber-400 const COLOR_PLANET = '#38bdf8'; // Sky-400 const COLOR_ORBIT = '#334155'; // Slate-700 const COLOR_SWEEP_FILL = 'rgba(99, 102, 241, 0.3)'; // Indigo-500 low opacity const COLOR_SWEEP_STROKE = '#818cf8'; const COLOR_TEXT_MAIN = '#e2e8f0'; const COLOR_TEXT_SUB = '#94a3b8'; // ----------------------------------------------------------------------------- // Math Helpers // ----------------------------------------------------------------------------- // Solve Kepler's Equation: M = E - e * sin(E) for E using Newton-Raphson const solveKepler = (M: number, e: number): number => { let E = M; for (let i = 0; i < 5; i++) { E = E - (E - e * Math.sin(E) - M) / (1 - e * Math.cos(E)); } return E; }; // Calculate position based on Eccentric Anomaly E // Returns coordinates relative to the Focus (Sun) at (0,0) const getPosition = (E: number, a: number, b: number, e: number) => { // Center of ellipse relative to focus is (-ae, 0) // Parametric eq from center: x = a cos E, y = b sin E // Shifted to focus: x = a(cos E - e), y = b sin E return { x: a * (Math.cos(E) - e), y: b * Math.sin(E) }; }; // ----------------------------------------------------------------------------- // Component // ----------------------------------------------------------------------------- export const KeplerSecondLawView = () => { const requestRef = useRef(); const frameRef = useRef(0); // State for animation const [planetPos, setPlanetPos] = useState({ x: 0, y: 0 }); const [velocity, setVelocity] = useState(0); const [distance, setDistance] = useState(0); // Swept Areas Management // We want to capture a sector every X frames for a duration of Y frames const [activeSector, setActiveSector] = useState<{points: string, active: boolean} | null>(null); const [pastSectors, setPastSectors] = useState<{points: string, id: number}[]>([]); // Logic Refs const sectorStartRef = useRef<{x: number, y: number} | null>(null); const sectorTimerRef = useRef(0); const isSweepingRef = useRef(false); const sweepDuration = 60; // Frames to sweep const sweepInterval = 140; // Frames between sweeps // Generate background stars once const stars = useMemo(() => { return Array.from({ length: 100 }).map((_, i) => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 1.5, opacity: Math.random() * 0.7 + 0.3 })); }, []); // Generate orbit path string const orbitPath = useMemo(() => { // Generate simplified path for SVG const points = []; for (let i = 0; i <= 360; i+=2) { const rad = (i * Math.PI) / 180; // Using simple parametric for visual path (center relative) // We need to shift it so focus is at (0,0) of our coordinate system logic, // then translate to screen center. // Actually, let's just use the getPosition logic to be consistent // But getPosition takes Eccentric Anomaly, not True Anomaly. // For drawing the static ellipse, standard parametric is fine. // Center of ellipse is at (-a*e, 0) relative to Sun. const px = -A * ECCENTRICITY + A * Math.cos(rad); const py = B * Math.sin(rad); points.push(`${px},${py}`); } return `M ${points.join(' L ')} Z`; }, []); const animate = () => { // 1. Time & Orbital Calculation frameRef.current = (frameRef.current + 1); const t = frameRef.current; // Mean Anomaly (linear time) const M = (2 * Math.PI * t) / ORBIT_PERIOD; // Eccentric Anomaly const E = solveKepler(M, ECCENTRICITY); // Position relative to Sun (Focus) const pos = getPosition(E, A, B, ECCENTRICITY); // Real-time Physics Data for UI const dist = Math.sqrt(pos.x * pos.x + pos.y * pos.y); // Vis-viva equation approximation for visual velocity: v ~ sqrt(2/r - 1/a) // Or just derive from change in position for simplicity in animation loop // Let's use analytical proportionality: v proportional to sqrt( (1+e*cos(theta)) ) ... // Actually, just using 1/r is a good visual proxy for "speed" text const speed = (10000 / dist).toFixed(0); setPlanetPos(pos); setDistance(Math.round(dist)); setVelocity(Number(speed)); // 2. Sweeping Logic const cycleFrame = t % sweepInterval; // Start sweeping if (cycleFrame === 0) { isSweepingRef.current = true; sectorStartRef.current = pos; sectorTimerRef.current = 0; } // During sweep if (isSweepingRef.current) { sectorTimerRef.current++; // Construct SVG path for the pie slice // M 0 0 L startX startY A ... L endX endY Z? // Since it's an ellipse, arc command 'A' isn't perfect, so we polygonize it // But for small delta, a triangle is okay, but accumulating points is better. // For this animation, simple triangle fan or just start/end is okay if step is small. // Let's just draw a line from Sun to current pos, and fill the area between startPos, currentPos and Sun. // To make it curve correctly, we'd strictly need intermediate points, but // since we update every frame, we can't easily accumulate infinite points in React state without lag. // Visual Hack: Since the sweep is an ellipse sector, // we can approximate the curve with a Quadratic Bezier or just a straight line if the segment is short. // Given the eccentricity, straight lines might look clipped. // Let's try to trace: Start -> Center -> Current. // To look good, we need the curve. // Since we know the math, let's just track Start E and End E. const startE = solveKepler((2 * Math.PI * (t - sectorTimerRef.current)) / ORBIT_PERIOD, ECCENTRICITY); const endE = E; // Generate arc points between startE and endE const arcPoints = []; const steps = 10; for(let i=0; i<=steps; i++) { const tempE = startE + (endE - startE) * (i/steps); const p = getPosition(tempE, A, B, ECCENTRICITY); arcPoints.push(`${p.x},${p.y}`); } const sectorPath = `M 0,0 L ${arcPoints.join(' L ')} Z`; setActiveSector({ points: sectorPath, active: true }); // End sweeping if (sectorTimerRef.current >= sweepDuration) { isSweepingRef.current = false; setPastSectors(prev => { const newItem = { points: sectorPath, id: t }; // Keep only last 6 sectors to avoid clutter const next = [...prev, newItem]; if (next.length > 6) next.shift(); return next; }); setActiveSector(null); } } requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); return (

); };