Pong Wars & Other Visualisations

Koen van Gilst

Koen van Gilst / March 8, 2024

3 min read––– views

Recently I've been having a lot of fun building visualizations in JavaScript using just the canvas and some HTML & CSS. Here's an overview of some of the things I made.

Particle Life

This weekend's meditative coding session was dedicated to recreating Jeffery Ventrella's "Particle Life". As you can imagine, I had a lot of fun with it. So strange that I've never encountered this algorithm before!

particle life screenshot

Dancing Mosquitoes

I created this on a dreary winter day. The rain and lack of sunlight got me thinking about hot summer evenings & the mesmerizing mosquito dance. This creation tries to capture that feeling.

dancing mosquitoes screenshot

Pong Wars

It's the eternal battle between day and night, good and evil. I made this on a Friday afternoon as a short break from my other side project which started to feel a lot like work. After creating it I posted a video on Mastodon & Twitter and it became somewhat of an internet sensation. With currently more than 4 million views and 40.000 likes it's by far the most popular thing I ever did on the internet.

I first saw the idea for this here, but it appears to be older than that. There's more information on the history in the Hacknernews discussion. The colors are based on the Mindful Palette by Alex Cristache.

pong wars screenshot

Purple Rain

With Valentine’s Day around the corner, I created Purple Rain. It's a simple visualization of raindrops falling down the screen. The palette is based on the Mindful Palette Nr. 38 by Alex Cristache.

purple rain screenshot

Voronoi Virus

When I was a kid in high school, a friend and I would exchange floppy disks with demos on them. At that time I was happy to be able to draw a couple of circles on the screen so I was very impressed when he showed me his demo. It was similar to this and it even had movement. I couldn't believe he was able to do that (I still think he had help from his father!).

voronoi virus screenshot

Rock Paper Scissors

Not sure where this is going, but I like the way it looks already. The demo simulates cellular growth, following the rules of rock, paper and scissors. To make it a bit more interesting I've made it possible for older cells to withstand a few attacks by enemies.

rock paper scissors screenshot