Conway's Game of Life

Note: this post was migrated from my old Tumblr-backed blog

I’ve been doing a lot of dabbling with Javascript lately; primarily focusing on working with the canvas element. It’s some pretty sweet stuff and really reminds me of my early pixel manipulation tasks in C++ and REALbasic in the late 90s.

I had written a version of Conway’s Game of Life in C++ on my mac at the time (7600/132mhz) and was surprised at how fast it ran. I figured I could build something similar in JS using the canvas element and direct pixel manipulation using getImageData() and putImageData().

My initial tests ran ok in Chrome, but ran pretty terrible in Safari. I’m pretty much limited to a 200px x 200px world plane and I’m trying to come up with ways of speeding it up. I’ve done a bit of multithreaded programming in the past, but never really did much with it since I don’t typically write things that would benefit from it, but this seemed like a perfect situation, assuming that JS can simulate threads with the setTimeout() function and that these “threads” would run across my processors.

My method of multithreading was to create a function that iterates over a section of the world plane. Since the image data is a one-dimensional array of pixels, this is done by simply creating a function that processes a cycle on a specific slice of the pixel data. When each chunk finishes, it updates an array (thread_status) by appending a ’true’ to the end. If thread_status.length is equal to the number of threads, then it draws the current graphic to the canvas using putImageData(), resets thread_status and starts the render() function over again.

I was quite surprised when these additions offered absolutely zero benefit. I suppose I’ll have to figure out better ways of iterating over the world plane for each cycle of life. I’m sure there are better ways of doing it than I’m doing and if I had access to a vector unit or some matrix math libraries, it might seriously speed things up, too.

single-threaded code can be found at:

multithreaded branch:

demo:

in the demo, you can change the number of threads by changing the threads GET variable in the URL.