'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // Orbit Configuration const EARTH_ORBIT_R = 220; const MOON_ORBIT_R = 60; const EARTH_SPEED = 0.005; // Radians per frame const MOON_SPEED = 0.06; // Radians per frame // Helper to generate random stars const generateStars = (count) => { return Array.from({ length: count }, () => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, size: Math.random() * 2 + 0.5, opacity: Math.random() * 0.7 + 0.3, })); }; export default function EarthMoonTrajectory() { // Animation State // We use a ref for the continuous animation loop to avoid dependency cycles // but we need a state to trigger the render. const [tick, setTick] = useState(0); // Refs for physics state to persist between renders without triggering them prematurely const physicsRef = useRef({ angleEarth: 0, angleMoon: 0, earthPos: { x: CENTER_X + EARTH_ORBIT_R, y: CENTER_Y }, moonPos: { x: CENTER_X + EARTH_ORBIT_R + MOON_ORBIT_R, y: CENTER_Y }, earthTrail: [], // Array of points moonTrail: [], // Array of points }); const requestRef = useRef(); // Static Assets const stars = useMemo(() => generateStars(150), []); useEffect(() => { const animate = () => { const state = physicsRef.current; // 1. Update Angles state.angleEarth += EARTH_SPEED; state.angleMoon += MOON_SPEED; // 2. Calculate Earth Position (Orbiting Sun/Center) const ex = CENTER_X + Math.cos(state.angleEarth) * EARTH_ORBIT_R; const ey = CENTER_Y + Math.sin(state.angleEarth) * EARTH_ORBIT_R; state.earthPos = { x: ex, y: ey }; // 3. Calculate Moon Position (Orbiting Earth) const mx = ex + Math.cos(state.angleMoon) * MOON_ORBIT_R; const my = ey + Math.sin(state.angleMoon) * MOON_ORBIT_R; state.moonPos = { x: mx, y: my }; // 4. Update Trails // Keep last 80 points for Earth state.earthTrail.push({ x: ex, y: ey }); if (state.earthTrail.length > 120) state.earthTrail.shift(); // Keep last 40 points for Moon state.moonTrail.push({ x: mx, y: my }); if (state.moonTrail.length > 60) state.moonTrail.shift(); // 5. Trigger Render setTick(prev => prev + 1); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // Helper to convert trail array to SVG polyline points string const getPolylinePoints = (arr) => arr.map(p => `${p.x},${p.y}`).join(' '); const { earthPos, moonPos, earthTrail, moonTrail, angleEarth, angleMoon } = physicsRef.current; // Dynamic Data for HUD const earthDeg = (angleEarth * 180 / Math.PI) % 360; const moonDeg = (angleMoon * 180 / Math.PI) % 360; return (

); }