Conway's Game of Life in HTML5 canvas

http://www.julianpulgarin.com/canvaslife/

by jpulgarin • 15 years ago

63 23 15 years ago

sawyer• 15 years ago

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!

JonnieCache2• 15 years ago

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.

hendler• 15 years ago

Wikipedia entry is quite good:

http://en.wikipedia.org/wiki/Conway%27s_Game_of_Life

jpulgarin• 15 years ago

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!

JonnieCache2• 15 years ago

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.

sarumanatee• 15 years ago

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

pixcavator• 15 years ago

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.

gnosis• 15 years ago

"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

chrismealy• 15 years ago

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.

benjaminplee• 15 years ago

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!

mrspeaker• 15 years ago

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?!

gkatsev• 15 years ago

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

commieneko• 15 years ago

Well, there went my morning...

steadicat• 15 years ago

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.

sukuriant• 15 years ago

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

etcet• 15 years ago

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.

MichaelGlass• 15 years ago

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).

hitonagashi• 15 years ago

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!

robrho• 15 years ago

Here's my effort: http://rob.rho.org.uk/2010/06/life.html (GitHub project: https://github.com/robhague/CanvasLife)

tlrobinson• 15 years ago

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

sili• 15 years ago

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.

brianwillis• 15 years ago

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

huhtenberg• 15 years ago

Green on red... wow :)

Conway's Game of Life in HTML5 canvas

Related Stories