Life is a Highway

The game of life is hard to play
I’m gonna lose it anyway
The losing card I’ll someday lay
So this is all I have to say

Theme from M*A*S*H (Suicide is Painless)

Wow. That was bleak. But really, the game of life isn’t so hard to play. In fact, it pretty much plays itself.

John Conway’s Game of Life – you all know what it is. If you don’t, then know this:

  • It is a simple cellular automaton simulation. (A grid of squares which are either “alive” or “dead”, and which may change state from one generation to the next).
  • It consists of 4 simple rules (however this has been expanded on):
  1. A live cell with less than 2 live neighbours will die.
  2. A live cell with 2 or 3 live neighbours will continue to live.
  3. A live cell with more than 3 live neighbours will die.
  4. A dead cell with exactly 3 live neighbours will come to life.

The combined effect of these simple rules results in a chaotic system that is mesmerising to watch. Some persistent entities may form, and at the simplest level they can be either static or periodic. However, there are some much more complicated structures that have been discovered, such as patterns that can “shoot” out small “gliders” like a gun. For some illustrative examples, see the Wikipedia Entry.

I have been fascinated by the simplistic yet chaotic nature of the game of life since I first heard of it, and have been wanting to implement my own version for some time – to Play God if you will. Thus I thought it would be interesting to try and implement a simple version as a way of learning JavaScript and the WebGL library, Three.js.

Going from C++ to JS takes a little getting used to – I have used Lua, so scripting isn’t completely foreign to me. However, I found this Guide to be a decent overview of JS features, and of course this JS Reference for clarification.

Then there is Three.js itself. Again, there are some good “Getting Started” guides (such as this one), and of course the official reference documentation is invaluable. However, it is also helpful to investigate example scripts that come with the full source release to see how things should be done.

Alright, show me the good stuff already!

Grid Life in Action

You can see my resulting attempt live here, and the source code is available through inspection or on GitHub – as gridLife.js and gridLife1.html.

Some things to expand on:

  • Get rid of the lo-fi html input forms and buttons for parameter control – instead using something fancy like everyone else who uses three.js: dat-gui.
  • Add some perspective, lighting, shadow, and cubes to justify actually using webGL.
  • Experiment with other rules.

Keep on livin’.