Javascript 2D Fluid / Turbulence Sim

by Dean Alex 2013


Move mouse to disrupt. Click to emit.

Reset Velocities
Emitter
Frame Dragging



How it works:

The Set-up
1. Make a basic particle simulator (the sort of thing you'd use for fireworks / explosions / rain / snow). This is an array of particles, with each particle having a position (x,y) and velocity (x,y)
2. Make a vector field (think of it as a height map, with x and y steepness for each grid square). This is a 2d array of vectors, with each element having a velocity (x,y)

Feedback Loop
3. Make the particle velocities update the vector field (add their x,y velocity to the x,y velocity of the grid square they are in).
4. Make the vectors update the particle velocity (add the x,y velocity of the grid square to any particles within it).
5. Propogate velocity through the vector field (make each grid square take the average vectors of its neighbouring squares).

Visuals
1. Make the particles leave a trail (Store the old x,y position of each particle before setting the new x,y position, every frame. Draw a line between them).
2. Colour based on the speed (Use the distance moved from old x,y position to new x,y position as the lookup index for an array of colors).



Source Code:
fluid.js