'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // --- Shared Config --- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; // --- HDD Config --- const PLATES = 4; const SECTORS_PER_TRACK = 16; const TRACKS = 8; const DATA_BLOCK_SIZE = 15; const BLOCK_GAP = 2; const DISK_RADIUS = 150; const DISK_CENTER_X = 250; const DISK_CENTER_Y = VIEW_HEIGHT / 2; const ARM_BASE_X = DISK_CENTER_X; const ARM_BASE_Y = DISK_CENTER_Y + DISK_RADIUS + 50; const ARM_LENGTH = DISK_RADIUS + 50; // Target Address: Cylinder 3, Head 1, Sector 7 (CHS) const TARGET_CYLINDER = 3; const TARGET_HEAD = 1; const TARGET_SECTOR = 7; // Animation Steps (0-1: Seek, 1-2: Latency/Rotate, 2-3: Read) const SEEK_DURATION = 1.5; // seconds const ROTATE_DURATION = 1.0; // seconds const READ_DURATION = 1.0; // seconds const TOTAL_CYCLE_TIME = SEEK_DURATION + ROTATE_DURATION + READ_DURATION; interface Beam { id: number; startX: number; startY: number; targetX: number; targetY: number; progress: number; color: string; } // --- Helper Functions --- // Convert polar coordinates to SVG Cartesian coordinates const polarToCartesian = (centerX: number, centerY: number, radius: number, angleInDegrees: number) => { const angleInRadians = (angleInDegrees - 90) * Math.PI / 180.0; return { x: centerX + (radius * Math.cos(angleInRadians)), y: centerY + (radius * Math.sin(angleInRadians)) }; }; // Calculate Arm/Head position based on Cylinder (Track Index) const getHeadPosition = (cylinder: number, progress: number) => { const innerRadius = DISK_RADIUS / TRACKS; const targetRadius = DISK_RADIUS - (cylinder * innerRadius) - (innerRadius / 2); // Calculate Arm End Point const armAngle = -15 + 10 * Math.sin(progress * Math.PI * 2 / TOTAL_CYCLE_TIME); // Slight wobble/movement const armEndPoint = polarToCartesian(ARM_BASE_X, ARM_BASE_Y, ARM_LENGTH, armAngle); // Head Position on disk surface (always points to the current track being read) const headX = DISK_CENTER_X + targetRadius * Math.cos(armAngle * Math.PI / 180); const headY = DISK_CENTER_Y + targetRadius * Math.sin(armAngle * Math.PI / 180); return { targetRadius, armAngle, headX, headY, armEndPoint }; }; // Calculate the sector start/end angles const getSectorAngles = (sectorIndex: number) => { const sectorAngle = 360 / SECTORS_PER_TRACK; const startAngle = sectorIndex * sectorAngle; const endAngle = (sectorIndex + 1) * sectorAngle; return { startAngle, endAngle }; } // ========================================== // HDD Addressing Animation // ========================================== export const HDDAddressingAnimation = () => { const [animationTime, setAnimationTime] = useState(0); // Total elapsed time const [beams, setBeams] = useState([]); const [addressFound, setAddressFound] = useState(false); const [dataReadCount, setDataReadCount] = useState(0); const requestRef = useRef(undefined); const beamIdRef = useRef(0); const lastTimeRef = useRef(0); // Scene Layout (Right Side) const infoPanelX = 600; const infoPanelY = 100; const dataPanelX = 600; const dataPanelY = 320; const dataWidth = 300; const dataHeight = 180; const animate = (time: number) => { if (lastTimeRef.current === 0) lastTimeRef.current = time; const deltaTime = (time - lastTimeRef.current) / 1000; // Convert to seconds lastTimeRef.current = time; const newTime = (animationTime + deltaTime) % TOTAL_CYCLE_TIME; setAnimationTime(newTime); // --- Phase Detection --- const isSeeking = newTime < SEEK_DURATION; const isRotating = newTime >= SEEK_DURATION && newTime < (SEEK_DURATION + ROTATE_DURATION); const isReading = newTime >= (SEEK_DURATION + ROTATE_DURATION); const seekProgress = Math.min(newTime / SEEK_DURATION, 1); // 0 to 1 const rotateProgress = Math.min(Math.max(0, newTime - SEEK_DURATION) / ROTATE_DURATION, 1); // 0 to 1 const readProgress = Math.min(Math.max(0, newTime - (SEEK_DURATION + ROTATE_DURATION)) / READ_DURATION, 1); // 0 to 1 // 1. Head Movement (Seek/Cylinder) const currentCylinder = isSeeking ? Math.floor(seekProgress * TARGET_CYLINDER) : TARGET_CYLINDER; const { headX, headY } = getHeadPosition(currentCylinder, newTime); if (isSeeking && seekProgress > 0.99 && !addressFound) { setAddressFound(true); } // 2. Beams Animation (Data Flow) setBeams(prev => { return prev.map(b => ({ ...b, progress: b.progress + deltaTime * 3.0 // Beam speed })).filter(b => b.progress < 1); }); // 3. Data Read Logic if (isReading) { // Calculate the center of the target sector on the target cylinder const targetInnerRadius = DISK_RADIUS / TRACKS; const targetRadius = DISK_RADIUS - (TARGET_CYLINDER * targetInnerRadius) - (targetInnerRadius / 2); const targetSectorAngle = (360 / SECTORS_PER_TRACK); // This calculates the angle of the current data point being read from the spinning disk const spinAngle = (360 * rotateProgress); // Disk spin const effectiveSectorAngle = (TARGET_SECTOR * targetSectorAngle) - spinAngle; const sectorMidpointAngle = effectiveSectorAngle + (targetSectorAngle / 2); // Center of the sector const readPoint = polarToCartesian(DISK_CENTER_X, DISK_CENTER_Y, targetRadius, sectorMidpointAngle); // Check if the read point is near the head/platter (simple distance check) const dist = Math.sqrt(Math.pow(readPoint.x - headX, 2) + Math.pow(readPoint.y - headY, 2)); // Condition: The sector passes under the head during the read phase if (readProgress > 0 && readProgress < 1) { // Spawn Beam: Head -> Data Panel if (Math.random() < 0.2) { // Controlled data stream rate const targetPanelX = dataPanelX + 10 + Math.random() * (dataWidth - 20); const targetPanelY = dataPanelY + 20 + Math.random() * (dataHeight - 40); const newBeam: Beam = { id: beamIdRef.current++, startX: headX, startY: headY, targetX: targetPanelX, targetY: targetPanelY, progress: 0, color: '#00ff66' }; setBeams(prev => [...prev, newBeam]); setDataReadCount(prev => prev + 1); } } // Reset address found state when cycle completes if (newTime < deltaTime && newTime < 0.1) { setAddressFound(false); setDataReadCount(0); } } requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => { if (requestRef.current) cancelAnimationFrame(requestRef.current); }; }, [animationTime]); const { targetRadius, armAngle, headX, headY, armEndPoint } = getHeadPosition(TARGET_CYLINDER, animationTime); const currentCylinder = Math.floor(animationTime < SEEK_DURATION ? (animationTime / SEEK_DURATION) * TARGET_CYLINDER : TARGET_CYLINDER); // Calculate disk rotation for the rotate/read phase const diskRotation = animationTime < SEEK_DURATION ? 0 : animationTime < (SEEK_DURATION + ROTATE_DURATION) ? -(Math.max(0, animationTime - SEEK_DURATION) / ROTATE_DURATION) * 360 : -(Math.max(0, animationTime - SEEK_DURATION) / ROTATE_DURATION) * 360; // Keep final rotation // Status calculation let statusText = ""; let statusColor = ""; if (animationTime < SEEK_DURATION) { statusText = `寻道: 移动到磁道 ${currentCylinder}`; statusColor = "#ffaa00"; } else if (animationTime < (SEEK_DURATION + ROTATE_DURATION)) { statusText = `旋转延迟: 等待扇区 ${TARGET_SECTOR}`; statusColor = "#00ccff"; } else { statusText = `数据读取中... (CHS: ${TARGET_CYLINDER}, ${TARGET_HEAD}, ${TARGET_SECTOR})`; statusColor = "#00ff66"; } // Draw the data platters const renderPlatters = useMemo(() => { const platesSvg = []; const plateGap = 10; for (let i = 0; i < PLATES; i++) { const yOffset = DISK_CENTER_Y + (i - (PLATES - 1) / 2) * plateGap; platesSvg.push( {/* Disk Platter */} {/* Tracks/Cylinders */} {Array.from({ length: TRACKS }).map((_, j) => { const r = DISK_RADIUS - (j * DISK_RADIUS / TRACKS) - (DISK_RADIUS / TRACKS / 2); const isTarget = j === TARGET_CYLINDER; return ( ); })} {/* Target Sector (on target cylinder) - Simplified arc draw */} {(() => { const { startAngle, endAngle } = getSectorAngles(TARGET_SECTOR); const p1 = polarToCartesian(DISK_CENTER_X, DISK_CENTER_Y, targetRadius - (DISK_RADIUS/TRACKS/2), startAngle); const p2 = polarToCartesian(DISK_CENTER_X, DISK_CENTER_Y, targetRadius + (DISK_RADIUS/TRACKS/2), startAngle); const p3 = polarToCartesian(DISK_CENTER_X, DISK_CENTER_Y, targetRadius + (DISK_RADIUS/TRACKS/2), endAngle); const p4 = polarToCartesian(DISK_CENTER_X, DISK_CENTER_Y, targetRadius - (DISK_RADIUS/TRACKS/2), endAngle); const largeArcFlag = 0; // Sector is less than 180 degrees return ( ) })()} {/* Spindle */} ); } return platesSvg; }, [targetRadius, diskRotation]); // Redraw when rotation changes return ( ); };