If you like math, you should enjoy [kynd’s] page about simulating fluid in p5.js. You might still enjoy the pretty colors and shapes if you aren’t into math. What’s scary is that the page promises to have as little math as possible, but there’s still quite a bit. Of course, we are sure you could go even deeper down the rabbit hole.

The algorithm’s core is a pair of 2D arrays representing cells that comprise the display area. One array holds the color of the cell, while another holds a velocity vector of the fluid in the cell. A vector, of course, has both a magnitude and a direction.

Of course, there is more to it than that. The cells interpolate, but the animated graphics help explain it all. By the time you get to the momentum and divergence, you’ll need to remember a few things about partial differential equations. Luckily, they can be approximated numerically, so you can also read the code and forget about it.

If you want even deeper explanations, [kynd] suggests [Jamie Wong’s] page, which uses WebGL and even lets you interact with the fluid. If you want to know what the Navier-Stokes equations are, these pages will help you a lot.

While the pictures are pretty, fluid simulation has a lot of practical applications. Or, you can just use the kitchen sink. You can even do simulations with ASCII output if you like.