Time Flies & 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.

Time Flies

Insects, time and how it always seems to fly by too fast. Original idea by Menno Anker

time flies screenshot

Particle Life

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

particle life screenshot

Aarde

Old school artificial life. Inspired by Tierra, in a much simplified form.

The programming language in which the life forms are written has 5 instructions:

  • S - Program start
  • E - Program end
  • F - Find location to copy to
  • C - Copy to location
  • J - Jump to start of program

Every time a code is copied a mutation can occur. We start with the following simple life form:

SFCJE

The rest is evolution.

aarde 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.

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