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.
Implementing translations and adaptions of graphical JavaScript snippets has proven to be an easy transition into the basics of 2D web graphics. In fact the process has been so much fun that I defy you to devise a more entertaining method of learning CoffeeScript1.
After mimicking a few intriguing examples, I contemplated how to combine the effects without overburdening the browser. Each small script pushes even Chromium's JavaScript interpreter to its limits. The analogy of each canvas layer to a separate music track lead me to consider pre-rendered gifs, but that implementation would lose any interactive features. Alternatively I could write all the image updates to the same canvas element, and render it to the browser once.
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.
http://www.youtube.com/watch?v=FdMzngWchDk
Life with CoffeeScript
My latest conversion from JavaScript is a non-canvas table based implementation of life from Conway's Game of Life FAQ. When time allows I'll add an interactive canvas version. Click the image below to see it:
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