'use client'; import React, { useEffect, useRef, useState } from 'react'; export const DialysisPrincipleView = () => { const canvasRef = useRef(null); const [stats, setStats] = useState({ flowRate: 300, clearance: 0 }); const containerRef = useRef(null); // Configuration const CONFIG = { width: 800, height: 500, membraneY: 250, particleCount: 120, colors: { bg: '#0f172a', bloodBase: '#7f1d1d', bloodCell: '#ef4444', toxin: '#facc15', // Yellow/Green for waste dialysate: '#06b6d4', // Cyan for clean fluid membrane: '#94a3b8', } }; useEffect(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; let animationFrameId: number; let particles: Particle[] = []; let frameCount = 0; class Particle { x: number; y: number; vx: number; vy: number; type: 'rbc' | 'toxin' | 'dialysate'; radius: number; alpha: number; constructor(startType?: 'rbc' | 'toxin' | 'dialysate') { this.reset(startType); } reset(forcedType?: 'rbc' | 'toxin' | 'dialysate') { const rand = Math.random(); // Determine type based on spawning logic if (forcedType) { this.type = forcedType; } else { // 20% RBC, 30% Toxin, 50% Dialysate particles if (rand < 0.2) this.type = 'rbc'; else if (rand < 0.5) this.type = 'toxin'; else this.type = 'dialysate'; } this.alpha = 0.8 + Math.random() * 0.2; if (this.type === 'dialysate') { // Dialysate flows Right to Left (Counter-current) in bottom chamber this.x = CONFIG.width + Math.random() * 50; this.y = CONFIG.membraneY + 10 + Math.random() * (CONFIG.height - CONFIG.membraneY - 20); this.vx = -(1.5 + Math.random() * 1.5); // Flow left this.vy = (Math.random() - 0.5) * 0.5; this.radius = 1.5; } else { // Blood flows Left to Right in top chamber this.x = -Math.random() * 50; this.y = 20 + Math.random() * (CONFIG.membraneY - 40); this.vx = 1 + Math.random() * 1.5; // Flow right this.vy = (Math.random() - 0.5) * 0.5; if (this.type === 'rbc') { this.radius = 6 + Math.random() * 3; } else { // Toxin this.radius = 2.5; // Toxins have a natural drift downwards (diffusion pressure) this.vy = 0.2 + Math.random() * 0.3; } } } update() { this.x += this.vx; this.y += this.vy; // Boundary checks and Diffusion Logic // 1. RBC Logic (Stay in Blood/Top Channel) if (this.type === 'rbc') { // Bounce off membrane if (this.y + this.radius > CONFIG.membraneY - 5) { this.y = CONFIG.membraneY - 5 - this.radius; this.vy *= -0.5; } // Bounce off top if (this.y - this.radius < 0) { this.y = this.radius; this.vy *= -0.5; } // Reset if off screen right if (this.x > CONFIG.width + 20) { this.reset('rbc'); this.x = -20; } } // 2. Toxin Logic (Can cross membrane) if (this.type === 'toxin') { // If in top chamber and hitting membrane if (this.y > CONFIG.membraneY - 5 && this.y < CONFIG.membraneY + 5) { // High probability to cross (Simulation of diffusion/pore size) if (Math.random() > 0.1) { this.y += 2; // Cross over } else { this.vy *= -0.5; // Bounce (rarely) } } // If crossed into Dialysate (Bottom) if (this.y > CONFIG.membraneY + 10) { // Entrained by dialysate flow (change direction to Left) this.vx = this.vx * 0.95 + (-2) * 0.05; // Smooth transition to left flow if (this.vx > 0 && Math.random() < 0.1) this.vx = -0.5; // Force turn } // Reset logic if (this.x > CONFIG.width + 20 && this.y < CONFIG.membraneY) { // Exited via blood outlet (uncleared toxin) this.reset('toxin'); this.x = -20; } else if (this.x < -20 && this.y > CONFIG.membraneY) { // Exited via dialysate outlet (cleared toxin) this.reset('toxin'); this.x = -20; // Respawn at start for visual continuity logic } } // 3. Dialysate Logic (Stay in Bottom) if (this.type === 'dialysate') { // Bounce off membrane bottom if (this.y - this.radius < CONFIG.membraneY + 5) { this.y = CONFIG.membraneY + 5 + this.radius; this.vy *= -0.5; } if (this.y + this.radius > CONFIG.height) { this.y = CONFIG.height - this.radius; this.vy *= -0.5; } if (this.x < -20) { this.reset('dialysate'); } } } draw(ctx: CanvasRenderingContext2D) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); if (this.type === 'rbc') { // Red Blood Cell - Donut shape simulation const grad = ctx.createRadialGradient(this.x, this.y, this.radius * 0.4, this.x, this.y, this.radius); grad.addColorStop(0, '#7f1d1d'); grad.addColorStop(1, CONFIG.colors.bloodCell); ctx.fillStyle = grad; ctx.shadowBlur = 5; ctx.shadowColor = '#ef4444'; } else if (this.type === 'toxin') { ctx.fillStyle = CONFIG.colors.toxin; ctx.shadowBlur = 8; ctx.shadowColor = CONFIG.colors.toxin; } else { ctx.fillStyle = CONFIG.colors.dialysate; ctx.shadowBlur = 0; ctx.globalAlpha = 0.4; } ctx.fill(); ctx.shadowBlur = 0; ctx.globalAlpha = 1; ctx.closePath(); // Specific detail for RBC if (this.type === 'rbc') { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius * 0.5, 0, Math.PI * 2); ctx.fillStyle = 'rgba(0,0,0,0.2)'; ctx.fill(); } } } // Initialize particles for (let i = 0; i < CONFIG.particleCount; i++) { particles.push(new Particle()); } const drawBackground = () => { // Clear ctx.clearRect(0, 0, CONFIG.width, CONFIG.height); // Draw Channel Backgrounds // Blood Channel (Top) const bgGradTop = ctx.createLinearGradient(0, 0, CONFIG.width, 0); bgGradTop.addColorStop(0, 'rgba(127, 29, 29, 0.1)'); bgGradTop.addColorStop(1, 'rgba(220, 38, 38, 0.05)'); ctx.fillStyle = bgGradTop; ctx.fillRect(0, 0, CONFIG.width, CONFIG.membraneY); // Dialysate Channel (Bottom) const bgGradBot = ctx.createLinearGradient(CONFIG.width, CONFIG.membraneY, 0, CONFIG.membraneY); bgGradBot.addColorStop(0, 'rgba(6, 182, 212, 0.1)'); bgGradBot.addColorStop(1, 'rgba(59, 130, 246, 0.05)'); ctx.fillStyle = bgGradBot; ctx.fillRect(0, CONFIG.membraneY, CONFIG.width, CONFIG.height - CONFIG.membraneY); }; const drawMembrane = () => { // Draw the porous membrane ctx.beginPath(); ctx.strokeStyle = CONFIG.colors.membrane; ctx.lineWidth = 4; ctx.setLineDash([10, 8]); // Dashed line represents pores ctx.moveTo(0, CONFIG.membraneY); ctx.lineTo(CONFIG.width, CONFIG.membraneY); ctx.stroke(); ctx.setLineDash([]); // Glow effect for membrane ctx.shadowColor = '#fff'; ctx.shadowBlur = 10; ctx.strokeStyle = 'rgba(255,255,255,0.3)'; ctx.lineWidth = 2; ctx.moveTo(0, CONFIG.membraneY); ctx.lineTo(CONFIG.width, CONFIG.membraneY); ctx.stroke(); ctx.shadowBlur = 0; }; const render = () => { drawBackground(); // Update and Draw Particles particles.forEach(p => { p.update(); p.draw(ctx); }); drawMembrane(); // Simulate stats update occasionally frameCount++; if (frameCount % 60 === 0) { setStats(prev => ({ flowRate: 300 + Math.floor(Math.random() * 10), clearance: Math.min(98, prev.clearance + 0.5) })); } animationFrameId = requestAnimationFrame(render); }; render(); return () => { cancelAnimationFrame(animationFrameId); }; }, []); return (

{/* SVG Overlay for UI/Schematic Lines */} {/* Main Animation Canvas */}

); };

血液透析原理模拟