'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 900; const VIEW_HEIGHT = 600; // Utility for smooth easing const easeInOutCubic = (t: number): number => { return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; }; export const ArchimedesPrincipleView = () => { // Animation State const [time, setTime] = useState(0); const [phase, setPhase] = useState<'idle' | 'lowering' | 'submerged' | 'analyzing'>('idle'); // Physics Constants const OBJECT_WEIGHT = 10.0; // Newtons const MAX_BUOYANCY = 4.0; // Newtons // Animation Refs const requestRef = useRef(); const startTimeRef = useRef(); const phaseTimeRef = useRef(0); // Layout Constants const TANK_X = 300; const TANK_Y = 450; const TANK_WIDTH = 200; const TANK_HEIGHT = 250; const SPOUT_Y = TANK_Y - 200; // Height of the spout const SPOUT_X = TANK_X + TANK_WIDTH / 2; const SMALL_TANK_X = 600; const SMALL_TANK_Y = 500; const SMALL_TANK_WIDTH = 120; const SMALL_TANK_HEIGHT = 100; const OBJECT_SIZE = 80; const START_OBJ_Y = 150; const END_OBJ_Y = 350; // Fully submerged position // Animation Loop const animate = (timestamp: number) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const globalT = timestamp - startTimeRef.current; setTime(globalT); // Phase Management const cycleTime = globalT % 14000; // 14 second loop if (cycleTime < 2000) { setPhase('idle'); phaseTimeRef.current = 0; } else if (cycleTime < 7000) { setPhase('lowering'); phaseTimeRef.current = (cycleTime - 2000) / 5000; // 0 to 1 } else if (cycleTime < 11000) { setPhase('submerged'); phaseTimeRef.current = 1; } else { setPhase('analyzing'); phaseTimeRef.current = 1; } requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, []); // Derived Calculations const progress = phase === 'idle' ? 0 : phaseTimeRef.current; const easedProgress = easeInOutCubic(Math.min(1, Math.max(0, progress))); // Object Position const currentObjY = START_OBJ_Y + (END_OBJ_Y - START_OBJ_Y) * easedProgress; // Submersion Calculation (Approximate based on Y position) // Water surface is around SPOUT_Y. Object height is OBJECT_SIZE. const objBottom = currentObjY + OBJECT_SIZE / 2; const objTop = currentObjY - OBJECT_SIZE / 2; const waterSurfaceY = SPOUT_Y; let submersionRatio = 0; if (objBottom > waterSurfaceY) { const submergedHeight = Math.min(OBJECT_SIZE, objBottom - waterSurfaceY); submersionRatio = submergedHeight / OBJECT_SIZE; } // Force Calculations const currentBuoyancy = MAX_BUOYANCY * submersionRatio; const currentScaleReading = OBJECT_WEIGHT - currentBuoyancy; const displacedVolume = submersionRatio * 100; // Percentage for visual // Water Wave Animation const waveOffset = (time / 1000) * 2 * Math.PI; const generateWavePath = (x: number, y: number, width: number, height: number, amplitude: number = 3) => { let path = `M ${x} ${y}`; for (let i = 0; i <= width; i += 10) { const dy = Math.sin((i / width) * 4 * Math.PI + waveOffset) * amplitude; path += ` L ${x + i} ${y + dy}`; } path += ` L ${x + width} ${y + height} L ${x} ${y + height} Z`; return path; }; // Main Tank Water // The water rises slightly before overflowing const waterRise = submersionRatio * 10; const mainWaterPath = generateWavePath( TANK_X - TANK_WIDTH/2, SPOUT_Y - waterRise + 5, // +5 to keep it just below spout initially TANK_WIDTH, TANK_HEIGHT - (SPOUT_Y - TANK_Y) + waterRise ); // Overflow Stream const isOverflowing = submersionRatio > 0.05 && phase !== 'idle'; const streamPath = isOverflowing ? `M ${SPOUT_X} ${SPOUT_Y} Q ${SPOUT_X + 40} ${SPOUT_Y} ${SPOUT_X + 40} ${SPOUT_Y + 50} L ${SPOUT_X + 40} ${SMALL_TANK_Y} L ${SPOUT_X + 35} ${SMALL_TANK_Y} L ${SPOUT_X + 35} ${SPOUT_Y + 50} Q ${SPOUT_X + 35} ${SPOUT_Y + 5} ${SPOUT_X} ${SPOUT_Y + 5} Z` : ''; // Small Tank Water (Accumulating) const smallTankFillHeight = (SMALL_TANK_HEIGHT - 10) * submersionRatio; const smallWaterPath = generateWavePath( SMALL_TANK_X - SMALL_TANK_WIDTH/2, SMALL_TANK_Y - smallTankFillHeight, SMALL_TANK_WIDTH, smallTankFillHeight, 1 // Smaller wave ); return ( ); };