I'm trying to write a fluid dynamic simulator on the HTML5 canvas. I've found some real damn cool stuff on the internets that always look like a promising starting point, but they are all cell-based and use some crazy math.

I'd like to be able to add arbitrary obstacles (lines of any orientation, circles, etc) to make things more interesting, but I've no idea where do begin.

Does anyone know of some fairly simple equations for fluid simulation that include obstacles of any orientation? Alternatively, could anybody point me towards the math required to take one of the above examples and add obstacles?

I know that this question borders on something I should ask mathoverflow, but they seem more into the theory stuff. Apologies if I'm in the wrong area. I don't really know where to begin - if anyone's worked on fluid simulation with arbitrary obstacles before, I could use some pointers.

Accuracy takes a back seat to simplicity here.

Thanks!

I'm trying to write a fluid dynamic simulator on the HTML5 canvas. I've found some real damn cool stuff on the internets that always look like a promising starting point, but they are all cell-based and use some crazy math.

I'd like to be able to add arbitrary obstacles (lines of any orientation, circles, etc) to make things more interesting, but I've no idea where do begin.

Does anyone know of some fairly simple equations for fluid simulation that include obstacles of any orientation? Alternatively, could anybody point me towards the math required to take one of the above examples and add obstacles?

I know that this question borders on something I should ask mathoverflow, but they seem more into the theory stuff. Apologies if I'm in the wrong area. I don't really know where to begin - if anyone's worked on fluid simulation with arbitrary obstacles before, I could use some pointers.

Accuracy takes a back seat to simplicity here.

Thanks!

• javascript
• html
• canvas
• fluid-dynamics

• 2 I'm sorry, but this is something where the closest you're going to come to doing this without understanding the math, is copying and pasting somebody else's code. – Matti Virkkunen Commented Feb 4, 2011 at 2:38
• physics.weber.edu/schroeder/fluids – Jan Commented Dec 13, 2023 at 12:20
• immersed boundary method is probably the easiest – Tom McLean Commented Apr 19, 2024 at 16:02

6 Answers 6

Fluid dynamics isn't a simple topic. All that "theory" they like over at the other site is just the way this field works.

The simplest example of fluid flow is 2D, incompressible, irrotational, laminar flow. I'd start by looking into that.

But it's not an easy field. There's no "Teach Yourself Computational Fluid Dynamics In Ten Days" books out there.

The best book to read for introduction to graphics-oriented fluid simulation is "Fluid Simulation for Computer Graphics" by Robert Bridson (disclaimer: he was my PhD advisor). http://www.cs.ubc.ca/~rbridson/fluidbook/

Ultimately, there is plenty of math involved, but there's also plenty of code examples to clarify things for the less math-inclined.

It covers mainly the cell-based approach you mentioned. The other main alternative is "Smoothed Particle Hydrodynamics" or SPH. Matthias Muller has some papers about this if you're looking to get started.

If you don't care about real accuracy but just want something swooshy and cool, I developed a very simple pressure-based simulation that delivers a very fast interactive interface in Javascript. You can see it here.

Here is a pretty decent list of everything You need to know about fluid dynamics and simulation: http://www.dgp.toronto.edu/~stam/reality/Research/pub.html

Also you should check this site, where you can find the concrete source code written in Java and transported to Actionscript3. It's pretty documented, so shouldn't be a problem to transport to Javascript.

I have tried that and just to let you know there is an important part of Fluid simulation of any kind called Projection which is computationally extensive even on CPU it takes much and you might well know that Javascript is quite slow for many reasons.

I found pretty simple js code of fluid here:

https://codepen.io/aecend/pen/WbONyK

There no "crazy math":

function update_pressure(cell_data) {

//This calculates the collective pressure on the X axis by summing the surrounding velocities
var pressure_x = (
    cell_data.up_left.xv * 0.5 //Divided in half because it's diagonal
    + cell_data.left.xv
    + cell_data.down_left.xv * 0.5 //Same
    - cell_data.up_right.xv * 0.5 //Same
    - cell_data.right.xv
    - cell_data.down_right.xv * 0.5 //Same
);

//This does the same for the Y axis.
var pressure_y = (
    cell_data.up_left.yv * 0.5
    + cell_data.up.yv
    + cell_data.up_right.yv * 0.5
    - cell_data.down_left.yv * 0.5
    - cell_data.down.yv
    - cell_data.down_right.yv * 0.5
);

//This sets the cell pressure to one-fourth the sum of both axis pressure.
cell_data.pressure = (pressure_x + pressure_y) * 0.25;

}

/* This function updates the velocity value for an individual cell using the velocities of neighboring cells. */ function update_velocity(cell_data) {

/*
This adds one-fourth of the collective pressure from surrounding cells to the 
cell's X axis velocity.
*/
cell_data.xv += (
    cell_data.up_left.pressure * 0.5
    + cell_data.left.pressure
    + cell_data.down_left.pressure * 0.5
    - cell_data.up_right.pressure * 0.5
    - cell_data.right.pressure
    - cell_data.down_right.pressure * 0.5
) * 0.25;

//This does the same for the Y axis.
cell_data.yv += (
    cell_data.up_left.pressure * 0.5
    + cell_data.up.pressure
    + cell_data.up_right.pressure * 0.5
    - cell_data.down_left.pressure * 0.5
    - cell_data.down.pressure
    - cell_data.down_right.pressure * 0.5
) * 0.25;

/*
This slowly decreases the cell's velocity over time so that the fluid stops
if it's left alone.
*/
cell_data.xv *= 0.99;
cell_data.yv *= 0.99;

}