Hi everybody - I recently spent some time creating a cluster growth animation, and it looks as follows (see live version + deconstruction):

This was a fun animation to create for several reasons. One reason was that it gave me a break from writing about algorithms, but the biggest reason was that it gave me an excuse to play with creating a retro-themed animation after my last chat with Helena about sci-fi user interfaces.

With many animations, the primary source of inspiration is physics. So much is focused on how something moves - its acceleration, timing curves, collisions, gravity, and so on. With this cluster growth animation, the source was biological cell growth similar to how you may see bacteria growing in a petri dish:

There is a starting point where a few cluster of cells are introduced. Over a period of time, these cluster of cells will multiply and grow outward. How they do so is a bit random. It’s never a predictable pattern.

With this cluster growth animation, I tried to mimic as many of the biological cell growth processes as possible while trying to build it in a performant way using vanilla JavaScript instead of ThreeJS or other more common libraries for something like this.

The full article deconstructs how I created this animation in more detail, but one technique I used is to have an intermediate in-memory representation of our cells in a 2D array:

This 2D array would then map to the actual pixels drawn on the screen. By separating the data from the final visuals, beyond maximizing performance, we have a lot of flexibility in how we draw the final cells. The cells could be drawn on the canvas as in this implementation. They could also be drawn on the DOM. They can even be represented as a physical grid of flippable tiles.

Customization FTW! 😱
With just a few tweaks of some values here and there, there is a massive amount of control we have in customizing how the cells grow and how they look output looks.

This Twitter / X thread shows what a few of these variations look like!

I hope you enjoyed this look at how to take something that occurs all the time in nature and turn it into something we can visualize using code. There is a chance I may do a live coding session where I build this live, so let me know if that would be of interest to you.

If you have any questions or comments, the easiest way to reach me is by posting in this forum thread dedicated to the Cluster Growth Animation or by replying to this email.

Cheers,
Kirupa 😇