'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BG_COLOR = "#0f172a"; // ----------------------------------------------------------------------------- // Helpers & Math // ----------------------------------------------------------------------------- const randomRange = (min, max) => Math.random() * (max - min) + min; // Cubic Bezier point calculation const getBezierPoint = (t, p0, p1, p2, p3) => { const cX = 3 * (p1.x - p0.x); const bX = 3 * (p2.x - p1.x) - cX; const aX = p3.x - p0.x - cX - bX; const cY = 3 * (p1.y - p0.y); const bY = 3 * (p2.y - p1.y) - cY; const aY = p3.y - p0.y - cY - bY; const x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p0.x; const y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p0.y; return { x, y }; }; // Simple easing const easeInOutQuad = (t) => t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t; // ----------------------------------------------------------------------------- // Component // ----------------------------------------------------------------------------- export default function SoCAnimation() { // Animation State (Ref for performance, State for triggering render) const [tick, setTick] = useState(0); // Frame trigger // Mutable state stored in ref to avoid react render cycle dependency issues const simulationRef = useRef({ time: 0, particles: [], // { id, type, t, pathKey, speed, color } signals: [], // { id, type, t, p0, p1 } for CPU->GPU arcs ripples: [], // { id, x, y, size, opacity, color } gpuLayers: [], // { id, yOffset, opacity, scale } // Component Activity States (0.0 to 1.0) camActive: 0, ispActive: 0, cpuPulse: 0, gpuActive: 0, ddrLoad: 0, displayLoad: 0, monitorActive: 0, // Timers nextCamSpawn: 0, nextCpuSignal: 100, nextGpuDump: 0, }); // Unique IDs const idCounter = useRef(0); const getID = () => idCounter.current++; // --------------------------------------------------------------------------- // Coordinates & Paths (Memoized) // --------------------------------------------------------------------------- const layout = useMemo(() => ({ cam: { x: 100, y: 300, w: 60, h: 60, z: 20 }, isp: { x: 250, y: 300, w: 80, h: 80, z: 20 }, cpu: { x: 420, y: 120, w: 90, h: 90, z: 30 }, gpu: { x: 650, y: 120, w: 100, h: 100, z: 30 }, ddr: { x: 500, y: 380, w: 140, h: 60, z: 15 }, dctrl: { x: 750, y: 380, w: 80, h: 80, z: 20 }, monitor: { x: 920, y: 300, w: 10, h: 10 }, // Anchor point }), []); const paths = useMemo(() => ({ camToIsp: { p0: { x: 130, y: 300 }, p1: { x: 170, y: 300 }, p2: { x: 190, y: 300 }, p3: { x: 210, y: 300 } }, ispToDdr: { p0: { x: 290, y: 300 }, p1: { x: 350, y: 300 }, p2: { x: 380, y: 380 }, p3: { x: 430, y: 380 } }, cpuToGpu: { // Arc p0: { x: 465, y: 120 }, p1: { x: 520, y: 60 }, p2: { x: 580, y: 60 }, p3: { x: 600, y: 120 } }, gpuToDdr: { p0: { x: 650, y: 170 }, p1: { x: 650, y: 250 }, p2: { x: 570, y: 300 }, p3: { x: 570, y: 350 } }, ddrToDctrl: { p0: { x: 570, y: 380 }, p1: { x: 630, y: 380 }, p2: { x: 680, y: 380 }, p3: { x: 710, y: 380 } }, dctrlToMonitor: { p0: { x: 790, y: 380 }, p1: { x: 850, y: 380 }, p2: { x: 880, y: 350 }, p3: { x: 900, y: 350 } // Connects to stand } }), []); // --------------------------------------------------------------------------- // Main Animation Loop // --------------------------------------------------------------------------- useEffect(() => { let animationFrameId; const update = () => { const state = simulationRef.current; state.time += 1; // --- 1. Spawn Logic --- // Camera: Constant stream of raw data (Cyan) if (state.time > state.nextCamSpawn) { state.particles.push({ id: getID(), type: 'raw_cam', t: 0, path: 'camToIsp', speed: 0.02, color: '#22d3ee', size: 2 }); state.nextCamSpawn = state.time + randomRange(5, 15); state.camActive = Math.min(state.camActive + 0.2, 1); } else { state.camActive = Math.max(state.camActive - 0.01, 0); } // CPU -> GPU Control Signals (Gold Arc) if (state.time > state.nextCpuSignal) { state.signals.push({ id: getID(), t: 0, type: 'command', p0: paths.cpuToGpu.p0, p1: paths.cpuToGpu.p1, p2: paths.cpuToGpu.p2, p3: paths.cpuToGpu.p3, speed: 0.04 }); state.cpuPulse = 1.0; state.nextCpuSignal = state.time + randomRange(180, 240); // Every 3-4 seconds } state.cpuPulse = Math.max(state.cpuPulse - 0.03, 0); // GPU Layers Generation (Visual only) if (state.gpuActive > 0 && state.gpuLayers.length < 3 && Math.random() > 0.9) { state.gpuLayers.push({ id: getID(), yOffset: 0, opacity: 1, scale: 0.5 }); } // --- 2. Update Particles & Signals --- // Update Particles for (let i = state.particles.length - 1; i >= 0; i--) { const p = state.particles[i]; p.t += p.speed; // Arrival Logic if (p.t >= 1) { // Chain logic if (p.type === 'raw_cam') { // Arrived at ISP, convert to processed state.particles.push({ id: getID(), type: 'proc_cam', t: 0, path: 'ispToDdr', speed: 0.015, color: '#06b6d4', size: 3 }); state.ispActive = 1.0; } else if (p.type === 'proc_cam' || p.type === 'proc_gpu') { // Arrived at DDR state.ripples.push({ id: getID(), x: layout.ddr.x, y: layout.ddr.y - 10, size: 0, opacity: 1, color: p.color }); state.ddrLoad = Math.min(state.ddrLoad + 0.1, 1); // Chance to output to Display if (Math.random() > 0.3) { state.particles.push({ id: getID(), type: 'mixed_out', t: 0, path: 'ddrToDctrl', speed: 0.02, color: p.type === 'proc_gpu' ? '#d946ef' : '#22d3ee', size: 3 }); } } else if (p.type === 'mixed_out') { // Arrived at Display Ctrl state.displayLoad = 1.0; // Output final pixel stream state.particles.push({ id: getID(), type: 'final_pixel', t: 0, path: 'dctrlToMonitor', speed: 0.04, color: '#ffffff', size: 2 }); } else if (p.type === 'final_pixel') { state.monitorActive = Math.min(state.monitorActive + 0.05, 1); } state.particles.splice(i, 1); } } // Update Signals (CPU -> GPU) for (let i = state.signals.length - 1; i >= 0; i--) { const s = state.signals[i]; s.t += s.speed; if (s.t >= 1) { // Trigger GPU burst state.gpuActive = 1.0; // Spawn GPU Data dump for (let k = 0; k < 8; k++) { state.particles.push({ id: getID(), type: 'proc_gpu', t: - (k * 0.05), path: 'gpuToDdr', speed: 0.02, color: '#d946ef', size: 4 // Purple }); } state.signals.splice(i, 1); } } // Update Ripples for (let i = state.ripples.length - 1; i >= 0; i--) { const r = state.ripples[i]; r.size += 1.5; r.opacity -= 0.03; if (r.opacity <= 0) state.ripples.splice(i, 1); } // Update GPU Layers (UI float effect) for (let i = state.gpuLayers.length - 1; i >= 0; i--) { const l = state.gpuLayers[i]; l.yOffset -= 0.5; l.opacity -= 0.02; l.scale += 0.01; if (l.opacity <= 0) state.gpuLayers.splice(i, 1); } // Decay activities state.ispActive = Math.max(state.ispActive - 0.02, 0); state.gpuActive = Math.max(state.gpuActive - 0.01, 0); state.ddrLoad = Math.max(state.ddrLoad - 0.01, 0); state.displayLoad = Math.max(state.displayLoad - 0.05, 0); state.monitorActive = Math.max(state.monitorActive - 0.005, 0.2); // Keep monitor slightly lit setTick(t => t + 1); // Trigger React render animationFrameId = requestAnimationFrame(update); }; animationFrameId = requestAnimationFrame(update); return () => cancelAnimationFrame(animationFrameId); }, [layout, paths]); // --------------------------------------------------------------------------- // Render Helpers // --------------------------------------------------------------------------- // Isometric Block Generator const IsoBlock = ({ x, y, w, h, z, color, stroke, label, active, pulse }) => { const topPoints = `${x-w/2},${y-h/2-z} ${x+w/2},${y-h/2-z} ${x+w/2},${y+h/2-z} ${x-w/2},${y+h/2-z}`; const rightPoints = `${x+w/2},${y-h/2-z} ${x+w/2},${y+h/2-z} ${x+w/2},${y+h/2} ${x+w/2},${y-h/2}`; const leftPoints = `${x-w/2},${y-h/2-z} ${x-w/2},${y+h/2-z} ${x-w/2},${y+h/2} ${x-w/2},${y-h/2}`; // Dynamic glow based on activity const glowOpacity = 0.1 + (active * 0.6); const strokeWidth = 1 + (active * 2); return ( {/* Shadow */} {/* Body Sides */} {/* Top Surface (Glass) */} 0.5 ? "url(#glow)" : ""} /> {/* Inner Content/Label */} {label} {/* Pulse Overlay */} {pulse > 0 && ( )} ); }; const { particles, signals, ripples, gpuLayers, camActive, ispActive, cpuPulse, gpuActive, ddrLoad, displayLoad, monitorActive } = simulationRef.current; return (

); }