'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const GROUND_Y = 550; const ROD_WIDTH = 300; const ROD_HEIGHT = 40; // Helper: Random range const random = (min: number, max: number) => Math.random() * (max - min) + min; // Type definitions interface Particle { id: number; x: number; y: number; vx: number; vy: number; rotation: number; vr: number; // angular velocity color: string; scale: number; isCaught: boolean; caughtOffsetX: number; caughtOffsetY: number; } interface Spark { id: number; x: number; y: number; life: number; vx: number; vy: number; } export const ElectrostaticFrictionView = () => { // Animation Phases: // 0: Idle // 1: Rubbing (Charging) // 2: Moving Down // 3: Attracting (Physics active) // 4: Resetting const [phase, setPhase] = useState(0); const [chargeLevel, setChargeLevel] = useState(0); const [rodPos, setRodPos] = useState({ x: VIEW_WIDTH / 2, y: 150 }); // Refs for animation loop to avoid react render lag on physics const particlesRef = useRef([]); const sparksRef = useRef([]); const requestRef = useRef(); const rodRef = useRef({ x: VIEW_WIDTH / 2, y: 150 }); const timeRef = useRef(0); // Initialize Particles (Paper strips) useEffect(() => { const colors = ['#e2e8f0', '#94a3b8', '#38bdf8', '#818cf8']; const newParticles: Particle[] = []; for (let i = 0; i < 40; i++) { newParticles.push({ id: i, x: random(VIEW_WIDTH / 2 - 200, VIEW_WIDTH / 2 + 200), y: GROUND_Y + random(-5, 5), // Slightly scattered on ground vx: 0, vy: 0, rotation: random(0, 360), vr: 0, color: colors[Math.floor(random(0, colors.length))], scale: random(0.8, 1.5), isCaught: false, caughtOffsetX: 0, caughtOffsetY: 0, }); } particlesRef.current = newParticles; // Start Sequence startSequence(); return () => cancelAnimationFrame(requestRef.current!); }, []); const startSequence = async () => { // Phase 1: Rubbing setPhase(1); let rubCount = 0; const rubInterval = setInterval(() => { rubCount++; setChargeLevel(prev => Math.min(prev + 5, 100)); // Add sparks during rubbing for(let k=0; k<3; k++) { sparksRef.current.push({ id: Math.random(), x: rodRef.current.x + random(-ROD_WIDTH/2, ROD_WIDTH/2), y: rodRef.current.y + random(-10, 10), life: 1.0, vx: random(-5, 5), vy: random(-5, 5) }); } if (rubCount > 40) { // Approx 2 seconds of rubbing clearInterval(rubInterval); startDescent(); } }, 50); }; const startDescent = () => { setPhase(2); // Smooth transition to lower position handled in loop setTimeout(() => { setPhase(3); // Enable physics attraction setTimeout(() => { setPhase(4); // Lift up setTimeout(() => { // Reset setPhase(0); setChargeLevel(0); particlesRef.current.forEach(p => { p.isCaught = false; p.vy = 0; }); setTimeout(startSequence, 1000); }, 3000); }, 4000); }, 1000); }; // Main Animation Loop const animate = (time: number) => { timeRef.current = time; const dt = 0.016; // Fixed timestep approx // 1. Update Rod Position based on phase const targetY = (phase === 2 || phase === 3) ? 400 : 150; // Rubbing jitter let offsetX = 0; if (phase === 1) { offsetX = Math.sin(time * 0.02) * 80; // Vigorous shaking } // Smooth move rod rodRef.current.x = VIEW_WIDTH / 2 + offsetX; rodRef.current.y += (targetY - rodRef.current.y) * 0.05; setRodPos({ ...rodRef.current }); // Sync state for React render (optional, but good for SVG attr) // 2. Physics for Particles particlesRef.current.forEach(p => { if (p.isCaught) { // Stick to rod p.x = rodRef.current.x + p.caughtOffsetX; p.y = rodRef.current.y + p.caughtOffsetY; p.rotation += 1; // Slight spin while stuck return; } if (phase === 3 && chargeLevel > 20) { // Electrostatic Force F = k * q1*q2 / r^2 const dx = rodRef.current.x - p.x; const dy = rodRef.current.y - p.y; const distSq = dx*dx + dy*dy; const dist = Math.sqrt(distSq); // Attraction threshold (visual tweak) if (dist < 400) { const forceStrength = (chargeLevel * 150) / (distSq + 100); // Avoid infinity // Add some turbulence (Perlin noise replacement) const turbulence = Math.sin(time * 0.005 + p.id) * 2; p.vx += (dx / dist) * forceStrength * 0.5 + turbulence * 0.1; p.vy += (dy / dist) * forceStrength; // Rotation induced by uneven force p.vr += (p.vx) * 0.5; } } // Gravity (always applies unless caught) if (p.y < GROUND_Y) { p.vy += 0.5; // Gravity } else if (p.y >= GROUND_Y && p.vy > 0) { // Hit ground p.y = GROUND_Y; p.vy *= -0.4; // Bounce damping p.vx *= 0.8; // Friction p.vr *= 0.8; } // Air resistance p.vx *= 0.95; p.vy *= 0.95; p.vr *= 0.95; // Update Position p.x += p.vx; p.y += p.vy; p.rotation += p.vr; // Collision with Rod const rodLeft = rodRef.current.x - ROD_WIDTH/2; const rodRight = rodRef.current.x + ROD_WIDTH/2; const rodTop = rodRef.current.y - ROD_HEIGHT/2; const rodBottom = rodRef.current.y + ROD_HEIGHT/2; if ( phase >= 3 && p.x > rodLeft && p.x < rodRight && p.y > rodTop && p.y < rodBottom + 20 // Catch slightly below ) { p.isCaught = true; p.caughtOffsetX = p.x - rodRef.current.x; p.caughtOffsetY = p.y - rodRef.current.y; } }); // 3. Update Sparks sparksRef.current = sparksRef.current.filter(s => s.life > 0); sparksRef.current.forEach(s => { s.x += s.vx; s.y += s.vy; s.life -= 0.05; }); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, [phase, chargeLevel]); // Visual Components const rodColor = chargeLevel > 50 ? '#818cf8' : '#475569'; const glowOpacity = chargeLevel / 100; return ( ); };