'use client'; import React, { useState, useEffect, useMemo, useRef } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BG_COLOR = "#0f172a"; const ACCENT_COLOR = "#38bdf8"; // Sky 400 const TEXT_COLOR = "#94a3b8"; // Slate 400 const SUN_COLOR = "#f59e0b"; // Amber 500 const MOON_COLOR = "#e2e8f0"; // Slate 200 const ORBIT_COLOR = "rgba(148, 163, 184, 0.2)"; const LUNAR_PHASES = [ { day: 1, name: "新月 (朔)", type: "new" }, { day: 4, name: "蛾眉月", type: "waxing-crescent" }, { day: 8, name: "上弦月", type: "first-quarter" }, { day: 12, name: "盈凸月", type: "waxing-gibbous" }, { day: 15, name: "满月 (望)", type: "full" }, { day: 19, name: "亏凸月", type: "waning-gibbous" }, { day: 23, name: "下弦月", type: "last-quarter" }, { day: 27, name: "残月", type: "waning-crescent" }, { day: 30, name: "晦", type: "new" }, ]; const getPhaseName = (day) => { // Approximate mapping if (day <= 1.5 || day >= 29.5) return "新月 (朔)"; if (day > 1.5 && day < 6.5) return "蛾眉月 (渐盈)"; if (day >= 6.5 && day <= 8.5) return "上弦月"; if (day > 8.5 && day < 14) return "盈凸月"; if (day >= 14 && day <= 16) return "满月 (望)"; if (day > 16 && day < 21.5) return "亏凸月"; if (day >= 21.5 && day <= 23.5) return "下弦月"; if (day > 23.5 && day < 29.5) return "残月 (渐亏)"; return "未知"; }; // Helper to generate stars const generateStars = (count) => { return Array.from({ length: count }, () => ({ x: Math.random() * VIEW_WIDTH, y: Math.random() * VIEW_HEIGHT, r: Math.random() * 1.5 + 0.5, opacity: Math.random() * 0.5 + 0.2, })); }; export default function LunarPhaseSimulator() { const [day, setDay] = useState(1); const stars = useMemo(() => generateStars(150), []); const requestRef = useRef(); const startTimeRef = useRef(); // Animation Loop: 0 to 30 days const animate = (time) => { if (!startTimeRef.current) startTimeRef.current = time; const progress = (time - startTimeRef.current) / 10000; // 10 seconds for full cycle const currentDay = (progress * 30) % 30; // Normalize to 1-30 range effectively (1 + 29.99...) setDay(currentDay === 0 ? 30 : currentDay + 1); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // --- Calculations --- // Moon Angle relative to Earth (Sun is fixed at Left side, i.e., angle PI) // Day 1 (New Moon): Moon is between Earth and Sun. // We define 0 radians as Right. Sun rays come from Left (-1, 0). // Day 1: Moon at Left (PI). Day 15: Moon at Right (0). // Formula: angle = PI - (day / 15) * PI // Let's use standard unit circle: // Sun is at x = -infinity. // Day 1: Moon angle = PI (180 deg) -> Left of Earth. // Day 7.5: Moon angle = PI * 1.5 (270 deg) -> Bottom. // Day 15: Moon angle = 0 (360/0 deg) -> Right of Earth. // Day 22.5: Moon angle = PI * 0.5 (90 deg) -> Top. // Normalized day 0-29.53 const lunarCycle = 29.53; const cycleProgress = (day - 1) / lunarCycle; // 0 to 1 const moonOrbitRadius = 160; const earthPos = { x: 350, y: 300 }; // Angle in radians (Counter-clockwise from Sun-Earth line) // Sun is at Left. So start at PI. // Actually, let's rotate counter-clockwise. // Day 1 (New): PI. // Day 8 (1st Q): 3PI/2 (Bottom) ... wait, if we view from top, Earth rotates CCW. Moon orbits CCW. // Let's stick to simple visual: // angle = PI - (cycleProgress * 2 * PI). // This makes it go Clockwise visually if we subtract? No, let's do CCW. // Start PI, go to 3PI/2? No, usually CCW means PI -> 3PI/2 -> 0 -> PI/2? // Let's just map it: Day 1=180deg, Day 8=90deg (Top), Day 15=0deg, Day 23=270deg. // Wait, standard diagram: Sun Left. // New Moon (Day 1): Moon Left (180). // Waxing Crescent -> First Quarter (Day 7-8): Moon Top (90) or Bottom (270)? // Moon orbits Earth CCW. So 180 -> 90? No, 180 is Left. 0 is Right. 90 is Bottom (SVG Y is down). 270 is Top. // So: 180 -> 90? No. 180 -> 270 (Top) -> 0 -> 90 (Bottom)? No. // Let's assume standard math coords (Y up). // 180 (Left) -> 270 (Bottom) -> 0 (Right) -> 90 (Top). // In SVG (Y down): // 180 (Left) -> 90 (Bottom) -> 0 (Right) -> 270 (Top). // This matches CCW motion in SVG space? No. // Let's just force the visual: // Day 1: Left. Day 8: Bottom. Day 15: Right. Day 23: Top. const angleRad = Math.PI - (cycleProgress * 2 * Math.PI); // day 1 (0 prog) => PI (Left) // day 8 (~0.25 prog) => PI - PI/2 = PI/2 (Bottom, +Y in SVG) -> Correct for Waxing? // Actually Waxing appears on the right side of the moon in N.Hemisphere. // Let's trust the geometry. const moonX = earthPos.x + Math.cos(angleRad) * moonOrbitRadius; const moonY = earthPos.y + Math.sin(angleRad) * moonOrbitRadius; // Phase Calculation for Top Right View // Illumination angle relative to viewer (Earth). // Phase angle 0 = New Moon, 180 = Full Moon. // We can derive this from the cycleProgress. // We need to render the shadow. const phaseAngleDeg = (day - 1) * (360 / lunarCycle); const illumination = (1 - Math.cos((phaseAngleDeg * Math.PI) / 180)) / 2 * 100; return ( ); } // Sub-component to render the complex geometry of moon phases const MoonPhaseRender = ({ day, radius }) => { // Cycle is ~29.5 days. // Day 1 = New Moon (All Dark). // Day 7.5 = First Quarter (Right half lit). // Day 15 = Full Moon (All Lit). // Day 22.5 = Last Quarter (Left half lit). // Normalize day to 0-1 cycle const cycle = 29.53; const t = (day - 1) % cycle; const phase = t / cycle; // 0 to 1 // Determine if Waxing (getting brighter) or Waning (getting darker) const isWaxing = phase <= 0.5; // Calculate the width of the lit/dark ellipse // At phase 0 (New): 0 width. // At phase 0.25 (Quarter): 0 width (straight line). // At phase 0.5 (Full): 0 width. // We need a value from -1 to 1 representing the curve of the terminator. // cos(0) = 1 (Full), cos(PI) = -1 (New). // Let's use a simpler SVG path strategy: // Draw a base circle (Background color depends on phase). // If Waxing: // Base: Dark. // Right semicircle: Lit. // Ellipse covering left/right half adjusts the boundary. // Actually, standard math approach: // Let x be the horizontal scaling of the ellipse terminator. // x goes from 1 (New Moon edge) to -1 (Full Moon edge) relative to center? // Let's calculate an angle theta = phase * 2 * PI. // x_scale = cos(theta). // Waxing (0 -> 0.5): // Right side is the leading edge. // Day 1: Dark. // Day 4: Crescent (Right sliver). // Day 7: Half (Right half). // Day 11: Gibbous (Right > half). // Day 15: Full. const theta = (phase * 2 * Math.PI); // We want to simulate the terminator line. // The terminator is an ellipse with semi-minor axis |R * cos(theta)|. // SVG Path construction logic: // M 0 -R (Top) // A R R 0 0 1 0 R (Right Semi-circle arc to Bottom) // A {R*abs(cos)} R 0 0 {0 or 1} 0 -R (Elliptical arc back to Top) // Colors const LIT = "#e2e8f0"; const DARK = "#0f172a"; // Match background for transparency effect or dark grey const SHADOW = "#1e293b"; // Slight contrast // Simplified rendering logic based on phase ranges if (phase < 0.02 || phase > 0.98) { // New Moon return ; } if (Math.abs(phase - 0.5) < 0.02) { // Full Moon return ; } // Path Data // Start at Top (0, -r) // Draw arc to Bottom (0, r) // Draw elliptical arc back to Top const r = radius; const xRadius = r * Math.cos(theta); // Varies from R to -R // Constructing the path is tricky because direction flips. // Let's assume we always draw the LIT part. let path = ""; if (isWaxing) { // Waxing: Right side is illuminated. // Base: Right Semicircle is always lit? // No, for Crescent (0-0.25), only a sliver on right is lit. // For Gibbous (0.25-0.5), right half + bulge to left is lit. // Easier approach: // Draw Full Dark Circle. // Overlay White shape. // Waxing Crescent (0 to 0.25): // Lit area is bounded by Right Semicircle arc AND Ellipse arc bowing to Right. // Wait, cos(theta) is positive here (0 to PI/2 -> 1 to 0). // Waxing Gibbous (0.25 to 0.5): // Lit area is Right Semicircle + Ellipse bowing to Left. // cos(theta) is negative (0 to -1). const sweep = phase < 0.25 ? 0 : 1; // For crescent, we want the "inner" part, so ellipse bows right (sweep 0? no). // Let's build a path that represents the LIT area. // Always start Top (0, -r). // Arc to Bottom (0, r) along the outer circle (Right side). // M 0 -r A r r 0 0 1 0 r // Then return to Top via Ellipse. // The ellipse x-radius is |xRadius|. // If phase < 0.25 (Crescent), ellipse bows RIGHT. // If phase > 0.25 (Gibbous), ellipse bows LEFT. // SVG Arc: A rx ry x-axis-rot large-arc-flag sweep-flag x y const sweepFlag = phase < 0.25 ? 1 : 0; path = `M 0 -${r} A ${r} ${r} 0 0 1 0 ${r} A ${Math.abs(xRadius)} ${r} 0 0 ${sweepFlag} 0 -${r}`; return ( <> ); } else { // Waning (0.5 -> 1.0) // Left side is illuminated. // M 0 -r A r r 0 0 0 0 r (Left Semicircle outer arc) // Waning Gibbous (0.5 to 0.75): Ellipse bows Right. // Waning Crescent (0.75 to 1.0): Ellipse bows Left. const sweepFlag = phase < 0.75 ? 1 : 0; path = `M 0 -${r} A ${r} ${r} 0 0 0 0 ${r} A ${Math.abs(xRadius)} ${r} 0 0 ${sweepFlag} 0 -${r}`; return ( <> ); } };