Very cool, and nice code. Just to be pedantic (I mean it in the best way), this isn't quite literate programming.
A very basic explanation would be: literate programming is the result of writing a program in a sort of psuedo-code that explains the program in the order of the programmer's thoughts, and then running it through a compiler of sorts which "untangles" the literate program and outputs machine-readable code.
The linked post is nicely formatted and well-documented "regular" code.
Thanks for pointing that out! I had assumed that Literate Programming was simply any programming with a focus on human readability. I've changed the title of the post and credited you at the bottom.
The simplest version (and by my yard-stick is the de-facto measure of "readability") I've seen was at Pycon 2012 (http://azd325.github.com/Python/2012/03/23/pycon-2012-stop-w... around 17:30). The main take away that is demonstrated is that classes aren't necessary to write this program but it's the first thing most programmers reach for when implementing it.
Another thing I find a lot these days are an abundance of comments that explain what the code already explains. Some of the comments are good in this example, but many of them explain what I would know if I just read the code.
However, I do like the use of color! A great demonstration. Good work. :)
I took your comment to heart and removed most of the comments in the source. I found the video inspiring (and infuriating) - just more proof that I'm a long way from unlearning my OO design tendencies. To start, I made the Neighborhood class a function instead. Thanks for sharing.
I've been working on a sculpture project[1] based on cellular automaton for the past two semesters. It's not exactly conway's game of life as I'm mostly focused on polygonal cells. Hardware wise it's mostly just LEDs with shift registers and an ATtiny85 but the code[2] might be interesting to some, in particular dealing with figuring out what cells are and aren't neighbors when you have an ambiguous layout. I've also put together an Android simulator[3] I use for exploring ideas that defines designs using JSON but I've put a lot less work into it.
The logical simplicity of the rules makes it impossible to resist implementation, it seems :) I love being able to draw on your version - I missed out on implementing drag events.
I notice that you separate your "views" (this.cells) from your "models" (this.grid). This seems like a good idea from an MVC perspective, but I would worry that I'm forgetting to keep them in-sync in all cases.
somewhat unrelated: The most beautiful implementation of life that I have ever seen is this 7 line Clojure one. It really turned me on to the value of using data structures that match the problem well.
Another idea for colors is to use progressively more transparent pixels for older generations. Add a bit of a hue shift and it renders some really beautiful decay visualizations.
Bravo on making it work with WebGL! It's super smooth.
I see we both went with variable names like 'up' and 'left' for the subscripts in the "neighbor count" code. I'm always looking for ways to sidestep numerical array indexing because it's such a fertile ground for bugs. For example, I find it really hard to look at:
var up = i-1>0 ? -1 + i : -1 + h;
...and tell if it's correct. I used a mod_wrap function instead, which is an implementation of Python-like modulo, which 'wraps' negative numbers to the top of the range.
A very basic explanation would be: literate programming is the result of writing a program in a sort of psuedo-code that explains the program in the order of the programmer's thoughts, and then running it through a compiler of sorts which "untangles" the literate program and outputs machine-readable code.
The linked post is nicely formatted and well-documented "regular" code.