'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; export const PolarimeterAnimation = () => { // Animation states const [time, setTime] = useState(0); const [analyzerAngle, setAnalyzerAngle] = useState(0); const [phase, setPhase] = useState<'scanning' | 'locked' | 'reset'>('scanning'); // Constants const OPTICAL_ROTATION = 45; // The sample rotates light by 45 degrees const WAVE_SPEED = 0.1; const FREQUENCY = 0.05; // Refs for animation loop const requestRef = useRef(); const startTimeRef = useRef(); // Animation Loop const animate = (timestamp: number) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const progress = timestamp - startTimeRef.current; // Update wave time setTime(prev => prev + 0.15); // Phase logic // Cycle: 0-4s Scanning, 4-7s Locked/Measuring, 7-8s Reset const cycleDuration = 8000; const cycleTime = progress % cycleDuration; if (cycleTime < 4000) { setPhase('scanning'); // Smoothly interpolate analyzer angle from -10 to OPTICAL_ROTATION const t = cycleTime / 4000; // Easing function for smoother movement const ease = t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; setAnalyzerAngle(-20 + (OPTICAL_ROTATION + 20) * ease); } else if (cycleTime < 7000) { setPhase('locked'); setAnalyzerAngle(OPTICAL_ROTATION); } else { setPhase('reset'); // Quick return to start const t = (cycleTime - 7000) / 1000; setAnalyzerAngle(OPTICAL_ROTATION + ( -20 - OPTICAL_ROTATION) * t); } requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // --- Helper Components --- // Draws a sine wave representing light const LightWave = ({ startX, endX, angle, amplitude = 20, opacity = 1, color = "#22d3ee" }: { startX: number, endX: number, angle: number, amplitude?: number, opacity?: number, color?: string }) => { const points = []; // Convert angle to radians for projection const rad = (angle * Math.PI) / 180; // Projected amplitude on 2D screen Y-axis const projAmp = amplitude * Math.cos(rad); // Depth simulation (optional, not strictly 3D but helps visualization) for (let x = startX; x <= endX; x += 5) { const y = Math.sin((x * FREQUENCY) - time) * projAmp; points.push(`${x},${300 + y}`); } return ( ); }; // Cross-section "Clock" View const PolarizationDial = ({ x, y, angle, label, subLabel, color = "#22d3ee", active = true }: any) => { const r = 30; const rad = (angle * Math.PI) / 180; const x2 = x + r * Math.sin(rad); // Using sin/cos swapped for vertical 0-degree reference const y2 = y - r * Math.cos(rad); const x3 = x - r * Math.sin(rad); const y3 = y + r * Math.cos(rad); return ( {/* Grid */} {/* Vector */} {/* Angle Arc */} {angle !== 0 && ( )} {label} {subLabel} ); }; // Calculate transmitted intensity based on Malus's Law logic (simplified) // Intensity ~ cos^2(theta) where theta is difference between light angle and analyzer angle const angleDiff = Math.abs(analyzerAngle - OPTICAL_ROTATION); const transmissionFactor = Math.max(0, Math.cos((angleDiff * Math.PI) / 180)); // In a polarimeter, we often look for extinction (darkness) or equal brightness, // but for visualization, let's assume we rotate to MAX brightness to find the angle. // Or more commonly, the analyzer is rotated to match the rotation angle. // Let's visualize: Analyzer Angle matching Rotation Angle = Max Transmission. const isAligned = Math.abs(analyzerAngle - OPTICAL_ROTATION) < 1; return ( ); }; export default PolarimeterAnimation;