How does this fluid simulator work?

It keeps a square grid of cells with a velocity on each cell face and red, green and blue dye at each cell center. Each step moves the velocity and the dye along the flow by tracing back one timestep and reading the old field there (semi-Lagrangian advection), multiplies both by the dissipation, and runs your chosen number of Jacobi pressure iterations to remove part of the flow squeezing into or out of each cell. The edges are closed walls. It is stylized numerical art, not a calibrated physics model.

What do dissipation, pressure iterations and grid size change?

Dissipation multiplies every velocity and dye value once per step: at 1 nothing fades on purpose, and at 0.99 dye of 1.0 sitting in still fluid falls to 0.9044 after 10 steps. More pressure iterations remove more of the flow squeezing into or out of cells, at the cost of more time per step; on a 64 grid, 20 iterations cut the divergence of a test field to about 24% of its start, and 40 cut it further. A larger grid shows finer detail and takes longer per step.

Why does the dye blur and fade?

Dissipation below 1 fades dye and motion on purpose, a little every step. Separately, each step reads the old field at points between cells and blends the four nearest values, which softens sharp edges a little every time, so fine detail slowly blurs even at a dissipation of 1. The total amount of dye is not kept exactly.

Is it a physically accurate fluid dynamics simulation?

No. It moves dye with a simplified model of incompressible flow in grid units for art and play: there is no viscosity, density or temperature setting, speeds are capped at 10 cells a step, and each pressure solve stops after at most 40 iterations. Use it to explore how dye moves with a flow, not to design or predict anything real.

What does the seed do?

The seed places the jets that Splash from seed adds: their positions, directions and colors all come from it, so the same seed on the same grid always makes the same splash, and without a saved snapshot the page opens with the splash from the current seed (3 until you change it). The simulation itself has no randomness: the same field, settings and strokes give the same numbers every time.

Fluid Dye Playground

Paint colored dye into a square fluid grid and drag through it to push the flow, then watch the dye swirl along and fade at the dissipation you choose. Pick a grid from 64 to 256 cells a side and 10 to 40 pressure iterations, play or pause, and step one fixed 1/60 s at a time. Every brush has a keyboard equivalent, a text summary under the canvas describes where the dye is and how fast it moves, and you can capture a PNG, download the settings as preset JSON, or keep a paused snapshot in this browser. The simulation has no randomness of its own: the same field, settings and strokes always give the same numbers.

Your input

Brush

Dye color

Custom color

Brush radius 2 to 40 cellsForce 0 to 1

Grid 64 to 256 cells a sideDissipation per step 0.9 to 1Pressure iterations 10 to 40Seed 0 to 4,294,967,295

Result

Dye field, 128 by 128 cells, step 0 (0.00 s of model time), paused. Dye shows in 6% of cells, most of it in the center; the most common dye color is lime, in 60% of dyed cells. Fastest flow 3.96 cells a step, heading up-right, in the middle right.

Keyboard push

Grid cells: 16,384
Model time: 0.00 s (0 steps)
State: Paused, finite
Timestep: 1/60 s fixed

Save and export

Open preset JSON

Download PNG saves the field as it is now, smoothed to 1,024 by 1,024 pixels whatever the grid. The preset JSON holds the grid, dissipation, pressure iterations, seed and brush, and Open preset JSON reads one back and keeps the dye, resampled to the grid in the preset if it differs. Save snapshot pauses the field and keeps every value, the step count and the settings in this browser; it reopens paused on your next visit, and Restore snapshot brings it back at any time.

The field in numbers

Share of cells showing dye (brightest channel above 0.05) and the mean flow speed in each ninth of the field. The table follows the field a few times a second while it runs and after every step or stroke.

Dye and flow by region
Rows	Left	Center	Right
Top	7% dye, 0.14 cells a step	12% dye, 0.22 cells a step	1% dye, 0.01 cells a step
Middle	0% dye, 0.00 cells a step	13% dye, 0.21 cells a step	10% dye, 0.19 cells a step
Bottom	0% dye, 0.00 cells a step	8% dye, 0.16 cells a step	0% dye, 0.00 cells a step

Worked cases

Empty fieldzero velocity and dye, grid 64, 60 steps, no injection
Computing on this device...
Dissipationdye 1.0 everywhere, dissipation 0.99, 10 steps, still fluid
Computing on this device...
Steppaused at step 240, press Step once
Computing on this device...
Projectiona pure pressure-gradient field, grid 64, 20 iterations
Computing on this device...

Drag on the canvas to paint; on a touch screen, drag a finger. With a keyboard, Tab to the canvas, move the crosshair with the arrow keys (2 cells a press, 8 with Shift) and press Space or Enter to inject at it; with a force brush, the push goes the way you last moved. The Keyboard push buttons and Inject at crosshair do the same from outside the canvas. Painting works while the field runs or is paused, and on a device that asks for reduced motion the field opens paused.

How it moves. The field is a square grid with velocities on the cell faces and dye at the cell centers, inside closed walls. Each step is a fixed 1/60 s of model time: the velocity is carried along itself by tracing each face back one timestep and reading the old field there (semi-Lagrangian advection) and scaled by the dissipation; then the chosen number of Jacobi pressure iterations, starting from the pressure the last step reached, removes part of the flow into and out of each cell; then the dye is carried by the new velocity and scaled by the dissipation. Speeds are capped at 10 cells a step, and a step that would produce a value that is not a finite number is refused, leaving the last good step. While it runs the page takes at most one step per screen frame, so on a slow device model time runs slower than the clock.

Common questions

How does this fluid simulator work?: It keeps a square grid of cells with a velocity on each cell face and red, green and blue dye at each cell center. Each step moves the velocity and the dye along the flow by tracing back one timestep and reading the old field there (semi-Lagrangian advection), multiplies both by the dissipation, and runs your chosen number of Jacobi pressure iterations to remove part of the flow squeezing into or out of each cell. The edges are closed walls. It is stylized numerical art, not a calibrated physics model.
What do dissipation, pressure iterations and grid size change?: Dissipation multiplies every velocity and dye value once per step: at 1 nothing fades on purpose, and at 0.99 dye of 1.0 sitting in still fluid falls to 0.9044 after 10 steps. More pressure iterations remove more of the flow squeezing into or out of cells, at the cost of more time per step; on a 64 grid, 20 iterations cut the divergence of a test field to about 24% of its start, and 40 cut it further. A larger grid shows finer detail and takes longer per step.
Can I use it with a keyboard or on a phone?: Yes. On a touch screen, drag a finger across the canvas. With a keyboard, Tab to the canvas, move the crosshair with the arrow keys (2 cells a press, 8 with Shift) and press Space or Enter to inject at it; with a force brush, the push goes the way you last moved. The Keyboard push buttons and Inject at crosshair do the same without the canvas, and the text summary under it describes where the dye is and how fast it moves.
Can I save what I make?: Download PNG saves the field as it is now, smoothed to 1,024 by 1,024 pixels. Download preset JSON saves the grid, dissipation, pressure iterations, seed and brush settings, and Open preset JSON reads them back and keeps the dye, resampled to the preset's grid if it differs. Save snapshot pauses the field and keeps every value, the step count and the settings in this browser; the page reopens it paused on your next visit, and Restore snapshot brings it back. A snapshot of a 256 grid is about 2 MB, which some browsers refuse to store; the page tells you if that happens.
Why does the dye blur and fade?: Dissipation below 1 fades dye and motion on purpose, a little every step. Separately, each step reads the old field at points between cells and blends the four nearest values, which softens sharp edges a little every time, so fine detail slowly blurs even at a dissipation of 1. The total amount of dye is not kept exactly.
Is it a physically accurate fluid dynamics simulation?: No. It moves dye with a simplified model of incompressible flow in grid units for art and play: there is no viscosity, density or temperature setting, speeds are capped at 10 cells a step, and each pressure solve stops after at most 40 iterations. Use it to explore how dye moves with a flow, not to design or predict anything real.
What does the seed do?: The seed places the jets that Splash from seed adds: their positions, directions and colors all come from it, so the same seed on the same grid always makes the same splash, and without a saved snapshot the page opens with the splash from the current seed (3 until you change it). The simulation itself has no randomness: the same field, settings and strokes give the same numbers every time.

Stylized two-dimensional numerical art, not physically calibrated fluid dynamics, engineering design or exact mass conservation. Semi-Lagrangian advection and iterative projection introduce numerical diffusion; different GPUs can produce slightly different pixels.