Fluid Simulation

Fluid Simulation in Javascript using p5js. You can click/touch and drag to create a fire trail. Inspired by The Coding Train. Also check out this great article about fluid simulations by Mike Ash. It's amazing how he broke down the logic and math. Of course, with Javascript we're limited in processing power, so it's not very high resolution but still really cool! It works by depositing "dye" with a density value at a certain (x, y) grid position and then adding some velocity to that area. Then each draw cycle, it performs a series of diffusion, projection, and advection calculations for each grid position, accounting for neighboring densities and velocities, solving linear equations based on the Navier-Stokes equations (which I do not understand). In this simplistic simulation, it's only simulating in 2D, while the equations over on Mike Ash's page are for 3D. Also, it's only simulating incompressible fluid dynamics here. There are a ton of knobs and settings that can be tweaked to get some really interesting effects!

One major problem I have and still can't figure out how to resolve is that at the point of "dye" deposit, there are some flickering pixels that are darker than they should be. I believe it has something to do with velocities being too high and the advection affecting them in an adverse way. Mike's article links to this fire simulation that is really neat. That one is much higher resolution and doesn't suffer from the brightness issue I have. Maybe with some more tweaking I can get a nicer result but I'm pretty happy about this as it is!



Discrete Fourier Transforms

I absolutely love watching visualizations. I've been following various YouTube channels on the topic such as 3Blue1Brown and SmarterEveryDay and thought it was so cool to see waves represented as a series of end-to-end pendulums navigating around a circle. I thought it was even cooler when I found out you can draw any line shape using this method. Thanks to The Coding Train for getting me back into this topic enough to play with my own version of it.

Above is a rough approximation of a square wave, which you can adjust using the slider to a plan sine wave by moving left, or a better square wave by moving right. You can also click and drag in the right partition of the window to draw your own shape! When you release the mouse, it'll start re-drawing it using the Discrete Fourier Transform. Pressing Escape gets you back to the sine wave demo. Neat!



Asteroids!

An arcade classic. My original implementation of this was in Rust using my PixEngine project, so this is a Javascript port using p5js. Came out pretty nice! Many aspects of the program were much easier using p5js and Javascript but I now have plenty of ideas for improvements on my PixEngine. At some point I'd love to add more explosion particles to the ship and asteroids and other features like random UFOs flying around. More to come!



Pong

Javascript Pong! Nothing too fancy here, but some fun competition against either the Computer or another Player. Lots more features could be added for better AI, but it supports touch events so is somewhat mobile friendly! One of my favorite parts of this project was adding a velocity boost to the ball if you hit it while moving up or down. Combine that with the maximum speed a paddle can move up or down and you get some challenging return shots!



Tags

Website, Game, p5js