topaz1008 / canvas-fluid-solver

Real-time fluid simulation in Javascript.

Home Page:http://topaz1008.github.io/canvas-fluid-solver

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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)

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 ;)

About

Real-time fluid simulation in Javascript.

http://topaz1008.github.io/canvas-fluid-solver

License:MIT License


Languages

Language:JavaScript 88.2%Language:HTML 8.5%Language:CSS 3.3%