DEV Community

Cover image for It's alive! Simulate organisms with Conway's game of life on a canvas 🧫🔋

It's alive! Simulate organisms with Conway's game of life on a canvas 🧫🔋

Pascal Thormeier on July 21, 2021

Today, we create living organisms! We'll kind of, at least. It's the next best thing to becoming a 21st century digital "Web Dev Doctor Frankenstei...
Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Always great fun to play with conways game of life. However, as with everything, there is always someone who does it bigger and better...(skip to 1:08 for actual video)

One minor bug is if you press "reset" before pressing "stop" the canvas will still try and update and so drawing becomes difficult. Plus grid lines would be great when drawing, but that is a fun one for others to try and add!

Well worth a ❤ and a 🦄!

Collapse
 
thormeier profile image
Pascal Thormeier

Holy moly, that's an amazing video! Thank you for sharing!

Reminds of this one, where someone actually managed to code the Game of Life into the Game of Life:

Yes, it does have it's bugs right now, and I will fix those in the Codepen at least in the next few days! :)

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

Yeah I was in two minds whether to link to that one instead, but the music makes the first one feel epic! 😋🤣

I think the second one would melt my CPU (especially as it is so warm in the UK at the moment!)

Thread Thread
 
thormeier profile image
Pascal Thormeier

There's So. Damn. Many. Interesting videos about GOL, I could seriously watch them all day long :D I think building the GOL-in-GOL version would alone take ages, let alone figuring it all out without any help...

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Have you seen the FOL computer that outputs the Fibonacci sequence? RAM, CPU etc, just makes me realise how little I know 🤣😜

Collapse
 
squarebat profile image
Khadija Sidhpuri

I first learned about Game of Life in this video by veritasium. Following that I simulated it for a hackathon. It was so cool to see simulate cool rifle and complex simulators using it. Plam to simulate a 3d version when I have a cpu capable of doing that :D

Collapse
 
thormeier profile image
Pascal Thormeier

I love Veritasium, been following that channel for years now! I haven't heard about any 3D version of GOL yet, would adapt the rules to fit the amount of neighboring cells? You definitely have to make a post about it once it's done!

Collapse
 
squarebat profile image
Khadija Sidhpuri

Haven't figured out the rules of a 3D GoL just yet, but if I ever implement it, if I were to do it, I'd start with the same rules as GoL, but in 3D space. Will be interesting to see the results. Will definitely write a post if I implement it :D

Thread Thread
 
thormeier profile image
Pascal Thormeier

I wonder what a 3D glider would look like... I could imagine that it's a lot more complex to achieve the same behaviour as in 2D space. So many things to explore, can't wait for your article! :D

Thread Thread
 
squarebat profile image
Khadija Sidhpuri

Ahaha, hopefully I do get around to implement it someday

Collapse
 
eljayadobe profile image
Eljay-Adobe

When discussing Conway's Game of Life, I always like to provide the APL version of the code. For contrast with the language that is being presented, in this case in contrast with JavaScript (and HTML and CSS).

APL version of Conway's Game of Life.
life ← {⊃1 ⍵ ∨.∧ 3 4 = +/ +⌿ ¯1 0 1 ∘.⊖ ¯1 0 1 ⌽¨ ⊂⍵}

At the age of 82, Dr. John Horton Conway passed away on 2020-Apr-11, from COVID-19.

For an high-level introduction to APL, the article a Glimpse of Heaven by Bernard Legrand.

Collapse
 
thormeier profile image
Pascal Thormeier

I haven't used APL before and it does look interesting indeed. Thank you for sharing this implementation! An interesting video you might like is Dr. Conway talking about the Game of Life himself, over at Numberphile. He said he used to even hate it, because he didn't find it all too interesting and it was overshadowing much more important things.

Collapse
 
esger profile image
Esger Jellema • Edited

I built this many times before, trying to speed things up. This is my latest version ashware.nl/fast-life/
The code can be found via my homepage.

Collapse
 
aleksandrhovhannisyan profile image
Aleksandr Hovhannisyan

Beautiful animations!

Collapse
 
esger profile image
Esger Jellema • Edited

If you like what you see, have a look at ashware.nl/buglife/# :)

Collapse
 
thormeier profile image
Pascal Thormeier

Oh wow! I love how the animation also allows to see previous generations. What were the challenges you faced during this implementation?

Collapse
 
esger profile image
Esger Jellema

Thank you! Here my main challenge was trying to speed things up, again :)
So I built an AureliaJs web app and a web worker to do the heavy lifting.
The 'trails' were quite simple to accomplish: just draw the new generation with opacity < 1 in order to faint all 'old' cells a bit every generation.
PS. You can even change the rules of life while it's running and change various other settings as well.

Collapse
 
katyi profile image
Alexandra Egorova

The best explanation with code, thanks!👩🏻‍💻