'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ----------------------------------------------------------------------------- // Constants & Configuration // ----------------------------------------------------------------------------- const WIDTH = 1000; const HEIGHT = 600; const BACKGROUND_COLOR = '#0f172a'; const PRIMARY_COLOR = '#06b6d4'; // Cyan const SECONDARY_COLOR = '#8b5cf6'; // Violet const ACCENT_COLOR = '#f43f5e'; // Rose const TEXT_COLOR = '#e2e8f0'; // Slate 200 // Particle Types const TYPE_NEUTRAL = 0; const TYPE_ION_A = 1; // Light mass const TYPE_ION_B = 2; // Heavy mass // Simulation Constants const TRAP_CENTER_X = WIDTH / 2; const TRAP_CENTER_Y = HEIGHT / 2; const TRAP_RADIUS = 120; export default function IonTrapAnimation() { // --------------------------------------------------------------------------- // State & Refs // --------------------------------------------------------------------------- // We use refs for high-frequency animation state to avoid React overhead logic // inside the loop, but we need state to trigger the render. const [tick, setTick] = useState(0); // Simulation State stored in Refs const particlesRef = useRef([]); const spectrumRef = useRef(new Array(40).fill(0)); // Spectrum data buckets const frameRef = useRef(0); // UI Data State (updates less frequently) const [metrics, setMetrics] = useState({ pressure: 1.2e-5, rfVoltage: 2400, temp: 298 }); // --------------------------------------------------------------------------- // Animation Loop // --------------------------------------------------------------------------- useEffect(() => { let animationFrameId; const spawnParticle = () => { // Chance to spawn a new molecule at the intake if (Math.random() < 0.08) { particlesRef.current.push({ id: Math.random().toString(36).substr(2, 9), x: 50, y: HEIGHT / 2 + (Math.random() - 0.5) * 40, vx: 2 + Math.random() * 1.5, vy: (Math.random() - 0.5) * 0.5, type: TYPE_NEUTRAL, mass: Math.random() > 0.5 ? 10 : 20, // Simplified mass state: 'entering', // entering, ionizing, trapping, ejecting life: 0, trapTime: 0 }); } }; const updateParticles = () => { const time = Date.now() / 1000; const particles = particlesRef.current; const spectrum = spectrumRef.current; for (let i = particles.length - 1; i >= 0; i--) { let p = particles[i]; p.life++; p.x += p.vx; p.y += p.vy; // --- Phase 1: Ionization Zone (x: 200-300) --- if (p.state === 'entering' && p.x > 220) { if (Math.random() < 0.1) { // Ionization Event p.state = 'ionizing'; p.type = p.mass === 10 ? TYPE_ION_A : TYPE_ION_B; // Flash effect can be handled in render } } // --- Phase 2: Trapping Zone (x: 300-700) --- if (p.x > 300 && p.x < 700) { // If ionized, get caught in the trap if (p.type !== TYPE_NEUTRAL) { p.state = 'trapping'; p.trapTime++; // Physics: Move towards center but oscillate const dx = TRAP_CENTER_X - p.x; const dy = TRAP_CENTER_Y - p.y; // Spring force to center p.vx += dx * 0.002; p.vy += dy * 0.002; // Damping p.vx *= 0.96; p.vy *= 0.96; // RF Field Oscillation (Mathieu equation simplified visual) // Frequency differs slightly by mass to separate them visually const freq = p.mass === 10 ? 0.2 : 0.1; p.vy += Math.sin(frameRef.current * freq) * 0.8; p.vx += Math.cos(frameRef.current * freq) * 0.2; // Swirling // Ejection Condition: After some time, eject based on mass // Lighter ions eject earlier/differently const ejectThreshold = p.mass === 10 ? 120 : 240; if (p.trapTime > ejectThreshold) { p.state = 'ejecting'; p.vx = 8; // Shoot out p.vy = (Math.random() - 0.5) * 2; } } } // --- Phase 3: Detection/Cleanup --- if (p.x > WIDTH + 50 || p.y < -50 || p.y > HEIGHT + 50) { // Update spectrum if it was an ion if (p.state === 'ejecting') { const bucketIdx = p.mass === 10 ? 10 : 28; // Discrete peaks // Add some noise/spread const spread = Math.floor((Math.random() - 0.5) * 4); const idx = Math.max(0, Math.min(39, bucketIdx + spread)); spectrum[idx] = Math.min(spectrum[idx] + 15, 100); } particles.splice(i, 1); } } // Decay spectrum for(let j=0; j { frameRef.current++; spawnParticle(); updateParticles(); // Update Metrics periodically for UI effect if (frameRef.current % 10 === 0) { setMetrics(prev => ({ pressure: 1.2e-5 + Math.random() * 0.1e-5, rfVoltage: 2400 + Math.random() * 10, temp: 298 + (Math.random() - 0.5) })); } setTick(prev => prev + 1); // Trigger render animationFrameId = requestAnimationFrame(animate); }; animate(); return () => cancelAnimationFrame(animationFrameId); }, []); // --------------------------------------------------------------------------- // Render Helpers // --------------------------------------------------------------------------- // Draw the RF field lines (Quadrupole representation) const renderFieldLines = () => { const time = frameRef.current * 0.1; const lines = []; // Hyperbolic-ish shapes for (let i = 0; i < 5; i++) { const offset = i * 15; const opacity = 0.1 + (Math.sin(time + i) + 1) * 0.1; lines.push( ); lines.push( ); } return lines; }; return ( ); }