import React, { useState, useEffect, useRef, useMemo } from 'react'; const WIDTH = 1200; const HEIGHT = 700; const COLORS = { bg: '#ffffff', tube: '#2c3e50', tubeInner: '#1a1a1a', primaryMirror: '#ecf0f1', secondaryMirror: '#bdc3c7', eyepiece: '#34495e', lightRay: '#f1c40f', photon: '#f39c12', text: '#2c3e50', accent: '#3498db', labelBg: 'rgba(255, 255, 255, 0.8)', }; export default function NewtonianTelescope() { const [frame, setFrame] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(Date.now()); // Telescope Geometry const tubeWidth = 700; const tubeHeight = 180; const tubeX = 200; const tubeY = 250; const angle = -15 * (Math.PI / 180); // Slight tilt for aesthetic // Primary Mirror (Concave) const pmX = tubeX + 20; const pmY = tubeY + tubeHeight / 2; const pmCurvature = 40; // Secondary Mirror (Flat, 45 degrees) const smX = tubeX + tubeWidth - 150; const smY = tubeY + tubeHeight / 2; const smSize = 40; // Eyepiece const epX = smX; const epY = tubeY - 40; const animate = () => { setFrame(prev => prev + 1); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // Calculate Light Path // We'll simulate 3 main rays: Top, Middle, Bottom const rays = useMemo(() => { const rayOffsets = [-60, -30, 0, 30, 60]; return rayOffsets.map(offset => { const startX = tubeX + tubeWidth + 200; const startY = tubeY + tubeHeight / 2 + offset; // Ray hits primary mirror // The mirror is at pmX. Concave means focus is ahead. const hitPmX = pmX + 10; const hitPmY = startY; // Primary to Secondary // Newtonian focus point would be outside, but intercepted by SM const hitSmX = smX; const hitSmY = smY + (offset * 0.2); // converge slightly // Secondary to Eyepiece const hitEpX = smX; const hitEpY = tubeY - 20; return { points: [ { x: startX, y: startY }, // 0: Start (Infinity) { x: tubeX + tubeWidth, y: startY }, // 1: Enter Tube { x: hitPmX, y: hitPmY }, // 2: Hit Primary { x: hitSmX, y: hitSmY }, // 3: Hit Secondary { x: hitEpX, y: hitEpY }, // 4: To Eyepiece { x: hitEpX, y: hitEpY - 100 } // 5: To Eye ] }; }); }, []); const progress = (frame % 300) / 300; return (

{/* Decorative Overlay */}

OPTICAL SYSTEM SIMULATION v1.0

); }