'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; const CENTER_Y = VIEW_HEIGHT / 2; const RAY_LENGTH = 350; // Refractive Indices const N1 = 1.00; // Air const N2 = 1.33; // Water export const LightRefractionView = () => { const [incidentAngleDeg, setIncidentAngleDeg] = useState(45); const timeRef = useRef(0); const requestRef = useRef(); // Animation Loop const animate = (time: number) => { // Oscillate angle between 10 and 80 degrees const speed = 0.001; const angle = 45 + 35 * Math.sin(time * speed); setIncidentAngleDeg(angle); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, []); // Calculations const incidentAngleRad = (incidentAngleDeg * Math.PI) / 180; // Snell's Law: n1 * sin(theta1) = n2 * sin(theta2) // theta2 = arcsin( (n1/n2) * sin(theta1) ) const refractedAngleRad = Math.asin((N1 / N2) * Math.sin(incidentAngleRad)); const refractedAngleDeg = (refractedAngleRad * 180) / Math.PI; // Coordinates // Source (Incident Ray Start) - Calculated relative to Normal (Vertical) const sourceX = CENTER_X - RAY_LENGTH * Math.sin(incidentAngleRad); const sourceY = CENTER_Y - RAY_LENGTH * Math.cos(incidentAngleRad); // Refracted Ray End const refractX = CENTER_X + RAY_LENGTH * Math.sin(refractedAngleRad); const refractY = CENTER_Y + RAY_LENGTH * Math.cos(refractedAngleRad); // Reflected Ray End (Law of Reflection: theta_in = theta_out) const reflectX = CENTER_X + RAY_LENGTH * Math.sin(incidentAngleRad); const reflectY = CENTER_Y - RAY_LENGTH * Math.cos(incidentAngleRad); // Helper for SVG Arcs const getArcPath = (cx: number, cy: number, radius: number, startAngle: number, endAngle: number, clockwise: boolean = true) => { // SVG coordinates: 0 deg is 12 o'clock (up) in this context relative to normal? // Let's use standard trig: 0 is 3 o'clock. // Normal vector is -90deg (up) and 90deg (down). // Incident Angle Arc: From Normal (up, -90deg) to Incident Ray. // Converting our logic to standard SVG path angles. const startX = cx + radius * Math.cos(startAngle); const startY = cy + radius * Math.sin(startAngle); const endX = cx + radius * Math.cos(endAngle); const endY = cy + radius * Math.sin(endAngle); const largeArcFlag = Math.abs(endAngle - startAngle) <= Math.PI ? "0" : "1"; const sweepFlag = clockwise ? "1" : "0"; return `M ${startX} ${startY} A ${radius} ${radius} 0 ${largeArcFlag} ${sweepFlag} ${endX} ${endY}`; }; // Arc Angles (in radians for standard circle, 0 is right) // Normal Up is -PI/2. Incident Ray is -PI/2 - theta1. const incidentArcPath = getArcPath( CENTER_X, CENTER_Y, 60, -Math.PI/2 - incidentAngleRad, -Math.PI/2, true ); // Normal Down is PI/2. Refracted Ray is PI/2 + theta2 (but slightly to right). // Actually Refracted ray is in Quadrant 4 (positive X, positive Y). // Angle from standard 0 is: PI/2 - theta2? No. // Vector is (sin(t2), cos(t2)). // atan2(cos(t2), sin(t2)) -> standard angle. const refractedArcPath = getArcPath( CENTER_X, CENTER_Y, 60, Math.PI/2, Math.PI/2 - refractedAngleRad, false ); return ( ); };