

Conway's Game of Life in HTML5 - simonlc
http://simon.lc/game-of-life/

======
almost
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
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.

------
simonsarris
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
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>

That's a great tip! I love little optimizations like that, thanks for the
input. :)

------
sherjilozair
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
I tried making this initially but had trouble. I will try to revisit it soon
though.

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

------
DanielRibeiro
Another one we discussed a while ago:

<http://willbailey.name/conway/index.html>

The discussion: <http://news.ycombinator.com/item?id=2555071>

The annotated source: <http://willbailey.name/conway/docs/conway.html>

------
solipsist
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>

[1] <http://en.wikipedia.org/wiki/Methuselah_(cellular_automata)>

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

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

------
skeletonjelly
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%...](https://www.google.com.au/search?hl=en&q=conways%20game%20of%20life)

------
jpulgarin
My own attempt: <http://www.julianpulgarin.com/canvaslife/>

~~~
simonlc
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.

------
almost
A couple of fun patterns:

    
    
        .**
        **.
        .*.
    
    
        .*.
        ..*
        ***

~~~
bobbles
If you put the second one directly next to itself some cool stuff happens

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

~~~
simonlc
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
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
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. :)

