'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_Y = VIEW_HEIGHT / 2; // Helper to convert degrees to radians const rad = (deg) => (deg * Math.PI) / 180; // Helper for circular motion const getCirclePt = (cx, cy, r, angleRad) => ({ x: cx + r * Math.cos(angleRad), y: cy + r * Math.sin(angleRad), }); export default function FOCAnimation() { const [angle, setAngle] = useState(0); const [history, setHistory] = useState([]); const requestRef = useRef(); // Animation Loop const animate = (time) => { // Speed of motor rotation setAngle((prev) => (prev + 2) % 360); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // Update waveform history useEffect(() => { setHistory(prev => { const newHistory = [...prev, angle]; if (newHistory.length > 150) newHistory.shift(); return newHistory; }); }, [angle]); // --- MATH & PHYSICS CALCULATIONS --- // Electrical Angle (Rotor Angle) in Radians const theta = rad(angle); // FOC Goal: Stator vector should be 90 degrees ahead of rotor for max torque const statorAngle = theta + Math.PI / 2; // 3-Phase Currents (Inverse Clarke/Park simulation) // Ia = cos(statorAngle) // Ib = cos(statorAngle - 120deg) // Ic = cos(statorAngle + 120deg) const currentU = Math.cos(statorAngle); const currentV = Math.cos(statorAngle - (2 * Math.PI) / 3); const currentW = Math.cos(statorAngle + (2 * Math.PI) / 3); // Coordinate Transforms Visualization // Alpha/Beta (Stationary Frame) const alpha = currentU; const beta = (currentU + 2 * currentV) / Math.sqrt(3); // D/Q (Rotating Frame) - In perfect FOC, Id should be 0, Iq should be constant (1) // We add slight noise/oscillation to make it look "live" and realistic const dComponent = 0; // Ideal FOC const qComponent = 1; // Ideal Torque // --- VISUAL CONSTANTS --- const motorX = 250; const vectorX = 600; const graphX = 850; const motorRadius = 120; const vectorRadius = 100; // Colors const colorU = "#ef4444"; // Red const colorV = "#22c55e"; // Green const colorW = "#3b82f6"; // Blue const colorRotor = "#eab308"; // Yellow const colorStatorVec = "#ffffff"; // White const colorD = "#a855f7"; // Purple (Flux) const colorQ = "#f97316"; // Orange (Torque) return ( ); }