7 ms·

Conway's Game of Life in HTML5

26 points by simonlc 14y ago

almost 14y ago
A couple of fun patterns: .** **. .*. .*. ..* ***
- incision 14y ago
  ***. *..* .*.* ..**
- bobbles 14y ago
  If you put the second one directly next to itself some cool stuff happens
almost 14y ago
To the author: have you tried making the board wrap around instead of having an impenetrable border? In my experience it looks better and keeps interesting things happening longer :)
- simonlc 14y ago
  Sounds like it could be fun, I'll try it out and push the change if it works well. Ultimately I would like to add a way to have an 'infinite' field, but this might be easier to implement. Thanks for the feedback.
sherjilozair 14y ago
It would be easier, if clicking and dragging filled all the cells in the mouse-path with life. Without this, it is very cumbersome to initiate the cells. Great work, btw! Now everyone can play the game of life! :)
- simonlc 14y ago
  I tried making this initially but had trouble. I will try to revisit it soon though.
nthitz 14y ago
A random button would be a fun way to get started.
- simonlc 14y ago
  I think I'll add a 'Create Life' button that adds a random known pattern.
ibotty 14y ago
doesn't work here with firefox 16.0.1 on linux (adblock and noscript is disabled)
- simonlc 14y ago
  I'm on the same version, I haven't tested on Linux. Could the problem be that you aren't creating the initial cells? Try drawing this pattern in the center before clicking start: |0|0|0| |0|_|0| |0|_|0| or |_|0|_| |_|_|0| |0|0|0|
  - dsego 14y ago
    It's somewhat unintuitive. I also had just pressed play at first. Then I read the text and added a bunch of unconnected dots. Nothing. Only after reading your comment above have I understood how it works.
    - simonlc 14y ago
      Yes, I'm working on an update that adds something interesting from the start, and a better explanation of how to play. Thanks for the feedback. :)
DanielRibeiro 14y ago
Another one we discussed a while ago: http://willbailey.name/conway/index.html http://willbailey.name/conway/index.html The discussion: http://news.ycombinator.com/item?id=2555071 http://news.ycombinator.com/item?id=2555071 The annotated source: http://willbailey.name/conway/docs/conway.html http://willbailey.name/conway/docs/conway.html
skeletonjelly 14y ago
Hey I was promised HTML5! What's with all this Javascript?! As a side note, posted on HN the other day: https://www.google.com.au/search?hl=en&q=conways%20game%20of%20life https://www.google.com.au/search?hl=en&q=conways%20game%...
simonlc 14y ago
As per some feedback, I've added a random button, and some initial life, for those that don't know what to create. I'm still working on some of the other things people have suggested: - Saving the state of the 'creation stage' and resetting it when the player clicks a restart button. So you can experiment without having to redraw everything. - Wrapping cells around border (think Super Mario Bros 2.) - Easier drawing, using click and drag. For those that have already tried it will likely need to clear their cache with ctrl+f5.
solipsist 14y ago
The methuselahs[1] always amazed me in Conway's Game of Life. If anyone's interested, here's the population growth (number of live cells in a given state) of the R-pentomino: http://i.imgur.com/lR3i9.png http://i.imgur.com/lR3i9.png [1] http://en.wikipedia.org/wiki/Methuselah_(cellular_automata) http://en.wikipedia.org/wiki/Methuselah_(cellular_automata)
simonsarris 14y ago
Neat! :D Minified JavaScript :( But from one Simon (canvas lover) to another I decided to chewing through the plastic bars of minification to see what was going on. In your loop you're doing: beginPath() arc() fill() You could get away with nothing but arc() and moveTo() in your loop instead and make it a bit more efficient on slower (mobile) devices, because only one new path has to get created. Your moveTo's x coordinate is going to need to be offset by the radius since thats where each starts. So it would look something like this: s.beginPath() loop start s.moveTo(10 * b + 5 + 4, 10 * c + 5) s.arc(10 * b + 5, 10 * c + 5, 4, 0, 2 * Math.PI, d) loop end s.fill() I didn't try out the code, just typing in the open air here, but it should work.
- simonlc 14y ago
  Hi fellow Simon, I do link to the code on github, for anyone that wants to look at it in full. Here it is again: https://gist.github.com/3889013 https://gist.github.com/3889013 That's a great tip! I love little optimizations like that, thanks for the input. :)
- simonlc 14y ago
  I just tried this, and it doesn't work as expected. With a stroke it might, but with fill, it leaks.
jpulgarin 14y ago
My own attempt: http://www.julianpulgarin.com/canvaslife/ http://www.julianpulgarin.com/canvaslife/
- simonlc 14y ago
  That's really cool! Can't stare at it for too long though, the colors are too bold for me. I like the amount of presets you have, I'm new to this game, it's very cool to see all these things. I have a few ideas that I want to try and implement next week, hopefully to differentiate the game's everyone's been sharing.

26 points by simonlc 14y ago

almost 14y ago

A couple of fun patterns: .** **. .*. .*. ..* ***

incision 14y ago
***. *..* .*.* ..**
bobbles 14y ago
If you put the second one directly next to itself some cool stuff happens

almost 14y ago

To the author: have you tried making the board wrap around instead of having an impenetrable border? In my experience it looks better and keeps interesting things happening longer :)

simonlc 14y ago
Sounds like it could be fun, I'll try it out and push the change if it works well. Ultimately I would like to add a way to have an 'infinite' field, but this might be easier to implement. Thanks for the feedback.

sherjilozair 14y ago

It would be easier, if clicking and dragging filled all the cells in the mouse-path with life. Without this, it is very cumbersome to initiate the cells. Great work, btw! Now everyone can play the game of life! :)

simonlc 14y ago
I tried making this initially but had trouble. I will try to revisit it soon though.

nthitz 14y ago

A random button would be a fun way to get started.

simonlc 14y ago
I think I'll add a 'Create Life' button that adds a random known pattern.

ibotty 14y ago

doesn't work here with firefox 16.0.1 on linux (adblock and noscript is disabled)

simonlc 14y ago
I'm on the same version, I haven't tested on Linux. Could the problem be that you aren't creating the initial cells? Try drawing this pattern in the center before clicking start: |0|0|0| |0|_|0| |0|_|0| or |_|0|_| |_|_|0| |0|0|0|
- dsego 14y ago
  It's somewhat unintuitive. I also had just pressed play at first. Then I read the text and added a bunch of unconnected dots. Nothing. Only after reading your comment above have I understood how it works.
  - simonlc 14y ago
    Yes, I'm working on an update that adds something interesting from the start, and a better explanation of how to play. Thanks for the feedback. :)

DanielRibeiro 14y ago

Another one we discussed a while ago: http://willbailey.name/conway/index.html http://willbailey.name/conway/index.html The discussion: http://news.ycombinator.com/item?id=2555071 http://news.ycombinator.com/item?id=2555071 The annotated source: http://willbailey.name/conway/docs/conway.html http://willbailey.name/conway/docs/conway.html

skeletonjelly 14y ago

Hey I was promised HTML5! What's with all this Javascript?! As a side note, posted on HN the other day: https://www.google.com.au/search?hl=en&q=conways%20game%20of%20life https://www.google.com.au/search?hl=en&q=conways%20game%...

simonlc 14y ago

As per some feedback, I've added a random button, and some initial life, for those that don't know what to create. I'm still working on some of the other things people have suggested: - Saving the state of the 'creation stage' and resetting it when the player clicks a restart button. So you can experiment without having to redraw everything. - Wrapping cells around border (think Super Mario Bros 2.) - Easier drawing, using click and drag. For those that have already tried it will likely need to clear their cache with ctrl+f5.

solipsist 14y ago

The methuselahs[1] always amazed me in Conway's Game of Life. If anyone's interested, here's the population growth (number of live cells in a given state) of the R-pentomino: http://i.imgur.com/lR3i9.png http://i.imgur.com/lR3i9.png [1] http://en.wikipedia.org/wiki/Methuselah_(cellular_automata) http://en.wikipedia.org/wiki/Methuselah_(cellular_automata)

simonsarris 14y ago

Neat! :D Minified JavaScript :( But from one Simon (canvas lover) to another I decided to chewing through the plastic bars of minification to see what was going on. In your loop you're doing: beginPath() arc() fill() You could get away with nothing but arc() and moveTo() in your loop instead and make it a bit more efficient on slower (mobile) devices, because only one new path has to get created. Your moveTo's x coordinate is going to need to be offset by the radius since thats where each starts. So it would look something like this: s.beginPath() loop start s.moveTo(10 * b + 5 + 4, 10 * c + 5) s.arc(10 * b + 5, 10 * c + 5, 4, 0, 2 * Math.PI, d) loop end s.fill() I didn't try out the code, just typing in the open air here, but it should work.

simonlc 14y ago
Hi fellow Simon, I do link to the code on github, for anyone that wants to look at it in full. Here it is again: https://gist.github.com/3889013 https://gist.github.com/3889013 That's a great tip! I love little optimizations like that, thanks for the input. :)
simonlc 14y ago
I just tried this, and it doesn't work as expected. With a stroke it might, but with fill, it leaks.

jpulgarin 14y ago

My own attempt: http://www.julianpulgarin.com/canvaslife/ http://www.julianpulgarin.com/canvaslife/

simonlc 14y ago
That's really cool! Can't stare at it for too long though, the colors are too bold for me. I like the amount of presets you have, I'm new to this game, it's very cool to see all these things. I have a few ideas that I want to try and implement next week, hopefully to differentiate the game's everyone's been sharing.