HydroGrid: Interactive Sponge-City Simulator

A blazing-fast, local-first interactive hydrodynamic simulator to design and analyze modern Sponge-City green infrastructure retrofits in real-time.

Comment

Inspiration

Traditional urban centers are built like impermeable concrete basins. During monsoon seasons or severe climate storms, stormwater has nowhere to sink into the earth, resulting in destructive flash floods, overwhelmed sewer systems, and catastrophic property loss.

Yet, when urban planners and civic engineers attempt to evaluate modern "Sponge-City" green infrastructure retrofits (such as biopore tree planting, rain gardens, and permeable brick paving), they are often forced to rely on slow, expensive desktop GIS software or complicated cloud server pipelines that take hours to configure. We were inspired to build something democratic, interactive, and blazing-fast that accessible to anyone right inside their web browser.

What it does

HydroGrid is an interactive, local-first hydrodynamic lab that empowers everyone—from student researchers to city policy-makers—to visually simulate storm runoffs and evaluate Sponge-City surface retrofits in real-time:

  • Interactive Infrastructure Palette: Drag, paint, and redesign urban grids using functional eco-tiles (Rain Gardens, Deep Biopore Forests, and Permeable Pavements) alongside legacy High-Density Towers.
  • Real-Time Storm Modeling: Trigger severe localized monsoons or cloudbursts and observe live telemetry charting surface flooding rates versus ecological soil retention at smooth framerates.
  • Synthesized Acoustics: Employs the native Web Audio API to mathematically generate ambient acoustic rainfall soundwaves and tactile interaction cues—zero external audio .mp3 dependencies required.
  • Instant Policy Assessment: With a single click, HydroGrid generates a formatted, executive Municipal Policy Assessment PDF report inside client memory, detailing estimated asset value preservation and localized flood prevention metrics.

How we built it

In a hackathon landscape dominated by simple wrappers over cloud prompts and heavy databases, HydroGrid was intentionally engineered around foundational computer science algorithms, mathematical physics, and complete Local-First Reliability:

  • Custom Cellular Automata Engine: We built a custom 2D grid simulation engine in TypeScript powered by Von Neumann neighborhood fluid dispersion logic. It calculates water infiltration, surface absorption thresholds, and runoff overflow at 60 FPS directly in browser memory.
  • Modern Frontend Architecture: Built cleanly with Next.js, React, and TypeScript, styled with dark-mode glassmorphism and intuitive visual design systems.
  • Zero-Cloud Architecture: HydroGrid requires zero external backend accounts, zero server database requests, zero API hosting costs, and runs reliably offline.

Challenges we ran into

  • Balancing Frame-Rate Performance with Physics Accuracy: Calculating fluid dispersion equations across interactive grid cells at 60 FPS initially caused slight UI rendering friction. We overcame this by divorcing our simulation computational tick-engine from unnecessary DOM re-renders using optimized React state architectures.
  • Client-Side Document Rendering: Creating a polished, multipage municipal PDF evaluation report straight from client browser memory without relying on heavy cloud backend servers required precise formatting and layout computation math.
  • Synthesized Audio Tuning: Designing algorithmic rainfall acoustic ambiance using native Web Audio API oscillators and white-noise buffers required extensive mathematical frequency shaping to make the audio feel realistic and immersive.

Accomplishments that we're proud of

  • Engineering a blazing-fast, production-ready scientific workbench that operates 100% local-first without requiring server databases or subscription costs.
  • Building an interface where complex environmental physics feels responsive, beautiful, and effortless to explore for everyday citizens and urban engineers alike.
  • Combining fluid simulation, acoustic synthesis, and instant policy document generation into a coherent tool that genuinely bridges academic engineering and actionable public municipal policy!

What we learned

  • We learned how exponentially powerful modern browsers have become for running client-side algorithmic physics natively when simulation loops are structured efficiently.
  • We gained a deep, profound appreciation for urban climate resilience and green "Sponge-City" methodologies, witnessing mathematically how strategically placing rain gardens and permeable surfaces drastically eliminates catastrophic flood risks.

What's next for HydroGrid: Interactive Sponge-City Simulator

  • 3D Topographical Elevation Contours: Integrating LiDAR elevation gradient mapping so simulated stormwater dynamically flows downhill across varied terrain watersheds and ravines.
  • Real GIS Dataset Import: Allowing municipal developers to import actual GeoJSON / OpenStreetMap coordinates to overlay HydroGrid simulation algorithms directly onto real-world municipal masterplans.
  • Community Scenario Marketplace: Enabling peer-to-peer scenario sharing via compressed URL encoding so climatologists, students, and architects worldwide can test and share green design solutions instantly!

Built With

Share this project:

Updates

Submission history