Game of Life
- Watch: http://apps.gamejs.org/gameoflife/2opt/
- Code: https://github.com/oberhamsi/gameoflife-gamejs/
GameJs implementation of Conway's Game of Life http://en.wikipedia.org/wiki/Conway's_Game_of_Life.
The three commits represent the optimization stages this app went through:
Unoptimized simulation & drawing
http://apps.gamejs.org/gameolife/0opt
A two-dimensional array containing booleans holds the cells alive status.
Two nested for loops update the simulation data by creating a new array, checking
each cell's neighbour count every frame. For every cell I draw a gamejs.draw.rect().
At this point, the simulation part was the bottleneck: 30-40% of the CPU time
was spent in countAliveNeighbors(): each cell re-calculates its
neighbours every frame.
Optimized simulation
http://apps.gamejs.org/gameolife/1opt
Usuall, after a short while, the Game of Life simulation consists of mostly stable cells; i.e. cells that don't change their alive status.
Because so few cells change their status at a particular frame it is
cheaper to update the cached neighborCount value of effected cells than to
re-calculate that value every frame.
And indeed, after caching the neighbour count for each cell, the new bottleneck
was the gamejs.draw.rect function taking up 25% of our time. This is the last
function we still call for each cell every frame.
Optimized rendering
http://apps.gamejs.org/gameolife/2opt
gamejs.draw.rect is too slow to be called so often: it does a
canvas context switch, parameter checking & type conversions. If we could
directly set the couple of pixels this cell represents, instead of going
throw the rect layer, we would probably be better off. There are just too
many, mostly small updates to the screen every frame.
gamejs.surfacearray.SurfaceArray is for such cases: the surface's individual
pixels are manipulated with set() and the SurfaceArray later blit on
another Surface with a single gamejs.surfacearray.blitArray call.
Additionally, I added the dirty flag 'isModified' to each cell. This is set if a cell's alive status changes - it isModified isn't set I leave the pixel status to what it is from last frame.