👾👾👾 RXofLife 👾👾👾

Game of life implementation in RXJS using canvas rendering. Could probably be optimized. No for loops.

Baking the cake

npm install
npm run dev # start the dev server

Tweak MAX_CELLS in src/index.js at your own risk to increase the max number of cells to be spawned. It defaults to 100,000.

Chrome might throw a fit and warn you about requestAnimationFrame handler violations - he's a nasty little lad

Deep dive

src   
│
│--  index.js # streams and what not
│--  renderer.js # canvas rendering
│--  utils.js # all of them nasty functions
│--  shapes.js # custom shapes represented as lists of coords

Everything is a stream

Think of the game of life as a stream reducing over itself. The implementation is a little more complicated in order to optimize the rendering, but you get the idea.

------x-----------------------x----------------x->
[ 0, 0, 1, 0,          [ 0, 0, 0, 0,
  0, 0, 1, 0,   --->     0, 1, 1, 1,   --->   ...
  0, 0, 1, 0,            0, 0, 0, 0,
  0, 0, 0, 0 ]           0, 0, 0, 0 ]

Oh and no unit-tests, sooooorry.

"Testing is a poor substitute for proof" - Bartosz Milewski

Todo

• Add dropdown menu to select shapes