Fluid simulation · gemini-3.1-flash-lite-preview
Output generated Cost / run $0.0054 Runtime 11.1s
Prompt for this run
Create a real-time fluid simulation on a full-screen canvas where dragging the mouse pushes swirling colored dye through the fluid.
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
METRICS
Transcript · 4 messages
Create a real-time fluid simulation on a full-screen canvas where dragging the mouse pushes swirling colored dye through the fluid.
thinking
**Developing the Project Scope** Okay, I'm defining the scope, beginning with the foundational goal: building a real-time fluid sim within a single HTML file. Key features are shaping up, with a full-screen canvas, interactive mouse control for dye injection, and visually appealing swirling colors as primary elements. Initial constraints limit dependencies to that single HTML file. **Refining the Implementation Strategy** I'm now zeroing in on the core implementation. I've ruled out external dependencies; this has to be self-contained within index.html. I'm leaning toward a grid-based 2D solver, perhaps something close to Stable Fluids, and I'll include the 2D grid structure in JS to allow for dye advection, updating velocity from mouse input and applying decay to the dye. I've designed the necessary HTML and CSS layout. I am leaning toward a full-screen canvas with no scrollbars.
index.html (4854 bytes)Successfully wrote 4854 bytes to index.html
The real-time fluid simulation has been created in `index.html`. It uses a grid-based stable fluids algorithm (Navier-Stokes) to solve velocity and density fields, rendered with a procedural approach to create the "swirling dye" effect. You can open `index.html` in any modern web browser to see the simulation. Use your mouse to click and drag across the screen to inject both density (color) and velocity (force) into the fluid.