A Fluid Simulation in Javascript for the HTML5 Canvas

Show FPS

I wrote a small iPhone app a little while ago called FireWater, for which I developed a simple pressure-based fluid simulation.

I thought it would be fun to port it to the HTML5 Canvas in Javascript to learn the Canvas myself and teach a little about writing simulations.

If your browser supports the HTML5 Canvas element (Chrome, Safari, Firefox, Opera, IE9) you should see the canvas above filled with black. Once you have a black canvas, click and drag on it to see it in action.

The GitHub repository for the source can be found here.

5 thoughts on “A Fluid Simulation in Javascript for the HTML5 Canvas

  1. Hi there,
    When I read your answer at (http://stackoverflow.com/a/8302204/1032052), I thought that I finally luckily found a one page simple code for a simple simulation. To me over one page is complex. Could I ask you write for me a one page or less explanation of stages that you have done in your code. Note I am not interested in math behind so Wikipedia links etc are not useful. I mean just explanation of your code in one page. For example: having a grid of mxn initialize them zero for velocity matrix etc etc. Hope you’ll get what I look for. I code in Python and if I got the idea I want to have a simulation of water passing a fractured rock.
    Thanks
    Supporter

    • The technique really is pretty simple. I have meant to write it up in a more step-by-step way for a while now. Thanks for the spur to do it. Now that I have at least one data point that somebody is interested, I think I’ll start. The code is longer than one page if it’s structured decently, but I’m pretty sure you could condense it into one incomprehensible page. The math involved is really simple (pretty much a little addition and multiplication), but I’d urge you not to be uninterested in math generally if you’re interested in simulations and graphics. There’s no reason the technique here wouldn’t be fast enough implemented in Python. Should work fine. Stay tuned.

  2. AWESOME work bud!!! Can I buy you a beer? Thanks for sharing you wonderful work to the world. People like you are what makes this world a better place. I’m also interest in your break down explanation of the math behind it. Again, thanks!!!