import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BG_COLOR = "#0f172a"; const PRIMARY_COLOR = "#38bdf8"; // Cyan/Blue const ACCENT_COLOR = "#facc15"; // Yellow (Nutrients) const DANGER_COLOR = "#ef4444"; // Red (Acid/Heat) const FOOD_COLOR_START = "#ffffff"; const FOOD_COLOR_STOMACH = "#fde047"; const FOOD_COLOR_POOP = "#5d4037"; // --- Math Helpers --- const lerp = (start, end, t) => start * (1 - t) + end * t; const easeInOut = (t) => t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t; // Simple Cubic Bezier point calculation const getBezierPoint = (t, p0, p1, p2, p3) => { const cX = 3 * (p1.x - p0.x); const bX = 3 * (p2.x - p1.x) - cX; const aX = p3.x - p0.x - cX - bX; const cY = 3 * (p1.y - p0.y); const bY = 3 * (p2.y - p1.y) - cY; const aY = p3.y - p0.y - cY - bY; const x = (aX * Math.pow(t, 3)) + (bX * Math.pow(t, 2)) + (cX * t) + p0.x; const y = (aY * Math.pow(t, 3)) + (bY * Math.pow(t, 2)) + (cY * t) + p0.y; return { x, y }; }; // --- Component --- export const DigestiveSystemAnimation = () => { // --- React State for UI (Text/Labels) --- // Only update this when necessary to avoid re-rendering the loop logic const [uiState, setUiState] = useState({ stage: 'START', title: '准备开始', description: '拟人化饭团准备进入消化道...', timerText: '00:00:00', stats: '' }); // Force render for animation loop const [, setTick] = useState(0); // --- Mutable Animation State (Refs) --- const stateRef = useRef({ t: 0, // Global progress 0 -> 1 speed: 0.0005, // Base speed particles: [], // Food bits, nutrients, bubbles mouthOpen: 0, teethOffset: 0, stomachChurn: 0, villiWave: 0, foodPos: { x: 100, y: 100 }, foodIntegrity: 1.0, // 1 = Whole, 0 = Liquid foodColor: FOOD_COLOR_START, startTime: Date.now(), isPaused: false }); // --- Path Definition --- // We define the digestive tract as a series of connected Bezier curves const pathSegments = useMemo(() => [ // 0: Mouth -> Esophagus Start (Vertical drop) { p0: {x: 100, y: 50}, p1: {x: 100, y: 100}, p2: {x: 100, y: 120}, p3: {x: 100, y: 150} }, // 1: Esophagus (Wavy down) { p0: {x: 100, y: 150}, p1: {x: 120, y: 250}, p2: {x: 80, y: 350}, p3: {x: 150, y: 400} }, // 2: Stomach (J-Shape bag) { p0: {x: 150, y: 400}, p1: {x: 250, y: 450}, p2: {x: 350, y: 450}, p3: {x: 350, y: 350} }, // 3: Small Intestine (Zig Zag / Coiled) { p0: {x: 350, y: 350}, p1: {x: 350, y: 250}, p2: {x: 500, y: 250}, p3: {x: 500, y: 350} }, { p0: {x: 500, y: 350}, p1: {x: 500, y: 450}, p2: {x: 650, y: 450}, p3: {x: 650, y: 350} }, // 4: Large Intestine (Arch over) { p0: {x: 650, y: 350}, p1: {x: 650, y: 150}, p2: {x: 850, y: 150}, p3: {x: 850, y: 350} }, // 5: Rectum/Exit { p0: {x: 850, y: 350}, p1: {x: 850, y: 450}, p2: {x: 850, y: 500}, p3: {x: 850, y: 550} }, ], []); // Calculate total length rough estimate for T mapping const segmentWeights = [0.05, 0.1, 0.2, 0.15, 0.15, 0.25, 0.1]; // Must sum to 1 const getPosAtGlobalT = (t) => { let accum = 0; for (let i = 0; i < segmentWeights.length; i++) { const w = segmentWeights[i]; if (t <= accum + w) { const localT = (t - accum) / w; return getBezierPoint(localT, pathSegments[i].p0, pathSegments[i].p1, pathSegments[i].p2, pathSegments[i].p3); } accum += w; } return pathSegments[pathSegments.length - 1].p3; // Clamp end }; // --- Main Animation Loop --- useEffect(() => { let animationFrameId; const state = stateRef.current; const loop = () => { // 1. Update Time & Global Progress if (state.t >= 1) { state.t = 0; // Loop state.particles = []; state.foodIntegrity = 1.0; state.foodColor = FOOD_COLOR_START; } // Variable speed based on organ let currentSpeed = 0.001; if (state.t < 0.05) currentSpeed = 0.0005; // Mouth (slow chew) else if (state.t < 0.15) currentSpeed = 0.002; // Esophagus (fast slide) else if (state.t < 0.35) currentSpeed = 0.0003; // Stomach (slow digest) else if (state.t < 0.65) currentSpeed = 0.0005; // Small Intestine else if (state.t < 0.9) currentSpeed = 0.0002; // Large Intestine (very slow) else currentSpeed = 0.003; // Exit state.t += currentSpeed; // 2. Calculate Physics & Pos const pos = getPosAtGlobalT(state.t); state.foodPos = pos; // 3. Organ-Specific Logic & Particles // --- MOUTH (0.0 - 0.05) --- if (state.t < 0.05) { state.teethOffset = Math.sin(Date.now() / 100) * 10; // Chewing if (Math.random() > 0.8) { // Saliva drops state.particles.push({ x: 100 + (Math.random() - 0.5) * 20, y: 80, vx: 0, vy: 2, life: 30, type: 'saliva', color: '#a5f3fc' }); } // Break down if (state.t > 0.03) state.foodIntegrity = Math.max(0.5, state.foodIntegrity - 0.01); } // --- ESOPHAGUS (0.05 - 0.15) --- else if (state.t < 0.15) { state.teethOffset = 0; } // --- STOMACH (0.15 - 0.35) --- else if (state.t < 0.35) { state.stomachChurn = Math.sin(Date.now() / 300) * 5; state.foodIntegrity = Math.max(0, state.foodIntegrity - 0.005); state.foodColor = FOOD_COLOR_STOMACH; // Bubbles (Acid) if (Math.random() > 0.8) { state.particles.push({ x: pos.x + (Math.random() - 0.5) * 40, y: pos.y + 20, vx: (Math.random() - 0.5), vy: -1 - Math.random(), life: 60, type: 'bubble', color: '#bef264', size: Math.random() * 4 }); } } // --- SMALL INTESTINE (0.35 - 0.65) --- else if (state.t < 0.65) { state.villiWave = Math.sin(Date.now() / 200); // Absorption (Nutrients leaving path) if (Math.random() > 0.6) { const angle = Math.random() * Math.PI * 2; state.particles.push({ x: pos.x, y: pos.y, vx: Math.cos(angle) * 2, vy: Math.sin(angle) * 2, life: 40, type: 'nutrient', color: ACCENT_COLOR, size: 2 }); } } // --- LARGE INTESTINE (0.65 - 0.9) --- else if (state.t < 0.9) { state.foodColor = FOOD_COLOR_POOP; // Water absorption (Blue particles moving IN towards wall? Or just disappearing water) // Let's visualize water droplets leaving the food if (Math.random() > 0.85) { state.particles.push({ x: pos.x + (Math.random()-0.5)*20, y: pos.y + (Math.random()-0.5)*20, vx: (Math.random()-0.5), vy: -2, // Evaporating/absorbing life: 30, type: 'water', color: '#60a5fa', size: 3 }); } } // 4. Update Particles for (let i = state.particles.length - 1; i >= 0; i--) { const p = state.particles[i]; p.x += p.vx; p.y += p.vy; p.life--; if (p.type === 'bubble') p.vx += Math.sin(Date.now()/100)*0.1; // Wiggle if (p.life <= 0) state.particles.splice(i, 1); } // 5. Update UI Text State based on thresholds (Debounced via checks) updateUIText(state.t); // 6. Trigger Render setTick(prev => prev + 1); animationFrameId = requestAnimationFrame(loop); }; const updateUIText = (t) => { let newStage = ''; let newTitle = ''; let newDesc = ''; let newTimer = ''; if (t < 0.05) { newStage = 'MOUTH'; newTitle = '口腔 (Mouth)'; newDesc = '物理粉碎 + 唾液淀粉酶，食物分解开始！耗时：8秒'; newTimer = '00:00:05'; } else if (t < 0.15) { newStage = 'ESOPHAGUS'; newTitle = '食道 (Esophagus)'; newDesc = '长约15cm，通过蠕动波将食团推入胃部。'; newTimer = '00:00:15'; } else if (t < 0.35) { newStage = 'STOMACH'; newTitle = '胃部 (Stomach)'; newDesc = '强酸环境(pH 1.5-3.5)，蛋白质变性，形成食糜。'; newTimer = '03:00:00'; } else if (t < 0.65) { newStage = 'SMALL_INT'; newTitle = '小肠 (Small Intestine)'; newDesc = '长5-7米，拥有巨大表面积，吸收90%营养分子。'; newTimer = '05:30:00'; } else if (t < 0.9) { newStage = 'LARGE_INT'; newTitle = '大肠 (Large Intestine)'; newDesc = '回收水分与电解质，细菌发酵，残渣浓缩成形。'; newTimer = '18:00:00'; } else { newStage = 'EXIT'; newTitle = '排出 (Excretion)'; newDesc = '总旅程约9米，历时24-48小时。任务完成！'; newTimer = '24:00:00'; } setUiState(prev => { if (prev.stage !== newStage) { return { stage: newStage, title: newTitle, description: newDesc, timerText: newTimer }; } return prev; }); }; loop(); return () => cancelAnimationFrame(animationFrameId); }, [pathSegments, segmentWeights]); // Empty deps essentially // --- Render Helpers --- const state = stateRef.current; // Generate Path String for visualization const pathData = useMemo(() => { let d = `M ${pathSegments[0].p0.x} ${pathSegments[0].p0.y}`; pathSegments.forEach(seg => { d += ` C ${seg.p1.x} ${seg.p1.y}, ${seg.p2.x} ${seg.p2.y}, ${seg.p3.x} ${seg.p3.y}`; }); return d; }, [pathSegments]); // Villi generator for Small Intestine visual const villiLines = useMemo(() => { // Generate lines along the small intestine segments (Indices 3 and 4) const lines = []; for(let i=0; i<50; i++) { // Rough placement along the coiled path lines.push({ x: 350 + (i*6), y: 250 + (i%2)*100, h: 10 + Math.random()*5 }); } return lines; }, []); return (

); };