HTML5 Canvas Fluid Solver

A Simple fluid solver implementation in javascript.

A live demo can be found HERE.

The demo uses lil-gui for the GUI.

Simulates the Navier–Stokes equations for incompressible fluids.

Largely based on Jos Stam's paper Real-Time Fluid Dynamics for Games.

The density field is rendered on an off-screen bitmap and blit'ed to the canvas for performance reasons.

The code is commented as best I could where ever I felt it was necessary.

The best reference is the original paper which is still online and contains a very clear explanation of the solver and methods it uses. It also contains a complete C implementation of the solver.

If the original paper ever goes offline I have a copy of it here.

Other implementations I've looked at while making this. (these links are very old and are dead and/or insecure so proceed at you own risk)

• http://www.multires.caltech.edu/teaching/demos/java/stablefluids.htm
• http://blog.inspirit.ru/fluidsolver-as3-port-of-msafluid/
• http://http.developer.nvidia.com/GPUGems/gpugems_ch38.html

Running

Just open index.html in your browser or see the live demo HERE.

Wishlist

• Add internal grid boundaries.
• Maybe think about considering thinking about a 3D implementation ;)