'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1200; const VIEW_HEIGHT = 700; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; // Helper to convert polar to cartesian const toCartesian = (r, angle) => ({ x: CENTER_X + r * Math.cos(angle), y: CENTER_Y + r * Math.sin(angle), }); const PLANETS_CONFIG = [ { id: 'moon', name: 'Moon (Luna)', cnName: '月球', deferentR: 80, epicycleR: 0, deferentSpeed: 2.5, epicycleSpeed: 0, color: '#E2E8F0', size: 6 }, { id: 'mercury', name: 'Mercury', cnName: '水星', deferentR: 130, epicycleR: 25, deferentSpeed: 1.2, epicycleSpeed: 3.5, color: '#94A3B8', size: 5 }, { id: 'venus', name: 'Venus', cnName: '金星', deferentR: 180, epicycleR: 35, deferentSpeed: 1.0, // Linked to Sun in Ptolemaic epicycleSpeed: 2.8, color: '#FCD34D', size: 7 }, { id: 'sun', name: 'Sun (Sol)', cnName: '太阳', deferentR: 240, epicycleR: 0, deferentSpeed: 1.0, epicycleSpeed: 0, color: '#F59E0B', size: 14, glow: true }, { id: 'mars', name: 'Mars', cnName: '火星', deferentR: 320, epicycleR: 50, deferentSpeed: 0.5, epicycleSpeed: 1.8, color: '#EF4444', size: 8, trace: true }, ]; export default function GeocentricModel() { const [time, setTime] = useState(0); const [marsTrace, setMarsTrace] = useState([]); const requestRef = useRef(); // Generate stars once const stars = useMemo(() => { return Array.from({ length: 150 }).map((_, i) => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 1.5, opacity: Math.random() * 0.7 + 0.3, })); }, []); const animate = (t) => { // Slower time increment for smooth animation const speedMultiplier = 0.005; setTime(prev => prev + speedMultiplier); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // Update Mars Trace useEffect(() => { const mars = PLANETS_CONFIG.find(p => p.id === 'mars'); const deferentAngle = time * mars.deferentSpeed; const epicycleAngle = time * mars.epicycleSpeed; const defX = CENTER_X + mars.deferentR * Math.cos(deferentAngle); const defY = CENTER_Y + mars.deferentR * Math.sin(deferentAngle); const x = defX + mars.epicycleR * Math.cos(epicycleAngle); const y = defY + mars.epicycleR * Math.sin(epicycleAngle); setMarsTrace(prev => { const newTrace = [...prev, { x, y }]; if (newTrace.length > 400) newTrace.shift(); // Keep trace length manageable return newTrace; }); }, [time]); return (

); }