'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const CENTER_X = VIEW_WIDTH / 2; // Colors const COLOR_BG = '#0f172a'; const COLOR_P_BG = 'rgba(236, 72, 153, 0.1)'; // Pink tint const COLOR_N_BG = 'rgba(6, 182, 212, 0.1)'; // Cyan tint const COLOR_HOLE = '#ec4899'; // P-type carrier (+) const COLOR_ELECTRON = '#06b6d4'; // N-type carrier (-) const COLOR_ION_NEG = '#9d174d'; // Fixed acceptor (-) const COLOR_ION_POS = '#155e75'; // Fixed donor (+) const COLOR_TEXT = '#e2e8f0'; const COLOR_GRID = '#1e293b'; // Text constants const TEXTS = { title: "PN Junction Formation (PN结形成过程)", pType: "P-Type (P型半导体)", nType: "N-Type (N型半导体)", hole: "Hole (空穴 +)", electron: "Electron (电子 -)", diffusion: "Diffusion Current (扩散运动)", recombination: "Recombination (复合)", depletion: "Depletion Region (耗尽层)", eField: "Built-in Electric Field (内建电场)", }; const generateParticles = (count: number, xMin: number, xMax: number, type: 'hole' | 'electron') => { return Array.from({ length: count }).map((_, i) => ({ id: i, x: xMin + Math.random() * (xMax - xMin), y: 50 + Math.random() * (VIEW_HEIGHT - 100), vx: (Math.random() - 0.5) * 0.5, vy: (Math.random() - 0.5) * 0.5, type, active: true, // If false, it has recombined recombining: false, })); }; const generateIons = (rows: number, cols: number, startX: number, width: number, type: 'neg' | 'pos') => { const ions = []; const cellW = width / cols; const cellH = (VIEW_HEIGHT - 100) / rows; for (let r = 0; r < rows; r++) { for (let c = 0; c < cols; c++) { ions.push({ x: startX + c * cellW + cellW / 2, y: 50 + r * cellH + cellH / 2, type }); } } return ions; }; export default function PNJunctionAnimation() { // Animation State const [phase, setPhase] = useState<'initial' | 'diffusion' | 'recombination' | 'depletion'>('initial'); const [description, setDescription] = useState("Initialization: P-type (Left) & N-type (Right) separated."); // Particles const [holes, setHoles] = useState(() => generateParticles(60, 50, CENTER_X - 10, 'hole')); const [electrons, setElectrons] = useState(() => generateParticles(60, CENTER_X + 10, VIEW_WIDTH - 50, 'electron')); // Fixed Ions (Background static charges) const fixedNegIons = useMemo(() => generateIons(5, 8, 50, CENTER_X - 50, 'neg'), []); const fixedPosIons = useMemo(() => generateIons(5, 8, CENTER_X, CENTER_X - 50, 'pos'), []); const requestRef = useRef(); const startTimeRef = useRef(Date.now()); const phaseTimerRef = useRef(0); // Reset function const resetAnimation = () => { setHoles(generateParticles(60, 50, CENTER_X - 10, 'hole')); setElectrons(generateParticles(60, CENTER_X + 10, VIEW_WIDTH - 50, 'electron')); setPhase('initial'); startTimeRef.current = Date.now(); phaseTimerRef.current = 0; }; const animate = () => { const now = Date.now(); const elapsed = now - startTimeRef.current; // Timeline Logic if (elapsed < 3000) { if (phase !== 'initial') { setPhase('initial'); setDescription("Phase 1: Separate Materials. Holes on Left, Electrons on Right."); } } else if (elapsed < 6000) { if (phase !== 'diffusion') { setPhase('diffusion'); setDescription("Phase 2: Diffusion (扩散). Carriers move due to concentration gradient."); } } else if (elapsed < 9000) { if (phase !== 'recombination') { setPhase('recombination'); setDescription("Phase 3: Recombination (复合). Electrons fill Holes near junction."); } } else if (elapsed < 14000) { if (phase !== 'depletion') { setPhase('depletion'); setDescription("Phase 4: Depletion Region (耗尽层) & Built-in Electric Field formed."); } } else if (elapsed > 16000) { resetAnimation(); } // Update Particle Physics setHoles(prevHoles => updateParticles(prevHoles, 'hole', elapsed, phase, electrons)); setElectrons(prevElectrons => updateParticles(prevElectrons, 'electron', elapsed, phase, holes)); requestRef.current = requestAnimationFrame(animate); }; // Physics Engine const updateParticles = ( particles: any[], type: 'hole' | 'electron', time: number, currentPhase: string, opposites: any[] // passed for recombination check logic (simplified) ) => { return particles.map((p, idx) => { if (!p.active) return p; let { x, y, vx, vy } = p; let newActive = true; // Brownian motion jitter vx += (Math.random() - 0.5) * 0.2; vy += (Math.random() - 0.5) * 0.2; // Dampening vx *= 0.95; vy *= 0.95; // Phase specific behaviors if (currentPhase === 'diffusion' || currentPhase === 'recombination') { // Diffusion force: push towards center const distToCenter = CENTER_X - x; // Only particles reasonably close to center participate in diffusion to simulate concentration gradient if (Math.abs(distToCenter) < 400) { // Holes want to go Right, Electrons want to go Left const direction = type === 'hole' ? 1 : -1; vx += direction * 0.8; } } if (currentPhase === 'recombination' || currentPhase === 'depletion') { // Check if crossed the line and needs to recombine const crossed = type === 'hole' ? x > CENTER_X : x < CENTER_X; // Create a "Depletion Zone" effect roughly -100 to +100 from center const inDepletionZone = x > CENTER_X - 120 && x < CENTER_X + 120; if (inDepletionZone && currentPhase === 'depletion') { // Push back active carriers from depletion zone in final phase (Electric Field Effect) const pushDir = type === 'hole' ? -1 : 1; vx += pushDir * 2.0; } else if (crossed && currentPhase === 'recombination') { // Simulate recombination chance if (Math.random() < 0.1) { newActive = false; // Poof, it's gone (recombined) } } } // Update Position x += vx; y += vy; // Boundaries if (y < 60) { y = 60; vy *= -1; } if (y > VIEW_HEIGHT - 60) { y = VIEW_HEIGHT - 60; vy *= -1; } if (x < 20) { x = 20; vx *= -1; } if (x > VIEW_WIDTH - 20) { x = VIEW_WIDTH - 20; vx *= -1; } return { ...p, x, y, vx, vy, active: newActive }; }); }; useEffect(() => { requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current!); }, [phase]); // Dependency on phase isn't strictly needed for loop but helps logical grouping // Render Helpers const renderGrid = () => ( {Array.from({ length: 20 }).map((_, i) => ( ))} {Array.from({ length: 12 }).map((_, i) => ( ))} ); return (

); }