import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // V12 Firing Order (Example: 1-12-5-8-3-10-6-7-2-11-4-9) // Defining offsets in degrees for when each cylinder hits Top Dead Center (Combustion) // A 4-stroke cycle is 720 degrees. V12 fires every 60 degrees. const FIRING_ORDER_OFFSETS = { 1: 0, 12: 60, 5: 120, 8: 180, 3: 240, 10: 300, 6: 360, 7: 420, 2: 480, 11: 540, 4: 600, 9: 660 }; // Cylinder Layout Mapping // Bank A (Left/Top): 1, 2, 3, 4, 5, 6 // Bank B (Right/Bottom): 7, 8, 9, 10, 11, 12 const CYLINDER_LAYOUT = [ { id: 1, x: 0, y: 0, bank: 'A' }, { id: 2, x: 1, y: 0, bank: 'A' }, { id: 3, x: 2, y: 0, bank: 'A' }, { id: 4, x: 3, y: 0, bank: 'A' }, { id: 5, x: 4, y: 0, bank: 'A' }, { id: 6, x: 5, y: 0, bank: 'A' }, { id: 7, x: 0, y: 1, bank: 'B' }, { id: 8, x: 1, y: 1, bank: 'B' }, { id: 9, x: 2, y: 1, bank: 'B' }, { id: 10, x: 3, y: 1, bank: 'B' }, { id: 11, x: 4, y: 1, bank: 'B' }, { id: 12, x: 5, y: 1, bank: 'B' }, ]; export const V12EngineAnimation = () => { // Angle goes from 0 to 720 degrees const [angle, setAngle] = useState(0); const rafRef = useRef(); const lastTimeRef = useRef(0); // RPM Simulation const [rpm, setRpm] = useState(800); const targetRpmRef = useRef(3000); // Target RPM to accelerate to // Performance optimization: Static grid generation const gridLines = useMemo(() => { const lines = []; for (let i = 0; i <= VIEW_WIDTH; i += 50) { lines.push(); } for (let i = 0; i <= VIEW_HEIGHT; i += 50) { lines.push(); } return lines; }, []); useEffect(() => { const animate = (time: number) => { if (!lastTimeRef.current) lastTimeRef.current = time; const deltaTime = time - lastTimeRef.current; lastTimeRef.current = time; // Smooth RPM transition setRpm(prev => { const diff = targetRpmRef.current - prev; if (Math.abs(diff) < 10) return targetRpmRef.current; return prev + diff * 0.02; // Ease in }); // Calculate rotation speed based on RPM // RPM = Revolutions Per Minute. // Degrees per second = (RPM / 60) * 360 // Degrees per frame (approx 16ms) = (RPM * 6) * (deltaTime / 1000) setAngle(prevAngle => { // Use functional state update to access current rpm value if needed, // but here we rely on the closure or ref if we wanted strict accuracy. // For visual smoothness, we estimate speed. const speedFactor = (targetRpmRef.current / 60) * 360 * (deltaTime / 1000); return (prevAngle + speedFactor) % 720; }); rafRef.current = requestAnimationFrame(animate); }; rafRef.current = requestAnimationFrame(animate); // RPM Cycle logic (Idle -> Rev -> Idle) const rpmInterval = setInterval(() => { const phases = [800, 2500, 4500, 6000, 1200]; const randomPhase = phases[Math.floor(Math.random() * phases.length)]; targetRpmRef.current = randomPhase; }, 4000); return () => { if (rafRef.current) cancelAnimationFrame(rafRef.current); clearInterval(rpmInterval); }; }, []); // Helper to get piston height (0 to 1) based on crank angle // 0 = Bottom Dead Center, 1 = Top Dead Center const getPistonPos = (crankAngle: number, offset: number) => { const rad = ((crankAngle - offset) * Math.PI) / 180; // Simple harmonic motion approximation for visualization // cos wave: 1 at 0deg (TDC), -1 at 180deg (BDC) // Normalized to 0..1 range return (Math.cos(rad) + 1) / 2; }; // Helper to determine cycle phase text const getCyclePhase = (deg: number) => { // 0-180: Power (Expansion) - starts at 0 // 180-360: Exhaust // 360-540: Intake // 540-720: Compression // Note: Firing happens at 0 (or 720). const normalized = deg % 720; if (normalized < 180) return "做功 (Power)"; if (normalized < 360) return "排气 (Exhaust)"; if (normalized < 540) return "进气 (Intake)"; return "压缩 (Compression)"; }; return ( ); };