'use client'; import React, { useState, useEffect, useRef, useCallback } from 'react'; const VIEW_WIDTH = 800; const VIEW_HEIGHT = 600; const WATER_LEVEL = 250; const ELECTRODE_Y_START = 150; const ELECTRODE_HEIGHT = 350; const CATHODE_X = 280; // Left, Negative, Hydrogen const ANODE_X = 520; // Right, Positive, Oxygen // Types type ParticleType = 'H2O' | 'H2' | 'O2' | 'Electron'; interface Particle { id: number; x: number; y: number; type: ParticleType; scale: number; opacity: number; speed: number; wobbleOffset: number; } export const ElectrolysisAnimation = () => { const [isRunning, setIsRunning] = useState(true); const [bubbles, setBubbles] = useState([]); const [electrons, setElectrons] = useState([]); const [waterMolecules, setWaterMolecules] = useState([]); const frameRef = useRef(0); const lastSpawnTime = useRef(0); const idCounter = useRef(0); // Initialize background water molecules useEffect(() => { const molecules: Particle[] = []; for (let i = 0; i < 40; i++) { molecules.push({ id: idCounter.current++, x: Math.random() * (VIEW_WIDTH - 100) + 50, y: Math.random() * (VIEW_HEIGHT - WATER_LEVEL - 50) + WATER_LEVEL + 20, type: 'H2O', scale: 0.8 + Math.random() * 0.4, opacity: 0.3 + Math.random() * 0.3, speed: 0, wobbleOffset: Math.random() * Math.PI * 2, }); } setWaterMolecules(molecules); }, []); const spawnBubble = (type: 'H2' | 'O2', xBase: number) => { const offset = (Math.random() - 0.5) * 40; const newBubble: Particle = { id: idCounter.current++, x: xBase + offset, y: ELECTRODE_Y_START + ELECTRODE_HEIGHT - 20 - Math.random() * 100, // Spawn near bottom of electrode type, scale: 0, // Start small opacity: 0, speed: 1 + Math.random() * 1.5, wobbleOffset: Math.random() * Math.PI * 2, }; return newBubble; }; const updateAnimation = useCallback(() => { if (!isRunning) return; const now = Date.now(); // 1. Spawn Bubbles logic // Hydrogen (Left, Cathode) is produced at 2x volume of Oxygen (Right, Anode) // 2H2O -> 2H2 + O2 if (now - lastSpawnTime.current > 150) { setBubbles(prev => { const newBubbles = [...prev]; // Spawn H2 (Left) - Higher probability if (Math.random() > 0.1) { newBubbles.push(spawnBubble('H2', CATHODE_X)); } // Spawn O2 (Right) - Lower probability if (Math.random() > 0.55) { newBubbles.push(spawnBubble('O2', ANODE_X)); } return newBubbles; }); lastSpawnTime.current = now; } // 2. Update Bubbles setBubbles(prev => prev .map(b => ({ ...b, y: b.y - b.speed, // Float up x: b.x + Math.sin(now / 200 + b.wobbleOffset) * 0.5, // Slight wobble scale: Math.min(1, b.scale + 0.05), // Grow in opacity: Math.min(1, b.opacity + 0.1), // Fade in })) .filter(b => b.y > WATER_LEVEL - 20) // Remove when reaching surface ); // 3. Update Electron flow (visual effect on wires) setElectrons(prev => { let next = prev.map(e => e + 5); if (next.length === 0 || next[next.length - 1] > 50) { next.push(0); } return next.filter(e => e < VIEW_WIDTH); // Simplified logic, visuals handled in render }); frameRef.current = requestAnimationFrame(updateAnimation); }, [isRunning]); useEffect(() => { frameRef.current = requestAnimationFrame(updateAnimation); return () => cancelAnimationFrame(frameRef.current); }, [updateAnimation]); // Toggle handler const toggleSimulation = () => setIsRunning(!isRunning); return (

{/* Controls */}

); };