'use client'; import React, { useState, useEffect, useRef, useMemo } from 'react'; // ---------------------------------------------------------------------- // CONFIGURATION & UTILS // ---------------------------------------------------------------------- const VIEW_WIDTH = 1000; const VIEW_HEIGHT = 600; const GRID_SIZE = 6; const TILE_WIDTH = 80; const TILE_HEIGHT = 40; // Isometric squash factor const Z_SCALE = 12; // Height multiplier // Synthetic DEM Data (Elevation) // Designed to form a valley flowing towards [4, 2] and [5, 2] const DEM_DATA = [ [12, 10, 8, 8, 10, 12], [11, 9, 7, 7, 9, 11], [10, 7, 5, 5, 7, 10], [9, 6, 4, 4, 6, 9], [8, 5, 3, 3, 5, 8], [7, 4, 2, 4, 4, 7], ]; // Determine Flow Direction ( Steepest Descent ) // Returns { dr, dc } for each cell. // If local min, returns {0,0}. const calculateFlowDirections = (dem) => { const directions = []; const rows = dem.length; const cols = dem[0].length; for (let r = 0; r < rows; r++) { const rowDirs = []; for (let c = 0; c < cols; c++) { let minElev = dem[r][c]; let bestMove = { dr: 0, dc: 0 }; // Check 8 neighbors for (let dr = -1; dr <= 1; dr++) { for (let dc = -1; dc <= 1; dc++) { if (dr === 0 && dc === 0) continue; const nr = r + dr; const nc = c + dc; if (nr >= 0 && nr < rows && nc >= 0 && nc < cols) { if (dem[nr][nc] < minElev) { minElev = dem[nr][nc]; bestMove = { dr, dc }; } } } } rowDirs.push(bestMove); } directions.push(rowDirs); } return directions; }; // Isometric Projection Helper const toIso = (r, c, z) => { const x = (c - r) * TILE_WIDTH * 0.5 + VIEW_WIDTH * 0.5; const y = (c + r) * TILE_HEIGHT * 0.5 + VIEW_HEIGHT * 0.25 - z * Z_SCALE; return { x, y }; }; // ---------------------------------------------------------------------- // COMPONENT // ---------------------------------------------------------------------- export default function GISWaterAnalysis() { const [phase, setPhase] = useState(0); // 0:DEM, 1:Direction, 2:Accum, 3:Watershed const [accumGrid, setAccumGrid] = useState(Array(GRID_SIZE).fill(0).map(() => Array(GRID_SIZE).fill(0))); const [particles, setParticles] = useState([]); const requestRef = useRef(); const flowDirs = useMemo(() => calculateFlowDirections(DEM_DATA), []); // Pour Point location (The "Exit" of the watershed) const pourPoint = { r: 5, c: 2 }; // Animation Sequence Controller useEffect(() => { const sequence = async () => { // Phase 0: DEM (Start) setPhase(0); setAccumGrid(Array(GRID_SIZE).fill(0).map(() => Array(GRID_SIZE).fill(0))); setParticles([]); await wait(3000); // Phase 1: Flow Direction setPhase(1); await wait(3000); // Phase 2: Flow Accumulation (Rain) setPhase(2); // Spawn particles logic is handled in the render loop effect below await wait(6000); // Phase 3: Watershed Delineation setPhase(3); await wait(5000); // Loop sequence(); }; sequence(); return () => {}; // Cleanup not strictly needed for this auto-loop }, []); // Particle System & Accumulation Logic useEffect(() => { let lastTime = performance.now(); let spawnTimer = 0; const animate = (time) => { const dt = time - lastTime; lastTime = time; if (phase === 2) { // Spawn particles randomly on high ground spawnTimer += dt; if (spawnTimer > 100) { // Spawn every 100ms spawnTimer = 0; const r = Math.floor(Math.random() * GRID_SIZE); const c = Math.floor(Math.random() * GRID_SIZE); // Only spawn if it's not the sink if (DEM_DATA[r][c] > 2) { setParticles(prev => [...prev, { r, c, tr: r, tc: c, // target row/col progress: 0, id: Math.random() }]); } } // Move particles setParticles(prev => { const nextParticles = []; const gridUpdates = []; // capture where particles finish a cell prev.forEach(p => { // Move progress p.progress += dt * 0.002; // Speed if (p.progress >= 1) { // Reached center of current cell // Update accumulation for this cell gridUpdates.push({ r: p.tr, c: p.tc }); // Find next cell const move = flowDirs[p.tr][p.tc]; if (move.dr === 0 && move.dc === 0) { // Stuck / Sink -> Remove particle } else { // Move to next p.r = p.tr; p.c = p.tc; p.tr += move.dr; p.tc += move.dc; p.progress = 0; nextParticles.push(p); } } else { nextParticles.push(p); } }); // Batch update accumulation grid if (gridUpdates.length > 0) { setAccumGrid(oldGrid => { const newGrid = oldGrid.map(row => [...row]); gridUpdates.forEach(({r, c}) => { newGrid[r][c] += 1; }); return newGrid; }); } return nextParticles; }); } else if (phase !== 2) { setParticles([]); } requestRef.current = requestAnimationFrame(animate); }; requestRef.current = requestAnimationFrame(animate); return () => cancelAnimationFrame(requestRef.current); }, [phase, flowDirs]); const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms)); // Determine if a cell is part of the watershed for the pour point // (Simplified: In this synthetic data, basically everything flows to the bottom middle except maybe corners if flat) // For visual effect, we highlight the main valley. const isWatershed = (r, c) => { if (phase < 3) return false; // Trace down. If it hits pourPoint, it's watershed. let currR = r, currC = c; let safe = 0; while(safe < 20) { if (currR === pourPoint.r && currC === pourPoint.c) return true; const move = flowDirs[currR][currC]; if (move.dr === 0 && move.dc === 0) break; currR += move.dr; currC += move.dc; safe++; } return false; }; // ---------------------------------------------------------------------- // RENDER HELPERS // ---------------------------------------------------------------------- return ( ); }