The past couple weeks I've been fascinated by the html5 canvas element. My interest in graphics goes decades back, yet only recent experimentation with CoffeeScript showed me how fun and addicting the peanut butter and jelly combination of client side scripting and html5 canvas are to work with.
I can't imagine smoothly rendering multiple canvas elements simultaneously without a form of parallelism, lower level code, or dramatically shrinking each canvas. It turns out there are quite a few tricks I can try to speed up both individual and parallel rendering2.
Life in 2D
The world of 2D pixel graphics unerringly shot my attention like an arrow to Conway's game of life. Conway's game set the stage for cellular automata, a broader field of self replicating patterns (see otomata for a music variant). A simple set of rules and initial state gives rise to complex self perpetuating patterns.
The universe of the Game of Life is an infinite two-dimensional orthogonal grid of square cells, each of which is in one of two possible states, live or dead. Every cell interacts with its eight neighbours, which are the cells that are horizontally, vertically, or diagonally adjacent. At each step in time, the following transitions occur:
- Any live cell with fewer than two live neighbours dies, as if caused by under-population.
- Any live cell with two or three live neighbours lives on to the next generation.
- Any live cell with more than three live neighbours dies, as if by overcrowding.
- Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.
Life with CoffeeScript
The relevant coffeescript source:
- Server side CoffeeScript in Henri Bergius' gist (bottom of post) on the Falsy Values node.js tutorials is a strong contender, but requires a couple of additional steps to dive in (installing node/npm)
- Web Workers are one way to perform calculations leveraging multiple cpus. Each completed canvas would need to be handled by a separate thread, and the initial worker API limited their ability to modify DOM elements. The good news is the browser vendors have augmented the API to allow imagedata to be manipulated by workers, but it'll take some tuning to leverage efficiently (limit data copying, distribute processing to workers)
Pixel manipulation source
Additional references: stack question, mandlebrot renderer and this comment