'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const MOON_RADIUS = 60; const CYCLE_DURATION = 29.53; // Synodic month in days // Helper to generate random stars const generateStars = (count) => { return Array.from({ length: count }, (_, i) => ({ id: i, x: Math.random() * VIEW_WIDTH, y: Math.random() * (VIEW_HEIGHT * 0.7), // Keep stars in the sky r: Math.random() * 1.5 + 0.5, opacity: Math.random(), blinkSpeed: Math.random() * 2 + 1, })); }; // Helper to determine Chinese phase name const getPhaseName = (day) => { const d = day % CYCLE_DURATION; if (d < 1 || d > 28.5) return '新月 (New Moon)'; if (d < 6.5) return '娥眉月 (Waxing Crescent)'; if (d < 8.5) return '上弦月 (First Quarter)'; if (d < 13.5) return '盈凸月 (Waxing Gibbous)'; if (d < 16) return '满月 (Full Moon)'; if (d < 21) return '亏凸月 (Waning Gibbous)'; if (d < 23) return '下弦月 (Last Quarter)'; return '残月 (Waning Crescent)'; }; export default function MoonPhaseAnimation() { const [day, setDay] = useState(0); const stars = useMemo(() => generateStars(150), []); const requestRef = useRef(); const startTimeRef = useRef(); // Animation Loop const animate = (time) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; // Speed: 1 real second = 2 moon days const speedFactor = 2; const currentDay = (elapsed / 1000) * speedFactor; setDay(currentDay % CYCLE_DURATION); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // Calculate Moon Position (Arc across the sky) // Let's make the moon move in a gentle arc based on the day of the cycle const progress = day / CYCLE_DURATION; // X: Moves from left (20%) to right (80%) then loops? // To simulate a "daily" change timelapse, let's keep it somewhat centered but swaying // or create a layout where the position represents the age of the moon. // Let's go with a sine wave path for visual interest. const moonX = VIEW_WIDTH / 2 + Math.sin(progress * Math.PI * 2) * 200; const moonY = 200 + Math.cos(progress * Math.PI * 2) * 50; // Calculate Moon Phase Path // This generates the "d" attribute for the SVG path of the LIT portion of the moon const getMoonPath = (r) => { // Normalize day to 0-1 range, shifted so 0 is New Moon, 0.5 is Full // Standard: 0=New, 0.25=FirstQ, 0.5=Full, 0.75=LastQ const p = day / CYCLE_DURATION; // We draw the lit part. // New Moon (0): Lit is 0. // Full Moon (0.5): Lit is Circle. // Technique: Two arcs. // Outer arc is always a semi-circle (the limb). // Inner arc is a semi-ellipse (the terminator). const isWaxing = p <= 0.5; // sweep-flag determines which side of the moon is the "limb" (outer edge) // Waxing: Right side is limb. Waning: Left side is limb. const sweep = isWaxing ? 1 : 0; // The terminator moves from right to left across the face? // Northern hemisphere: Light grows from Right to Left. // 0 -> 0.5: Right side lit. // Calculate the "bulge" of the terminator // cos ranges from 1 (New) to -1 (Full) to 1 (New) const bulge = Math.cos(p * 2 * Math.PI) * r; // Construct Path // Start at top (0, -r) // Arc to bottom (0, r) via the outer limb // Arc back to top via the terminator // For Waxing (Light on Right): // Move Top. Arc to Bottom (Right side). Ellipse Arc back to Top. // Adjust logic for simple SVG path rendering: // We will draw the LIGHT part. if (isWaxing) { // Light is on the Right. // 1. Move Top // 2. Arc (Right Limb) to Bottom // 3. Arc (Terminator) to Top. Radius X of terminator varies. return `M 0 ${-r} A ${r} ${r} 0 0 1 0 ${r} A ${Math.abs(bulge)} ${r} 0 0 ${bulge > 0 ? 1 : 0} 0 ${-r}`; } else { // Light is on the Left. // 1. Move Top // 2. Arc (Left Limb) to Bottom // 3. Arc (Terminator) to Top. return `M 0 ${-r} A ${r} ${r} 0 0 0 0 ${r} A ${Math.abs(bulge)} ${r} 0 0 ${bulge > 0 ? 1 : 0} 0 ${-r}`; } }; const phaseName = getPhaseName(day); const intDay = Math.floor(day) + 1; return ( ); }