import React, { useEffect, useRef, useMemo } from 'react'; const NeuronSimulation = () => { const canvasRef = useRef(null); const containerRef = useRef(null); // Animation state refs (mutable, no re-renders) const stateRef = useRef({ pulses: [], // { type: 'dendrite'|'axon', pathIndex: 0, progress: 0, speed: 0.01 } particles: [], // Background floating particles energy: 0, // Soma energy accumulation time: 0, labels: [ { text: "树突 (Dendrites)", sub: "信号接收 / Input", x: 150, y: 150, targetX: 280, targetY: 280, alpha: 0 }, { text: "细胞体 (Soma)", sub: "核心处理 / Processing", x: 380, y: 100, targetX: 400, targetY: 300, alpha: 0 }, { text: "细胞核 (Nucleus)", sub: "DNA存储 / Control", x: 400, y: 450, targetX: 400, targetY: 300, alpha: 0 }, { text: "轴突 (Axon)", sub: "信号传导 / Transmission", x: 600, y: 500, targetX: 600, targetY: 320, alpha: 0 }, { text: "髓鞘 (Myelin Sheath)", sub: "绝缘加速 / Insulation", x: 700, y: 150, targetX: 720, targetY: 310, alpha: 0 }, { text: "轴突末梢 (Axon Terminal)", sub: "突触传递 / Output", x: 900, y: 400, targetX: 920, targetY: 300, alpha: 0 } ] }); // Constants const COLOR_BG = '#0f172a'; const COLOR_NEURON_BASE = '#1e293b'; const COLOR_NEURON_STROKE = '#334155'; const COLOR_PULSE = '#22d3ee'; // Cyan const COLOR_CORE = '#a855f7'; // Purple const COLOR_HIGHLIGHT = '#ffffff'; // Geometry Data Generation (run once) const geometry = useMemo(() => { const somaCenter = { x: 400, y: 300 }; const somaRadius = 60; // Generate organic soma shape const somaPoints = []; for (let i = 0; i <= 360; i += 10) { const angle = (i * Math.PI) / 180; const r = somaRadius + Math.sin(i * 0.1) * 5 + Math.cos(i * 0.3) * 5; somaPoints.push({ x: somaCenter.x + Math.cos(angle) * r, y: somaCenter.y + Math.sin(angle) * r }); } // Dendrites paths (start from outer, end at soma) const dendrites = []; for (let i = 0; i < 8; i++) { const angle = Math.PI + (Math.PI / 6) * (i - 4) + (Math.random() - 0.5) * 0.5; const length = 180 + Math.random() * 50; const startX = somaCenter.x + Math.cos(angle) * somaRadius; const startY = somaCenter.y + Math.sin(angle) * somaRadius; // Create jagged path const path = [{x: startX + Math.cos(angle)*length, y: startY + Math.sin(angle)*length}]; let currX = path[0].x; let currY = path[0].y; const segments = 5; for(let j=0; j { const mt = 1 - t; const mt2 = mt * mt; const mt3 = mt2 * mt; const t2 = t * t; const t3 = t2 * t; const x = mt3 * axonStart.x + 3 * mt2 * t * axonCP1.x + 3 * mt * t2 * axonCP2.x + t3 * axonEnd.x; const y = mt3 * axonStart.y + 3 * mt2 * t * axonCP1.y + 3 * mt * t2 * axonCP2.y + t3 * axonEnd.y; return { x, y }; }; // Precalculate Axon Points for drawing and animation const axonPath = []; for(let t=0; t<=1; t+=0.01) { axonPath.push(getBezierPoint(t)); } // Axon Terminals (branching at end) const terminals = []; const endPoint = axonPath[axonPath.length - 1]; for(let i=-2; i<=2; i++) { terminals.push({ start: endPoint, end: { x: endPoint.x + 60 + Math.random() * 20, y: endPoint.y + i * 30 + (Math.random()-0.5)*10 } }); } // Background particles const particles = []; for(let i=0; i<50; i++) { particles.push({ x: Math.random() * 1000, y: Math.random() * 600, r: Math.random() * 2, speedX: (Math.random() - 0.5) * 0.2, speedY: (Math.random() - 0.5) * 0.2, alpha: Math.random() * 0.5 }); } return { somaPoints, somaCenter, dendrites, axonPath, terminals, particles }; }, []); useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); let animationFrameId; // Initialize state particles stateRef.current.particles = geometry.particles; const render = () => { // 1. Update State stateRef.current.time += 0.01; const { time, pulses, energy, labels } = stateRef.current; // Randomly spawn dendrite pulses if (Math.random() < 0.05) { pulses.push({ type: 'dendrite', pathIndex: Math.floor(Math.random() * geometry.dendrites.length), progress: 0, speed: 0.005 + Math.random() * 0.005 }); } // Update pulses for (let i = pulses.length - 1; i >= 0; i--) { const p = pulses[i]; p.progress += p.speed; if (p.type === 'dendrite') { if (p.progress >= 1) { // Reached soma stateRef.current.energy = Math.min(stateRef.current.energy + 15, 100); pulses.splice(i, 1); } } else if (p.type === 'axon') { if (p.progress >= 1) { // Reached end, create flash at terminals pulses.splice(i, 1); } } } // Soma firing logic stateRef.current.energy *= 0.98; // Decay if (stateRef.current.energy > 80 && !pulses.some(p => p.type === 'axon' && p.progress < 0.2)) { // Fire axon pulse pulses.push({ type: 'axon', pathIndex: 0, progress: 0, speed: 0.02 // Fast! }); stateRef.current.energy = 0; // Discharge } // Label Fade In labels.forEach((l, i) => { if (time > 1 + i * 0.5) { l.alpha = Math.min(l.alpha + 0.02, 1); } }); // 2. Draw Frame ctx.fillStyle = COLOR_BG; ctx.fillRect(0, 0, 1000, 600); // Background Network ctx.fillStyle = '#1e293b'; stateRef.current.particles.forEach(p => { p.x += p.speedX; p.y += p.speedY; if(p.x < 0) p.x = 1000; if(p.x > 1000) p.x = 0; if(p.y < 0) p.y = 600; if(p.y > 600) p.y = 0; ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2); ctx.fillStyle = `rgba(148, 163, 184, ${p.alpha})`; ctx.fill(); }); // DRAW: Dendrites ctx.strokeStyle = COLOR_NEURON_STROKE; ctx.lineWidth = 2; ctx.lineCap = 'round'; geometry.dendrites.forEach(path => { ctx.beginPath(); ctx.moveTo(path[0].x, path[0].y); for(let i=1; i ctx.lineTo(p.x, p.y)); ctx.lineWidth = 4; ctx.stroke(); // DRAW: Myelin Sheaths (Rectangles along axon) ctx.fillStyle = COLOR_NEURON_BASE; ctx.strokeStyle = '#475569'; ctx.lineWidth = 1; const sheathCount = 6; const step = Math.floor(geometry.axonPath.length / sheathCount); for(let i=0; i= geometry.axonPath.length) continue; const p1 = geometry.axonPath[idx]; const p2 = geometry.axonPath[idx + 10]; // Look ahead for angle const angle = Math.atan2(p2.y - p1.y, p2.x - p1.x); ctx.save(); ctx.translate(p1.x, p1.y); ctx.rotate(angle); // Draw rounded rect const w = 60; const h = 24; ctx.beginPath(); ctx.roundRect(-w/2 + 30, -h/2, w, h, 5); ctx.fill(); ctx.stroke(); ctx.restore(); } // DRAW: Terminals ctx.strokeStyle = COLOR_NEURON_STROKE; geometry.terminals.forEach(t => { ctx.beginPath(); ctx.moveTo(t.start.x, t.start.y); ctx.lineTo(t.end.x, t.end.y); ctx.stroke(); // Synapse bulb ctx.beginPath(); ctx.arc(t.end.x, t.end.y, 3, 0, Math.PI*2); ctx.fillStyle = COLOR_NEURON_STROKE; ctx.fill(); }); // DRAW: Soma (Cell Body) ctx.beginPath(); const sp = geometry.somaPoints; ctx.moveTo(sp[0].x, sp[0].y); for(let i=1; i { let x, y; if (p.type === 'dendrite') { const path = geometry.dendrites[p.pathIndex]; // Approximate position on jagged path const totalPoints = path.length; const currentIdx = Math.min(Math.floor(p.progress * totalPoints), totalPoints - 1); const pt = path[currentIdx]; x = pt.x; y = pt.y; ctx.shadowColor = COLOR_PULSE; ctx.shadowBlur = 10; ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(x, y, 2, 0, Math.PI*2); ctx.fill(); } else if (p.type === 'axon') { const idx = Math.min(Math.floor(p.progress * geometry.axonPath.length), geometry.axonPath.length - 1); const pt = geometry.axonPath[idx]; x = pt.x; y = pt.y; // Draw electric trail ctx.shadowColor = COLOR_PULSE; ctx.shadowBlur = 15; ctx.strokeStyle = '#fff'; ctx.lineWidth = 3; ctx.beginPath(); // Draw a small tail const tailLen = 10; const startTail = Math.max(0, idx - tailLen); if(startTail < idx) { ctx.moveTo(geometry.axonPath[startTail].x, geometry.axonPath[startTail].y); for(let k=startTail; k<=idx; k++) ctx.lineTo(geometry.axonPath[k].x, geometry.axonPath[k].y); } ctx.stroke(); // Flash at nodes of Ranvier (gaps in myelin) if (idx % 20 === 0) { ctx.beginPath(); ctx.arc(x, y, 8, 0, Math.PI*2); ctx.fillStyle = 'rgba(255,255,255,0.8)'; ctx.fill(); } } }); ctx.globalCompositeOperation = 'source-over'; ctx.shadowBlur = 0; // DRAW: Labels and Lines labels.forEach(l => { if (l.alpha <= 0.01) return; ctx.globalAlpha = l.alpha; // Line ctx.strokeStyle = 'rgba(255, 255, 255, 0.3)'; ctx.lineWidth = 1; ctx.setLineDash([2, 2]); ctx.beginPath(); ctx.moveTo(l.x, l.y + 10); // Start near text ctx.lineTo(l.targetX, l.targetY); ctx.stroke(); ctx.setLineDash([]); // Target dot ctx.beginPath(); ctx.arc(l.targetX, l.targetY, 3, 0, Math.PI*2); ctx.fillStyle = COLOR_PULSE; ctx.fill(); // Text ctx.fillStyle = '#f1f5f9'; ctx.font = 'bold 16px "Microsoft YaHei", sans-serif'; ctx.textAlign = 'center'; ctx.fillText(l.text, l.x, l.y); ctx.fillStyle = '#94a3b8'; ctx.font = '12px sans-serif'; ctx.fillText(l.sub, l.x, l.y + 16); ctx.globalAlpha = 1.0; }); animationFrameId = requestAnimationFrame(render); }; render(); return () => { cancelAnimationFrame(animationFrameId); }; }, [geometry]); return (

); }; export default NeuronSimulation;

神经元结构模拟