Game of life in simplest terms

Hi there!

I was always compelled to implement Conway’s game of life. What a blunt start of the story 😆.

© goes to Wikipedia

But yeah, I’ve always was astonished of how quite simple starting conditions and equally simple set of rules can lead to the ever growing complexity and vivid fluctuations of something… living. Or as close to living as squares can resemble 🤖🤖🤖.

Unlike some of my other stories, this one would not be of a challenge persistently overcome. It was just three hours of coding and one of debugging, and yes, one more implementation of Game of life was born. The world definitely needs more of that 😂.

What I really needed to consider is:

1. With what technology to implement it.
2. What basic algorithm to choose.

Well, being web developer slightly tilted to front-end, it’s no wonder that canvas I chose for the implementation, was, well… <canvas>. No pun was intended, of course.

So now to basic algo. It can be described as this: state1 => state2. And each point from state1 is transformed to point in state2 by following set of rules (© goes to Wikipedia):

1. Any live cell with fewer than two live neighbours dies, as if caused by underpopulation.
2. Any live cell with two or three live neighbours lives on to the next generation.
3. Any live cell with more than three live neighbours dies, as if by overpopulation.
4. Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.

And to convince you further that exercise was more fun that challenging, here’s some essential pieces of code.

Here you can see how each cell modifies it’s future state based on 8 surrounding cells, walked clock-wise.

And in here, final state is drawn point by point, resulting in good old O(nm) complexity, where m = 8, but imagine three-dimensional field, where m would equal to 26, and n-dimensional... mmm… I can feel a new challenge… 🚀.

Anyways, here’s a few screenshots (too lazy for a GIF)…

Game of life in the beggining

And in the end

…and the link to fancy 404 page with game of life running. And, of course, the source code.

I’m Alexey Komov — front-end developer and web enthusiast, interested in core and definitive Web things. Please share your thoughts about article. And you may contact me here.