Fooling with Fluids

So I've fallen into yet another internet rabbit hole. This time it's Fluid Dynamics. Years ago I came across an interesting fluid effect written in Javascript by Oliver Hunt which, in turn, is based on a great paper titled "Real-Time Fluid Dynamics for Games" by Jos Stam. Since then, several mobile apps and web sites have appeared that showcase the related algorithms, and they are mesmerising. I've listed a few at the end of this article.

Naturally, after fooling around with these websites, my first thought was "Surely someone's written a game with this stuff!". Unfortunately, most of what I came across were screensavers and "stress-release" apps, with the only exception being a "lunar lander" game. Was this because there was an inherent limitation? Can it only be applied to visual effects? Only one way to find out. Try something myself.

So, where to start? "Oliver's simple fluid dynamics simulator" seemed like a good place. It's JavaScript only, has no other dependencies, and runs reasonably on my ancient laptop. Better still, it doesn't use any Frontend framework (apparently it's possible to build stuff without React 😉). The code resides in three files with the heavy mathematical lifting going on in "pressure.js" and the UI split over "index.html" and "pressure-display.js". There's no public repository for the code as I suspect it was written before such services were available. If you'd like to see the code you'll have to save it off the site.

Without knowing what kind of game to write, I proceeded to combine the JavaScript in "index.html" and "pressure-display.js" into a single Web Component. In case it's not obvious by now, I too will be sticking with JavaScript and the Vanilla JS framework. Why not TypeScript and React? Because I intend to come out of this rabbit hole with my sanity intact. Besides, Vanilla JS is a consistent winner on The Benchmark. The resulting game code is available on Github.

The game is, of course, ludicrously "simple". All you have to do is herd the cats into the central building. You do this by swiping currents with the mouse or via touch, until time runs out. Oliver's code exposes a couple of functions to extract the "velocity" at a given point on the surface of the fluid so I coupled this to a few floating cats (as one does) and voilà, Nauti-Cats. Oh, also, the code was converted to be less monochromatic and more Technicolor and, to be truthful, it's not really playable on small phone screens.

In conclusion, it would seem there's no reason why someone couldn't get filthy rich writing the next Floaty Bird, though, a more complex game world would help. To this end we have Dan Schroeder's fluid dynamics simulation which allows one to build barriers against which the fluid may flow. Additionally, there's the game Interplanetary Postal Service which shows how this might work and I'd love to incorporate these effects into more mundane websites, though they couldn't be triggered by mouse hovering as this would exclude all touch-based devices. Perhaps "waves" could emanate from buttons and menu selections and bounce off other content? The rabbit hole deepens and I haven't even finished reading Stam's original research paper.

Truly there are some incredibly talented people in this world and it's wonderful that idiots like me can, so easily, access and build on their work. It's both inspiring and humbling. If I had half the ability of some of these folk, I'd have completed my humble goal of world domination and decadent leisure by now.