Hacker News new | past | comments | ask | show | jobs | submit login
Conway's Game of Life in HTML5 canvas (julianpulgarin.com)
63 points by jpulgarin on March 2, 2011 | hide | past | favorite | 23 comments



You should add some buttons to populate the grid with some of the more well known of the game's denizens. Perhaps let the user select from a list of patterns, then insert that pattern when the grid is clicked instead of toggling an individual cell.

See the excellent http://www.conwaylife.com/wiki/ for some ideas. That site also has its own RLE syntax for defining the patterns, so maybe you could crawl it and allow the user to use any of the 600-odd patterns they have on there.

That site brings back good memories from uni, I spent a long time converting iterations of GoL grids into MIDI notes and piping them to synths to make generative acid house.


I had this feature in mind since I started working on this, and it's definitely what I will implement next. I will also add the ability to resize the grid to fit some of the larger patterns.

This will probably require a rewrite of the current "nextGen()" algorithm, perhaps a quadtree implementation in Javascript or implementing some of the optimizations suggested in Chapters 17 and 18 of Michael Abrash's Graphics Programmer's Black Book.

By the way, you should post some of those MIDIs!


There were never any MIDI files, the notes were generated as raw bits and sent straight into ableton live, which is a full blown software music studio. The notes then drove a softsynth which noodled away over various drum loops playing in live.

Because I had no desire to work out how to send clock data back from live into my hacked bit of ruby code, I simply sent MIDI clock signals from my code along with the note data. This meant that the iterations of the GoL were controlling the speed of live's sequencer.

As my code was very naive, it simply did its calculations, sent the notes and then did sleep(0.5) or something, then started the next iteration. This, along with ruby's garbage collection meant that the time taken for each iteration, and the delay between each MIDI clock signal, varied considerably.

All of this added up to a situation where the master clock in live was constantly wandering up and down by about 20bpm either way. Now remember I said that live was playing the drum tracks underneath? Live timestretches audio to the BPM of the master clock, so the whole track was constantly wavering in tempo. The whole thing sounded like an early 90s warehouse party aboard a pitching and rolling ship. Which is incidentally how I usually feel at warehouse parties.

At some point I plan to post the music with the code to my blog, along with all the other wacky shit I did at uni.


If you'll be adding a pre-population feature, I'd love to see this as one of the choices: http://en.wikipedia.org/wiki/Ulam_spiral



I’ve been always wondering, with all this variety, can the Game of Life model such a simple process as a circular wave? I can’t find anything about that.


"It is possible to build a pattern that acts like a finite state machine connected to two counters. This has the same computational power as a universal Turing machine, so the Game of Life is theoretically as powerful as any computer with unlimited memory and no time constraints: it is Turing complete."

http://en.wikipedia.org/wiki/Conways_Game_of_Life

Also see, "a Turing Machine implemented in Conway's Game of Life":

http://rendell-attic.org/gol/tm.htm


I love the fact it's an 'around the world' canvas. Most implementations I've played around with use an expanding or fixed width one instead...it makes some combinations truly amazing.

For example, the acorn pattern(http://en.wikipedia.org/wiki/File:Game_of_life_acorn.svg) is a lot more impressive, because the gliders spawned travel across the screen and interact with the solid blocks. Empirically, it seems to make the pattern last a lot longer!


Ugh, you know you're too immersed in startup culture when your first reaction to this title is "Ron Conway's Game of Life?!"

Very cool app though!


Absolutely fantastic! I've never seen an interactive game of life before. It's a revelation. To be able insert a single pixel and see what happens is really, really cool.


I really like the interactions. I created an HTML5 Game of Life example using Canvas and Web Workers several months ago.

http://twoguysarguing.wordpress.com/2010/11/04/html-5-game-o...

http://benjaminplee.github.com/HTLM5-GoL/

I was planning on adding interactions like yours but never got around to it. Nice work!


Here's mine: http://www.mrspeaker.net/dev/canvas/gameOfLife.html - (this should be the official "here's mine" thread!) No web workers, but it has some interaction.

The funniest thing about GOL is that the harder you try to make things live, quicker you kill it off. How can 4 simple rules develop such poignant insights?!


Continuing with the here's mine: http://gkatsev.com/gameoflife.js/index.html I wrote this a few months ago. It's fairly similar to the post's one but I have a few presets as well as the ability to share.

Also, as mentioned above about the MIDI I plan on making it into a step sequencer using the new js audio APIs but have not had a chance to do so yet.

The code is available on bitbucket: http://bitbucket.org/gkatsev/gameoflife.js


here's mine:

http://michaelglass.github.com/conway-dark-roast/

and here's my coworkers much more fleshed out version:

http://life.michaelgeraci.com

why? nice excuse to learn canvas, coffeescript, tdd in javascript. certainly can do it with divs (in fact mpg did it that way first).



Why use canvas for this when plain divs could do the job more easily and more efficiently, with wider browser compatibility? Simply for buzzword compliance?

When we developed swarmation.com we started with canvas and later switched to plain divs. Not only did we manage to throw out most of the code in the switch, things also ran much more smoothly and worked in IE as well.

Don't get me wrong, I'm all for cool new tech, and canvas definitely has its uses. But we should be helping people recognize when plain HTML or SVG are more appropriate, rather than being buzzword-driven.


Or this is how they chose to learn to work with canvas a bit more and wanted to share their accomplishments?


Because manipulating a document with thousands of divs is really slow? Seriously. Like most people in this thread I've made 'life' on the web with both divs and canvas. The implementation using canvas is significantly faster and can even handle huge grids.


Game of Life seems to have become the new "Hello World" for trying to learn canvas. I wrote one as my first project for canvas/JavaScript.


Heh, the very first JavaScript app I wrote was Conway's Game of Life... in HTML <div> tags.


Red and green might not have been the best choice. 10% of males are red-green colourblind.


Well, there went my morning...


Green on red... wow :)




Consider applying for YC's Spring batch! Applications are open till Feb 11.

Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: