'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BEAKER_WIDTH = 300; const BEAKER_HEIGHT = 400; const BEAKER_X = (VIEW_WIDTH - BEAKER_WIDTH) / 2; const BEAKER_Y = 150; const BLOCK_SIZE = 120; const WATER_BASE_HEIGHT = 200; // Initial water height from bottom of beaker // Helper 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 BuoyancyLawView = () => { // Animation State const [time, setTime] = useState(0); const requestRef = useRef(); const startTimeRef = useRef(); // Animation Cycle Constants const CYCLE_DURATION = 14000; // 14 seconds per loop // Physics / Simulation State derived from time const [simState, setSimState] = useState({ blockY: 0, // Position of block waterLevel: 0, // Current water level displacedVol: 0, // 0 to 1 ratio phase: 'intro', // intro, submerging, hold, reset buoyancy: 0, // Force magnitude gravity: 100, // Constant gravity magnitude }); // Particle system for bubbles const [bubbles, setBubbles] = useState<{x: number, y: number, s: number, spd: number, id: number}[]>([]); useEffect(() => { const animate = (timestamp: number) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const elapsed = timestamp - startTimeRef.current; const progress = (elapsed % CYCLE_DURATION) / CYCLE_DURATION; setTime(progress); // --- Simulation Logic --- // 1. Phases // 0.0 - 0.15: Intro (Block in air) // 0.15 - 0.45: Submerging (Block lowers) // 0.45 - 0.85: Hold/Explain (Formulas) // 0.85 - 1.00: Reset (Block rises quickly) let currentBlockY = 0; // Relative to beaker bottom (0 is bottom) const startBlockY = BEAKER_HEIGHT + 100; // Above beaker const endBlockY = 100; // Suspended in water let phase = 'intro'; let displacedRatio = 0; if (progress < 0.15) { phase = 'intro'; currentBlockY = startBlockY; } else if (progress < 0.45) { phase = 'submerging'; const t = (progress - 0.15) / 0.30; const easedT = easeInOutCubic(t); currentBlockY = startBlockY - (startBlockY - endBlockY) * easedT; } else if (progress < 0.85) { phase = 'hold'; currentBlockY = endBlockY; } else { phase = 'reset'; const t = (progress - 0.85) / 0.15; const easedT = easeInOutCubic(t); currentBlockY = endBlockY + (startBlockY - endBlockY) * easedT; } // 2. Water Physics // Block Bottom Position (in global coords) = BEAKER_Y + BEAKER_HEIGHT - currentBlockY // Water Surface Y (global) = BEAKER_Y + BEAKER_HEIGHT - currentWaterLevel const blockBottomRel = currentBlockY; // Height from bottom const waterHeight = WATER_BASE_HEIGHT; // Calculate overlap // Block spans from [currentBlockY, currentBlockY + BLOCK_SIZE] // Water spans from [0, waterLevel] // Simplified Displacement Logic // If block bottom < water level, we have displacement let submergedHeight = 0; // Base water level logic (iterative approximation for rise) // V_water = W_beaker * H_water // V_total = V_water + V_submerged_block // H_new * W_beaker = W_beaker * H_base + W_block * H_submerged // H_new = H_base + (W_block/W_beaker) * H_submerged const ratioArea = BLOCK_SIZE / BEAKER_WIDTH; // Width ratio // Initial guess of water level let currentWaterLevel = WATER_BASE_HEIGHT; // Calculate intersection based on currentWaterLevel if (currentBlockY < currentWaterLevel + BLOCK_SIZE) { // Block is touching or inside water const blockBottom = currentBlockY; // Approximate submerged height relative to the moving water surface // Let's solve algebraically: // L = BaseL + Ratio * (min(L, BlockTop) - max(0, BlockBottom)) // For simplicity in animation, we assume the block enters from top. const topOfBlock = currentBlockY + BLOCK_SIZE; // Visual approximation: // If block is fully submerged (which it isn't in this anim, it floats/suspends), // max displacement is volume of block. // Let's use an iterative approach or simple clamp for animation smoothness // Effective water level rises as block goes down. // Depth of block bottom relative to BASE water level const depthIntoBase = Math.max(0, WATER_BASE_HEIGHT - currentBlockY); // The water rises by (depthIntoBase * widthRatio) / (1 - widthRatio) if we want perfect physics, // but let's just add displacement proportional to depth. const displacement = depthIntoBase * (BLOCK_SIZE / BEAKER_WIDTH); currentWaterLevel = WATER_BASE_HEIGHT + displacement; // Recalculate actual submerged height for buoyancy force const waterTop = currentWaterLevel; const blockBottomY = currentBlockY; const blockTopY = currentBlockY + BLOCK_SIZE; submergedHeight = Math.max(0, Math.min(waterTop, blockTopY) - Math.max(0, blockBottomY)); } displacedRatio = Math.min(submergedHeight / BLOCK_SIZE, 1); setSimState({ blockY: currentBlockY, waterLevel: currentWaterLevel, displacedVol: displacedRatio, phase, buoyancy: displacedRatio * 100, // Max buoyancy matches gravity for equilibrium visual gravity: 100 }); // 3. Bubbles System if (phase === 'submerging' && displacedRatio > 0) { if (Math.random() > 0.8) { const newBubble = { id: Math.random(), x: BEAKER_X + (BEAKER_WIDTH - BLOCK_SIZE)/2 + Math.random() * BLOCK_SIZE, y: BEAKER_Y + BEAKER_HEIGHT - currentBlockY, // Spawn at bottom of block s: Math.random() * 4 + 2, spd: Math.random() * 2 + 1 }; setBubbles(prev => [...prev, newBubble]); } } // Update bubbles setBubbles(prev => prev .map(b => ({ ...b, y: b.y - b.spd })) .filter(b => b.y > BEAKER_Y + BEAKER_HEIGHT - currentWaterLevel) // Remove if above water ); requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, []); // --- Render Helpers --- // Generate Sine Wave Path for Water const waterPath = useMemo(() => { const points = []; const segments = 20; const amplitude = 5; const frequency = 0.1; const phaseShift = time * 50; // Animated wave const waterY = BEAKER_Y + BEAKER_HEIGHT - simState.waterLevel; for (let i = 0; i <= segments; i++) { const x = BEAKER_X + (i / segments) * BEAKER_WIDTH; const y = waterY + Math.sin(i * frequency * 10 + phaseShift) * amplitude; points.push(`${x},${y}`); } return `M ${BEAKER_X},${BEAKER_Y + BEAKER_HEIGHT} L ${points.join(' L ')} L ${BEAKER_X + BEAKER_WIDTH},${BEAKER_Y + BEAKER_HEIGHT} Z`; }, [simState.waterLevel, time]); // Dashed line for original water level const originalWaterY = BEAKER_Y + BEAKER_HEIGHT - WATER_BASE_HEIGHT; // Block Position const blockRenderY = BEAKER_Y + BEAKER_HEIGHT - simState.blockY - BLOCK_SIZE; const blockRenderX = BEAKER_X + (BEAKER_WIDTH - BLOCK_SIZE) / 2; // Colors const COLOR_BG = "#0f172a"; const COLOR_WATER = "rgba(6, 182, 212, 0.4)"; // Cyan-500 with opacity const COLOR_WATER_STROKE = "#22d3ee"; const COLOR_BLOCK = "#94a3b8"; // Slate-400 const COLOR_ACCENT = "#f59e0b"; // Amber-500 for Gravity const COLOR_ACCENT_2 = "#10b981"; // Emerald-500 for Buoyancy const COLOR_TEXT = "#e2e8f0"; return ( ); };