Conways Game of Life

I first saw Conway's Game of Life on a documentary called What we still don't know. It encapsulated for me why we will never fully solve "Chaos". Just three simple rules resulted in a huge variation of outcomes based on different starting points. Complex objects like spaceships, gliders and guns can be formed by juxtaposing the cells in a certain way.
The best implementation of the game that I've seen on the web is Paul Callaghans Java Applet. It's very fast, and he's managed to find a way of having an unlimited board. Two others of note, which are both written in Javascript, are Arto Bendikens canvas implementation, and Carl Abelson's implementation in HTML/DOM.
But what I was looking for was something where I could make my own patterns, test them, and save them if they were any good. I was also looking for something to program in Processing.js, John Resigs Javascript abstraction, just to get to grips with it, and I thought it would make a great little project for that.
Getting it up and running in Processing.js was very easy, I went for the pure Javascript implementation but the end result for the 50x40 grid that I was doing was a little slow, so I thought I would try it in Canvas proper, and that was a little faster, but I still wasn't happy, especially since it couldn't be rendered in IE, unless I also used IECanvas from Google.
So I tried using a HTML/DOM table and switching classes on the table cells to get the alive/dead effect. This was much faster than the Canvas implementation. Here's a comparison of all the major browsers that I could test on my 3 year old Laptop.

Firefox3	Chrome b1	Opera 9.52	IE7	Minefield
30-35ms	15-20ms but buggy	20-30ms	3000-3500ms	20-25ms

That's not a typo, on MSIE it was taking over 3 seconds per frame, compared to Minefield's 25ms per frame, 120 times faster. We're not talking fancy uses of CSS/DOM methods here, IE 4 could render this.
Also, just for an exercise, I tried other ways to render the frames. Direct rendering using no CSS, setting width, height, and bgColor directly in the cell - slower, reverse while loops - slightly slower, surprisingly, and a different algorithm using an if block on the rules, which was also slightly slower.
If anyone can come up with a faster way, I'd love to hear it, as it's been a great learning experience for me so far. All the drawing work is done in just one function, and the script is well commented.

Everything is in a single .htm file, so it will work without any setting up. The most awkward part is saving your patterns, because Javascript cannot access the local file system. So the way to do it, is to select Make your own from the dropdown box, click on the cells to build your pattern. If you make a mistake, click on the cell again, and it will clear it.
When you are happy, try it out to make sure it does what you want, and then fill in the form at the bottom, and submit. This will return a string in the textarea, which you just copy and then add it to the pattern object directly in the script. You will then be able to select this pattern from the dropdown box, and see it working. You can download the file here

Add comments here
Name:
Email:
URL:
Comment: