'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const COLS = 16; const ROWS = 10; const BASE_SPACING = 40; const START_X = (VIEW_WIDTH - (COLS - 1) * BASE_SPACING) / 2; const START_Y = (VIEW_HEIGHT - (ROWS - 1) * BASE_SPACING) / 2; // Animation Phases const PHASES = [ { id: 'INIT', text: '初始状态：晶格排列均匀', duration: 2000 }, { id: 'HEATING', text: '整体加热：热膨胀导致分子间距增大', duration: 3000 }, { id: 'SURFACE_COOLING', text: '表面急冷：外部收缩，内部依然炽热（塑性状态）', duration: 4000 }, { id: 'CORE_COOLING', text: '核心冷却：内部试图收缩，但受外部刚性限制', duration: 4000 }, { id: 'RESULT', text: '最终状态：形成残余应力（表面受压，心部受拉）', duration: 5000 }, ]; export default function ResidualStressSim() { const [phaseIndex, setPhaseIndex] = useState(0); const [progress, setProgress] = useState(0); // 0 to 1 within a phase const [atoms, setAtoms] = useState([]); const requestRef = useRef(); const startTimeRef = useRef(); // Helper to interpolate colors const interpolateColor = (color1, color2, factor) => { const result = color1.slice(1).match(/.{2}/g).map((hex, i) => { return Math.round(parseInt(hex, 16) + (parseInt(color2.slice(1).match(/.{2}/g)[i], 16) - parseInt(hex, 16)) * factor).toString(16).padStart(2, '0'); }); return `#${result.join('')}`; }; // Generate Grid Data useEffect(() => { const initialAtoms = []; for (let r = 0; r < ROWS; r++) { for (let c = 0; c < COLS; c++) { initialAtoms.push({ row: r, col: c, x: START_X + c * BASE_SPACING, y: START_Y + r * BASE_SPACING, baseX: START_X + c * BASE_SPACING, baseY: START_Y + r * BASE_SPACING, temp: 0, // 0 = Cold, 1 = Hot stress: 0, // -1 (Compression) to 1 (Tension) }); } } setAtoms(initialAtoms); }, []); // Animation Loop const animate = (time) => { if (!startTimeRef.current) startTimeRef.current = time; const elapsed = time - startTimeRef.current; const currentPhase = PHASES[phaseIndex]; // Calculate progress (0 to 1) with ease-in-out let p = Math.min(elapsed / currentPhase.duration, 1); // Smooth easing const easedP = p < 0.5 ? 2 * p * p : -1 + (4 - 2 * p) * p; setProgress(easedP); // Update Atoms based on Physics/Phase Logic setAtoms(prevAtoms => { return prevAtoms.map(atom => { let targetTemp = 0; let expansionFactor = 0; let stressOffset = 0; let vibration = 0; const isSurface = atom.row < 2 || atom.row >= ROWS - 2; const isCore = atom.row >= 3 && atom.row <= ROWS - 4; // Phase Logic switch (currentPhase.id) { case 'INIT': targetTemp = 0; expansionFactor = 0; stressOffset = 0; break; case 'HEATING': targetTemp = easedP; // Heat up to 1 expansionFactor = easedP * 12; // Expand grid break; case 'SURFACE_COOLING': // Surface cools to 0, Core stays at 1 targetTemp = isSurface ? (1 - easedP) : 1; // Expansion: Surface tries to shrink back, Core stays expanded // But Surface is constrained slightly by Core? // For visual clarity: Surface shrinks, Core stays wide -> Barrel shape if (isSurface) expansionFactor = (1 - easedP) * 12; else expansionFactor = 12; break; case 'CORE_COOLING': // Core cools to 0 targetTemp = isCore ? (1 - easedP) : 0; // CRITICAL PHYSICS VISUALIZATION: // Core wants to go to 0 expansion. // But Surface is already rigid (locked at 0 expansion). // Result: Core pulls Surface IN (Compression), Surface pulls Core OUT (Tension). // Final State approximation: // Surface ends up at -2 (Compressed) // Core ends up at +2 (Tension) // Transition from "Barrel" shape to "Hourglass" or "Distorted Rectangle" if (isSurface) { // Surface was at 0, gets pulled in to -2 expansionFactor = -2 * easedP; } else { // Core was at 12, wants 0, gets stuck at +2 expansionFactor = 12 - (10 * easedP); } break; case 'RESULT': targetTemp = 0; if (isSurface) expansionFactor = -2; else if (isCore) expansionFactor = 2; else expansionFactor = 0; // Transition layers break; } // Apply Vibration based on Temp if (targetTemp > 0.1) { vibration = (Math.random() - 0.5) * targetTemp * 3; } // Calculate new positions // We expand from the center of the grid const centerCol = (COLS - 1) / 2; const centerRow = (ROWS - 1) / 2; const distFromCenterX = atom.col - centerCol; const distFromCenterY = atom.row - centerRow; const newX = atom.baseX + (distFromCenterX * expansionFactor) + vibration; const newY = atom.baseY + (distFromCenterY * expansionFactor * 0.3) + vibration; // Less Y expansion for aesthetics // Calculate Stress for coloring // Compare current spacing to base spacing // We need to look at horizontal spacing primarily // Approximate stress based on expansionFactor relative to "natural" state (0) // If Temp is low but Expansion is High -> Tension // If Temp is low but Expansion is Low (negative) -> Compression let currentStress = 0; if (currentPhase.id === 'RESULT' || currentPhase.id === 'CORE_COOLING') { if (targetTemp < 0.5) { currentStress = expansionFactor / 4; // Normalize roughly -0.5 to 0.5 } } return { ...atom, x: newX, y: newY, temp: targetTemp, stress: currentStress }; }); }); if (elapsed < currentPhase.duration) { requestRef.current = requestAnimationFrame(animate); } else { // Move to next phase const nextPhase = (phaseIndex + 1) % PHASES.length; setPhaseIndex(nextPhase); startTimeRef.current = null; requestRef.current = requestAnimationFrame(animate); } }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [phaseIndex]); // Render Lines (Bonds) const renderBonds = useMemo(() => { const lines = []; atoms.forEach((atom, i) => { // Connect to right neighbor if (atom.col < COLS - 1) { const rightAtom = atoms[i + 1]; const dist = Math.sqrt(Math.pow(rightAtom.x - atom.x, 2) + Math.pow(rightAtom.y - atom.y, 2)); const strain = (dist - BASE_SPACING) / BASE_SPACING; // Positive = Tension, Negative = Compression let strokeColor = '#334155'; // Neutral Slate let opacity = 0.3; let width = 1; // Visualize Stress/Temp if (atom.temp > 0.2) { strokeColor = interpolateColor('#334155', '#ef4444', atom.temp); // Heat glow opacity = 0.6; } else if (Math.abs(strain) > 0.02) { // Stress Visualization if (strain > 0) strokeColor = '#f59e0b'; // Tension (Orange/Red) else strokeColor = '#3b82f6'; // Compression (Blue) opacity = 0.8; width = 2; } lines.push( ); } // Connect to bottom neighbor if (atom.row < ROWS - 1) { const bottomAtom = atoms[i + COLS]; if (bottomAtom) { lines.push( ); } } }); return lines; }, [atoms]); return (

); }