Fluid simulation · mimo-v2.5-pro

The user wants a real-time fluid simulation on a full-screen canvas. This is a classic WebGL-based Navier-Stokes fluid simulation. I'll create a single self-contained HTML file with:

1. A full-screen canvas
2. WebGL-based fluid simulation using the Navier-Stokes equations
3. Mouse interaction that adds dye and velocity to the fluid
4. Colorful swirling effects

I'll implement a GPU-accelerated fluid simulation using WebGL shaders. The key components are:
- Advection (moving quantities along the velocity field)
- Diffusion (spreading out quantities)
- Pressure projection (making the velocity field divergence-free)
- External forces (mouse input)

Let me write a complete implementation based on Jos Stam's stable fluids approach, similar to what's used in popular demos like the one by Pavel Dobryakov.

This will be a WebGL implementation with ping-pong framebuffers for the simulation steps.

I'll build a GPU-accelerated Navier-Stokes fluid simulation using WebGL with ping-pong framebuffers. This is a substantial piece of code:

The file is created successfully. Let me review it to make sure everything is correct.

The file is ready at `/workspace/index.html` (23 KB). Here's what it implements: ### Fluid Simulation Architecture **GPU-accelerated Navier-Stokes solver** using WebGL with ping-pong framebuffers: 1. **Vorticity confinement** — Computes curl of the velocity field, then injects force to amplify swirling eddies (controlled by `CURL = 30`) 2. **Pressure projection** — Jacobi iteration (20 passes) to make the velocity field divergence-free (incompressible) 3. **Advection** — Semi-Lagrangian method moves both velocity and dye along the flow with dissipation 4. **External forces** — Mouse/touch dragging injects velocity + colored dye via Gaussian splats ### Interaction - **Click & drag** (or touch & drag) to push fluid and paint dye - Each new drag gesture gets a **random vivid color** from HSV palette - On load, **5–10 random splats** kick off the simulation with initial turbulence ### Rendering - Dye textures are tone-mapped (Reinhard) with gamma boost for vibrant, glowing colors - Supports both WebGL 2 and WebGL 1 fallback with half-float textures - Full-screen responsive canvas that reinitializes on resize