'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const BACKGROUND_COLOR = '#0f172a'; // ----------------------------------------------------------------------------- // Constants & Configuration // ----------------------------------------------------------------------------- const COLORS = { thesis: '#06b6d4', // Cyan (Thesis) antithesis: '#f43f5e', // Rose (Antithesis) synthesis: '#8b5cf6', // Violet (Synthesis) grid: '#1e293b', text: '#e2e8f0', accent: '#fbbf24' // Amber }; const STAGES = [ { id: 0, title: '阶段一: 矛盾的同一性', sub: '相互依存 / 蕴含发展动力', speed: 0.02, tension: 0.5 }, { id: 1, title: '阶段二: 矛盾的斗争性', sub: '相互排斥 / 力量消长', speed: 0.05, tension: 1.2 }, { id: 2, title: '阶段三: 量变到质变', sub: '临界突破 / 结构重组', speed: 0.12, tension: 2.0 }, { id: 3, title: '阶段四: 否定之否定', sub: '螺旋上升 / 新的统一', speed: 0.03, tension: 0.2 }, ]; // ----------------------------------------------------------------------------- // Helper Functions // ----------------------------------------------------------------------------- const project3D = (x: number, y: number, z: number) => { const scale = 400 / (400 + z); const x2d = x * scale + VIEW_WIDTH / 2; const y2d = y * scale + VIEW_HEIGHT / 2; return { x: x2d, y: y2d, scale }; }; // ----------------------------------------------------------------------------- // Main Component // ----------------------------------------------------------------------------- export default function DialecticalMotion() { // Animation State const [frame, setFrame] = useState(0); const [currentStageIdx, setCurrentStageIdx] = useState(0); // Physics Refs (Mutable state for smooth animation loop) const timeRef = useRef(0); const particlesRef = useRef<{x: number, y: number, z: number, vx: number, vy: number, life: number, color: string}[]>([]); const trailRef = useRef<{x: number, y: number, z: number, color: string}[]>([]); // Derived values for the current frame const stage = STAGES[currentStageIdx]; useEffect(() => { let animationFrameId: number; const loop = () => { // 1. Time Progression timeRef.current += stage.speed; // 2. Stage Logic (Cycle through stages based on time thresholds or manual duration) // Here we simulate a cycle every ~1000 time units roughly, but controlled by logic const cycleTime = timeRef.current % 20; if (cycleTime < 5) setCurrentStageIdx(0); else if (cycleTime < 10) setCurrentStageIdx(1); else if (cycleTime < 14) setCurrentStageIdx(2); else setCurrentStageIdx(3); // 3. Particle System Update // Filter out dead particles particlesRef.current = particlesRef.current.filter(p => p.life > 0); // Move particles particlesRef.current.forEach(p => { p.x += p.vx; p.y += p.vy; p.z -= 2; // Move towards camera slightly or stay relative p.life -= 0.02; }); // 4. Update Frame to trigger React Render setFrame(f => f + 1); animationFrameId = requestAnimationFrame(loop); }; loop(); return () => cancelAnimationFrame(animationFrameId); }, [stage.speed]); // Re-bind if speed changes significantly, though ref handles most // --------------------------------------------------------------------------- // Rendering Calculations // --------------------------------------------------------------------------- // Calculate the position of the two opposing forces // We use a double helix structure that moves "forward" (z-axis) const t = timeRef.current; const cycleProgress = t % 20; // 0 to 20 // Base Spiral Radius let radius = 120; // Dynamic radius breathing based on tension (struggle) if (currentStageIdx === 1) radius = 120 + Math.sin(t * 10) * 40; // Violent shaking if (currentStageIdx === 2) radius = 10 + Math.exp((cycleProgress - 10)/2) * 20; // Implosion then explosion if (currentStageIdx === 3) radius = 150; // Expanded state // Vertical position (simulating ascent) const zBase = 0; // Orb Positions (Thesis & Antithesis) const angle = t * 2; // Rotation speed const orbA = { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius * 0.4, // Flattened for 3D effect z: zBase, color: COLORS.thesis }; const orbB = { x: Math.cos(angle + Math.PI) * radius, // Opposite side y: Math.sin(angle + Math.PI) * radius * 0.4, z: zBase, color: COLORS.antithesis }; // Add trail points if (frame % 2 === 0) { trailRef.current.push({ ...orbA, z: zBase }); trailRef.current.push({ ...orbB, z: zBase }); // Keep trail length manageable if (trailRef.current.length > 200) trailRef.current.splice(0, 2); } // Shift trail Z to simulate camera moving up (or objects moving down) // In this visualization, we keep objects at Z=0 and move trail back const trailRender = trailRef.current.map((p, i) => { // Relative Z based on how old the point is const age = trailRef.current.length - i; const zPos = p.z + age * 8; // Move older points deep into Z return { ...project3D(p.x, p.y, zPos), color: p.color, opacity: Math.max(0, 1 - age / 100) }; }); // Project Orbs const projA = project3D(orbA.x, orbA.y, orbA.z); const projB = project3D(orbB.x, orbB.y, orbB.z); // Generate Sparks/Particles if close or in high energy state if (currentStageIdx === 1 || currentStageIdx === 2) { if (Math.random() > 0.5) { const source = Math.random() > 0.5 ? orbA : orbB; particlesRef.current.push({ x: source.x + (Math.random() - 0.5) * 20, y: source.y + (Math.random() - 0.5) * 20, z: source.z, vx: (Math.random() - 0.5) * 5, vy: (Math.random() - 0.5) * 5, life: 1.0, color: source.color === COLORS.thesis ? COLORS.antithesis : COLORS.thesis // Opposites mix }); } } // Project Particles const projParticles = particlesRef.current.map(p => { const proj = project3D(p.x, p.y, p.z); return { ...proj, life: p.life, color: p.color }; }); // Calculate Connection Line (Tension) const dist = Math.sqrt(Math.pow(orbA.x - orbB.x, 2) + Math.pow(orbA.y - orbB.y, 2)); const tensionOpacity = Math.max(0, 1 - dist / 300); return ( ); }