https://github.com/topaz1008/canvas-fluid-solver

Real-time fluid simulation in Javascript.
https://github.com/topaz1008/canvas-fluid-solver

canvas fluid fluid-dynamics fluid-simulation fluid-solver physics simulation

Last synced: about 12 hours ago
JSON representation

Real-time fluid simulation in Javascript.

• Host: GitHub
• URL: https://github.com/topaz1008/canvas-fluid-solver
• Owner: topaz1008
• License: mit
• Created: 2014-07-01T19:00:34.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2024-02-19T07:40:51.000Z (8 months ago)
• Last Synced: 2024-03-15T19:33:14.320Z (7 months ago)
• Topics: canvas, fluid, fluid-dynamics, fluid-simulation, fluid-solver, physics, simulation
• Language: JavaScript
• Homepage: http://topaz1008.github.io/canvas-fluid-solver
• Size: 1.02 MB
• Stars: 49
• Watchers: 2
• Forks: 6
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
HTML5 Canvas Fluid Solver

==========================

A Simple fluid solver implementation in javascript.

A live demo can be found [HERE](https://topaz1008.github.io/canvas-fluid-solver).

The demo uses [lil-gui](https://github.com/georgealways/lil-gui) for the GUI.

Simulates the [Navier–Stokes](https://en.wikipedia.org/wiki/Navier-Stokes_equations) equations for incompressible fluids.

Largely based on Jos Stam's paper [Real-Time Fluid Dynamics for Games](https://www.dgp.toronto.edu/people/stam/reality/Research/pdf/GDC03.pdf).

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](https://github.com/topaz1008/canvas-fluid-solver/blob/master/doc/GDC03.pdf).

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://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](https://topaz1008.github.io/canvas-fluid-solver).

Wishlist

---------

* Add internal grid boundaries.

* Maybe think about considering thinking about a 3D implementation ;)