```javascript 'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; /** * CNC Lathe Animation Component * High-fidelity visualization of CNC turning process */ export default function CNCLatheAnimation() { // Constants const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_Y = 300; // Spindle Axis const CHUCK_X = 150; const PART_LENGTH = 400; const RAW_RADIUS = 80; // Animation State const [time, setTime] = useState(0); const [spindleRotation, setSpindleRotation] = useState(0); const [chips, setChips] = useState([]); // Refs for animation loop const requestRef = useRef(); const startTimeRef = useRef(); // G-Code Display State const [gCodeLines, setGCodeLines] = useState([ "O0001 (DEMO PART)", "G21 G99", "G50 S2000", "G96 S200 M03", "T0101", "G00 X165.0 Z5.0", "M08" ]); // Generate a procedural profile for the cut // Defines the target shape: [z_start, z_end, radius] relative to part start const targetProfile = useMemo(() => [ { start: 0, end: 100, radius: 40 }, // Smallest diameter near chuck { start: 100, end: 120, radius: 40, endRadius: 60 }, // Taper { start: 120, end: 250, radius: 60 }, // Medium step { start: 250, end: 270, radius: 60, endRadius: 80 }, // Taper out { start: 270, end: 400, radius: 80 } // Raw stock diameter ], []); // Animation Loop Logic const animate = (timestamp) => { if (!startTimeRef.current) startTimeRef.current = timestamp; const progress = timestamp - startTimeRef.current; // Cycle duration in ms const cycleDuration = 12000; const t = (progress % cycleDuration) / cycleDuration; // 0 to 1 setTime(t); setSpindleRotation(prev => (prev + 15) % 360); // High speed rotation // Chip particle system update setChips(prevChips => { // Remove old chips const activeChips = prevChips.filter(c => c.life > 0); // Update physics return activeChips.map(c => ({ ...c, x: c.x + c.vx, y: c.y + c.vy, vy: c.vy + 0.5, // Gravity rotation: c.rotation + 10, life: c.life - 1 })); }); requestRef.current = requestAnimationFrame(animate); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, []); // Calculate Tool Position based on time 't' // Sequence: // 0.0 - 0.1: Approach // 0.1 - 0.4: Rough Cut 1 (Outer) // 0.4 - 0.5: Retract & Reposition // 0.5 - 0.8: Finish Cut (Contour) // 0.8 - 0.9: Retract Home // 0.9 - 1.0: Reset/Pause const getToolPosition = (t) => { let x = RAW_RADIUS + 20; let z = PART_LENGTH + 20; let isCutting = false; let operation = "IDLE"; if (t < 0.1) { // Approach const localT = t / 0.1; x = (RAW_RADIUS + 20) - (20 * localT); // Move to X=80 z = (PART_LENGTH + 20) - (20 * localT); // Move to Z=400 operation = "RAPID APPROACH (G00)"; } else if (t < 0.4) { // Roughing Pass (Straight cylinder cut at r=60) const localT = (t - 0.1) / 0.3; x = 60; z = PART_LENGTH - (PART_LENGTH - 100) * localT; isCutting = true; operation = "ROUGHING CYCLE (G71)"; } else if (t < 0.5) { // Retract const localT = (t - 0.4) / 0.1; x = 60 + (40 * localT); z = 100 + (300 * localT); // Move back Z operation = "RETRACT"; } else if (t < 0.8) { // Finish Contour Pass const localT = (t - 0.5) / 0.3; // Interpolate along the profile const currentZ = PART_LENGTH - (PART_LENGTH) * localT; z = currentZ; // Determine X based on profile // Simple lookup if (currentZ < 100) x = 40; else if (currentZ < 120) x = 40 + (currentZ - 100); // Slope else if (currentZ < 250) x = 60; else if (currentZ < 270) x = 60 + (currentZ - 250); // Slope else x = 80; isCutting = true; operation = "FINISHING PASS (G70)"; } else if (t < 0.9) { // Home const localT = (t - 0.8) / 0.1; x = 40 + (80 * localT); z = 0 + (450 * localT); operation = "RETURN HOME (G28)"; } else { x = 120; z = 450; operation = "M05 SPINDLE STOP"; } return { x, z, isCutting, operation }; }; const toolPos = getToolPosition(time); // Spawn chips if cutting useEffect(() => { if (toolPos.isCutting) { // Spawn rate limitation if (Math.random() > 0.5) { setChips(prev => [...prev, { id: Math.random(), x: CHUCK_X + toolPos.z, y: CENTER_Y - toolPos.x, // Upper cutting edge vx: (Math.random() * 10) + 5, // Fly right vy: (Math.random() * -15) - 5, // Fly up rotation: Math.random() * 360, life: 60 }]); } } }, [toolPos.isCutting, toolPos.z, toolPos.x]); // Dynamic Workpiece Shape Calculation // We draw the "removed" material as a mask or simply calculate the current polygon const generateWorkpiecePath = () => { // Top profile points let points = []; points.push([CHUCK_X, CENTER_Y]); // Center Left points.push([CHUCK_X, CENTER_Y - RAW_RADIUS]); // Top Left (Raw) // Resolution of the curve const step = 5; // Because we are simulating the cut over time, // the shape needs to reflect the MINIMUM radius achieved so far at any Z // However, for visual simplicity in this loop, we can base it on the current tool pass logic // or simply draw the "Target" shape revealed by a mask relative to the tool Z. // SIMPLIFIED VISUALIZATION STRATEGY: // Draw the final target profile fully. // Draw the "Raw Stock" on top of it. // Use a clipPath on the Raw Stock that ends at the Tool Z position. // Actually, let's construct the polygon dynamically based on Tool Z position during the cut. // If Tool Z is at 200, everything > 200 is Raw Radius. Everything < 200 depends on the cut depth. // To make it look like "Material Removal", we will calculate the radius at step `i` for (let z = 0; z <= PART_LENGTH; z += step) { let r = RAW_RADIUS; // Define the finished profile at this z let finishedR = 80; if (z < 100) finishedR = 40; else if (z < 120) finishedR = 40 + (z - 100); else if (z < 250) finishedR = 60; else if (z < 270) finishedR = 60 + (z - 250); // Logic: // If we are in the "Finish Pass" (time > 0.5), the radius left of tool is `finishedR`. // If we are in "Rough Pass" (time < 0.4), radius left of tool is 60 (rough depth). // Right of tool is always RAW_RADIUS (or previous pass). if (time < 0.1) { r = RAW_RADIUS; } else if (time < 0.5) { // Roughing if (z > toolPos.z) r = RAW_RADIUS; else r = 60; // Rough depth } else if (time < 0.9) { // Finishing if (z > toolPos.z) { // Behind the tool, it's still at rough depth (60) or raw if not touched // But for this animation, let's assume the part was roughed to 60. r = (z > 270) ? 80 : 60; } else { r = finishedR; } } else { // Reset visually at the very end r = (time > 0.95) ? RAW_RADIUS : finishedR; } points.push([CHUCK_X + z, CENTER_Y - r]); } points.push([CHUCK_X + PART_LENGTH, CENTER_Y]); // Center Right return points.map(p => p.join(',')).join(' '); }; const workpiecePoints = generateWorkpiecePath(); // Create mirror points for the bottom half const workpiecePointsBottom = generateWorkpiecePath().split(' ').map(pair => { const [x, y] = pair.split(',').map(Number); return `${x},${CENTER_Y + (CENTER_Y - y)}`; // Mirror Y }).join(' '); return ( ); } ```