Coding Challenge #85: The Game of Life

Подписаться 1,7 млн

Просмотров 680 тыс.

50% 1

In this coding challenge, I attempt to code Conway’s Game of Life cellular automata simulation in JavaScript using the p5.js library. Code: thecodingtrain.com/challenges...
🕹️ p5.js Web Editor Sketch: editor.p5js.org/codingtrain/s...
🎥 Next video: • Coding Challenge #86: ...
🎥 All videos: • Coding Challenges
References:
🗄 Conway's Game of Life on Wikipedia: en.wikipedia.org/wiki/Conway%...
📓 Mathematical Games: www.ibiblio.org/lifepatterns/o...
Videos:
🚂 My Video on The Game of Life: • 7.3: The Game of Life ...
🚂 2D Arrays in JavaScript: • 9.15: 2D Arrays in Jav...
🚂 The Modulo Operator with Golan Levin: • Guest Tutorial #6: The...
🔴 Coding Train Live 108: • Coding Train Live 108:... t=8518s
Related Coding Challenges:
🚂 #89 Langton's Ant: • Coding Challenge #89: ...
🚂 #107 Sandpiles: • Coding Challenge #107:...
🚂 #102 2D Water Ripple: • Coding Challenge 102: ...
Timestamps:
0:00 Introduction
2:00 Generations
7:18 make2DArray()
17:20 Compute Next Generation
21:19 countNeighbors()
23:14 Deal with Edges
25:44 Implement Rules
30:00 Implement Wraparound with Modulus
36:13 Variations
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: / discord
💖 Membership: ru-vid.comjoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#gameoflife #cellularautomata #modulus #javascript #p5js

Опубликовано:

2 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 507

@diegoc3749 5 лет назад

Im really glad you do all your code from scratch without internal functions or third party libraries. It really helps understand the logic involved.

@garrybogdanho 4 года назад

except p5

@NStripleseven 3 года назад

@Stephen Davies Yeah but that’s not the logic-y bit

@adrian5b 2 года назад

@@NStripleseven I think rendering it's the harder part of the project. The code for the cell logic is quite simple.

@NStripleseven 2 года назад

@@adrian5b that’s true, but it’s not the interesting bit algorithm-wise.

@darcipeeps 4 года назад

Rest In Peace, John Conway 💜

@kavinbharathi 3 года назад

Wait is he dead...what kind of Dwayne Johnson am I living under...

@dreamy6517 3 года назад

2020 suck huh?

@Falcrist 3 года назад

He was getting pretty reclusive in his old age. Maybe he only had one neighbor.

@jaystee1427 3 года назад

I m here

@Brahvim 3 года назад

@@kavinbharathi xDDD

@samstephens7388 6 лет назад

if you already know the rules of Life, skip to 7:09

@Jordan_Dossou 5 лет назад

ehh I'm not sure

@TheSentientCloud 5 лет назад

Thanks man!

@Pradeep.Poonia 4 года назад

What are the 'rules of life'?

@Zephyr-tg9hu 4 года назад

@@Pradeep.Poonia Well, just watch the video and don't skip past 7:09, heh.

@qislegit.donttrustthemedia6232 4 года назад

@@Pradeep.Poonia Eat sleep code

@TheFeralRobot 6 лет назад

This is the best coding channel ever!

@zhabiboss Год назад

This is one of if not the best examples of how random and interesting an idea can be with such simple rules

@StanleySeow 6 лет назад

I really love the “game of life” , it on my Mac screen saver too, really enjoy the way you explain how the code works, checking the rules and then wrap around logic. Pls keep up the great work!!!

@kenhaley4 6 лет назад

Dan, maybe someone already told you this, but I couldn't help noticing... In the live video last Friday you laughed at the suggestion of the Game of Life on a torus. But, ironically, this is exactly what you've done. Think about it... Wrapping left to right is equivalent to making the flat map into a cylinder. And then wrapping top to bottom takes that cylinder and bends it around so it forms a torus! The only thing you didn't do is render it in 3D. Now, that would be a coding challenge. :)

@TheCodingTrain 6 лет назад

Yes, yes, yes, this is true! Thanks for the reminder, I love the idea of actually trying to render it on a torus in 3D!

@rachelzimet8310 6 лет назад

That makes sense since you can think about a long rectangle being curled into a hollow cylinder, and then the circles on the end curled around to touch each other - and since opposing edges on a rectangle are the same length by definition, this will all match up exactly. The only problem is when it's too square, it'll have to be stretched a lot...

@stephaneportron9807 6 лет назад

You know what would be even nicer? By changing the direction in which you wrap you could simulate the Game of Life on a Mobius strip, or even on a Klein bottle! *Laughs Mathematically* simple.wikipedia.org/wiki/Klein_bottle simple.wikipedia.org/wiki/M%C3%B6bius_strip

@dandanthedandan7558 6 лет назад

Rory Slegtenhorst So laggy... lol

@Eirikhalvard 6 лет назад

If anyone is interested, i made exactly this! I put it up on this website: eirik.tech/Game-of-life/index.html Feel free to check out the source code too: github.com/eirikhalvard/game-of-life

@clivemitchell3229 2 года назад

Thanks for this - nice to see it done in a modern language! I wrote this in BASIC on an 8-bit computer many moons ago, but each iteration took more than a minute, so I rewrote it to use a single 2-D grid. The state was held in the least significant bit, i.e. odd values were alive, evens were dead. I started with only 0 or 1 values, then scanned the array. If a cell was odd, I added 2 to each of the surrounding 8 cells, otherwise I skipped, saving a lot of processing time. Next I scanned the grid and if a cell contained 5, 6 or 7 the cell was alive so I made it 1, otherwise it was dead so I made it 0. This change got the processing time for each iteration down to a few seconds.

@SylouCool Год назад

Nice to see the old tricks to save memory and processing! Even if i never had to deal with those early computer ;-) i do try those kind of tricks (i've done a bit af asm for game cheat or modding, i think its there i learn to work on bits). On mine like you i only consider alive cell but instead of adding 2 to there own value i left shift their dedicated neighbour value (firstly set to 1) so i could use 2 mask of rule (each bit corresponding to an amount of neighbours with the least significant meaning 0) so with the same binary AND between those value i can compute next state no matter what the rules are. and since left shifting and binary AND are really easy for computer it's a bit faster than adding and testing (but apparently not in js... still quite the same ^^) Here is my implementation but don't mind the code it's too messy (implementing stuff over stuff over stuff ... etc ... one day i will refactor it ^^) vassilyd.github.io/GameOfLife/ (And by checking that 4 year old code i realised that what i was saying before was only idea i was about to implement... but never done it... right now it still work by incrementing, but do use a binary AND for test) I do like the 4,5,6 birth and 2,3,4,5 survive rules, thing turn into linear stable shape (i mean only horizontal, vertical and diagonal line) for the outside with unstable kinda glowing inner + those shape slowly grow and merge until they have only those linear outside line, i call this mode "crystal mode" ^^ (one day i should also implement a selection option of some nice rules like this one)

@waltercisneros9535 3 года назад

Perfect for training list, of course there´s easier ways to do it, but there are also people who need these kind of videos, this guy is th Bob Ross of coding

@Krondelo 6 лет назад

YES! I've been wanting this, thank you Dan!

@Calz20Videos 6 лет назад

When the cells just stay in one spot, We know they have gotten too smart, We know that they are building civilization, And we know they are going to war.

@funkyb6598 6 лет назад

haha. Then I guess the most intelligent cells are those that join together to form a square? That seemed to be the most common "stable" shape. (That is if I did it right : (

@Calz20Videos 6 лет назад

Funky B they have built walls of fortification. We must bow down to our new leaders.

@cubemage3336 5 лет назад

Holy mother of god...

@fairydragonbreath9192 6 лет назад

Thanks for uploading, and showing. This is helping me understand the fun aspects of coding. Trying to land a job, no luck yet.

@dvendator 6 лет назад

I am working on mine.And I was Looking for some resource and then your video poped up in the notification.You always Help.Thanks

@gummansgubbe6225 6 лет назад

Great! I really hope I will remember the modulus 'trick' if I ever need it. Awesome.

@TheCodingTrain 6 лет назад

Thanks for watching!

@riguidixrodriguez1090 4 года назад

I really love the way you work, the charisma, the good vibes all you make it's so good enough to make it interesting and incredible... I really enjoy your videos :-)

@peopletakepicturesofeachother Год назад

You are one of the best teachers of my life. Thanks for all the videos and all the inspiration.

@cookiecrumbler758 5 месяцев назад

love your energy man ^^

@DasHemdchen Год назад

Thank you, Daniel, another instructive and fun video. You‘re such an inspiration to me. Please keep on. I „co-programmed“ Asteroids following your suggestions, now I‘m working on Solitaire, learning the hard way how the loop() function is actually an interrupt, thus it is difficult to expect some variables to be set by functions called AFTER the loop() call😂

@mixxer0512 6 лет назад

The video is really helpful for me because this game was a few years ago on the matura exam in Poland so I enjoy watching you code the game. Greetings from Poland, dude :D

@snapman218 11 месяцев назад

Imagine if our universe was just some alien making a tutorial.

@BoognishMonsterWeen 6 лет назад

Love your vids, thank you so much for your service here. Once I heard you started with lingo like myself it all made sense why your methods clicked so well. cheers

@florianbernard2525 4 года назад

dude you're so awsome, thx a lot for this

@12Q46HPRN 3 года назад

Outstanding! I have been fascinated by the Game Of Life for decades. I've wanted to try my hand at coding it, but always wondered how to get it from one generation to the next. I'll try making each cell an object and see what happens!!!

@nathanlewis8217 5 лет назад

Thank you so much for this! I was able to take your video tutorial and transfer the knowledge from it into Processing’s python library. I successfully coded the GameOfLife on my own! :)

@Calidrelle 6 лет назад

Wonderfull 35:46, the final music note just when the game fall into a stable state !!!! That was written ;) Nice job, Dan !!

@Melloboros 6 лет назад

Sooo weird - I just discovered this channel with your old CA videos a few days ago and then here's this new video. My current Introduction to Programming/Java project is to make a tic tac toe game, and that seems so much less daunting after soaking in all of this witchery. lol I'm quite keen on trying to tackle The Game of Life. It's so helpful seeing a professional programmer's process step-by-step like this. Thanks!

@letsgocamping88 6 лет назад

Every now and again Dan will check his super special ceiling notes.

@eahemming Год назад

I admire your teaching. Thanks for all the videos you make

@NicoA47 6 лет назад

These coding challenges are awesome.

@LifEsYouTubeChannel 6 лет назад

Daniel! Thanks for teaching me the moulus trick :) Glad you're well and of course... Welcome back ;)

@annahri 6 лет назад

I finally made my own on C#! Thank you so much! You're the best!

@Manzana1C 2 года назад

Took me a few months of very interrupted work, but i got it working just with the processing reference and my knowledge of classes. It's super inefficient, but it works beautifully.

@stevema2 3 года назад

perfect! next video, how to build skynet 🤷‍♂️👍

@jermainebrayne437 6 лет назад

I had a whiteboard interview today with this challenge, so coincidental!

@Pradeep.Poonia 4 года назад

this was asked in interview? for what role?

@Mayank-mf7xr 4 года назад

bruh what?

@nanda_8 3 года назад

Why did they ask this?? Did they ask to code the above thing??

@Hasan.T 3 года назад

@@nanda_8 I'm a software developer and I was asked to do this as a coding challenge in one of the stages of applying for the position.

@josiahprice3344 6 лет назад

Love your videos man! Very informative and helpful👍

@nathanc11 6 лет назад

I love you videos. It inspired me to code in JavaScript. Keep it up

@kieran.stafford 6 лет назад

Many thanks Dan and happy new year to you. Really looking forward to your continuation of machine learning.

@mehrdadkhorasani6009 2 месяца назад

This video is amazing. Thanks you, I learned a lot

@shashwat2838 6 лет назад

Love your videos!!

@markh.harris9271 2 года назад

I enjoyed watching; thanks

@EbsCorps 4 года назад

lol! i love it when the song goes off when you change the camera. It freaks you out too. lol

@dynamicgecko1213 6 лет назад

I have a small coding challenge idea. Imagine a grid of dots, like a really big grid. And when you click on any part of the grid, it creates an illusion of a ripple effect, like you're looking at water from a top-down view. And the illusion will be created by manipulating the size of dots (or circles if you will, since they will get bigger and smaller)

@luftigo 6 лет назад

Post it in his Git Repo for Challenge Ideas

@NStripleseven 3 года назад

I know this is old but that would be cool

@kasetophono 2 года назад

there's a lreally cool ibrary for that actually!! RippleJS

@o5-1-formerlycalvinlucien60 10 месяцев назад

wouldnt this work by just making every cell next to a live cell switch states? It wouldn't be a circular, it would be more like a roughly rotated square increasing in size but it would be a "ripple" effect

@sol3cito33 3 года назад

Thank you so much, it was awesome!

@RyanDurbin10 2 года назад

Another great video 😊

@Alexcav37 2 года назад

thank u for this amazing video

@khaledsmq8814 6 лет назад

This is just amazing

@klausklemper5987 6 лет назад

I love this guy!!!

@codinginterface4283 3 года назад

You are awesome man

@yjr4df758 3 года назад

16:35 you could use different numbers for modes, 0 - old=dead, new=dead 1 - old=dead, new=alive 2 - old=alive, new=dead 3 - old=alive, new=alive

@niharranjanbhuyan9839 6 лет назад

Nice to see you again

@TheCodingTrain 6 лет назад

Thanks!

@ViralVerse817 5 лет назад

I'm a fairly new CS student in college and this guy is crazy good at this stuff I hope to be as good as you one day great video.

@flyingface 6 лет назад

you're a great teacher

@top1percent424 6 лет назад

You are wonderful. Thanks for this video!

@TheCodingTrain 6 лет назад

Thank you!

@franchello1105 5 лет назад

I remember being assigned this as a project freshman year in my computer science program. I was able to get it working correctly but others did not. The trick was to start with an empty array as your next generation and calculate from the current generartion. We did no animate it, we just displayed 0s for empty cells and 1 for non empty cells.

@KingOfLeeYT 3 года назад

Great Video Man!

@luosimuershi5881 4 года назад

This is the best solution for leetcode 289 I have seen，thank you ！

@rodolfoocampo281 4 года назад

Thank you for your videos :)

@mobalic8673 3 года назад

your explanation is awesome

@nathenmartin349 3 года назад

@The Coding Train, this video helped me get my current job and I'm extremely grateful!

@thourayasboui376 2 года назад

Hi Nathen, I have the same challenge, did you implement it in python??

@jamesbarker1994 2 года назад

Your awesome dude

@rcookie5128 6 лет назад

Love your channel! watched the whole thing, even though I already knew and made a game of life thingy.. :)

@TheCodingTrain 6 лет назад

thank you!

@officialspaceefrain 4 года назад

I only know python but goddamn this guy can teach javascript

@RubyPiec 4 года назад

I only know javascript but goddamn this guy can teach me more

@SpringySpring04 2 года назад

This is very helpful because i personally use p5js for JavaScript stuff, that's awesome

@mohammadhosseinmolaeian2209 3 года назад

that was great really nice

@wtenho1518 6 лет назад

Love it!

@ShinyArjunSingh 4 года назад

Nice one, Subscribed. Please keep'em comin....

@taihatranduc8613 Год назад

thank you

@MrMadododo 3 года назад

Thank you for this! I was confused with the edges and modulo, your explanation cleared it up! Around the 29:47 time mark

@thourayasboui376 2 года назад

Hii, I didn't get it for edge ... and it doesn't work for me in python !! any help please??

@johnwagner9935 6 лет назад

Hi Dan, I'd be keen to see how you would tackle this in 3D, and what rules you would pick for the cells, that's version 2 of this coding challenge....

@jonahtheking8803 6 лет назад

hello i love your videos i watch for 3 years

@TheCodingTrain 6 лет назад

Thanks for tuning in!

@Jmzz542 Год назад

23:54 I love how when he's thinking it's like he's being touched by demons 😂😂

@XoIoRouge 5 лет назад

Rather than having two 2d arrays, I gave each Cell (I made them objects) an "active" and "expected" boolean. The Active boolean was the "current" 2d array, and the expected boolean was for the next grid. I would loop through every cell, calculating the next state, and set the Expected boolean to match the desired state. The active state didn't change. Once I finished this iteration with every cell, I looped through the grid once more to set active to equal expected.

@imtrying3981 6 лет назад

wow great video loved waching it thanks so much

@TheCodingTrain 6 лет назад

So glad to hear, thank you!

@aguy2241 2 года назад

Got a real mad scientist vibe goin on

@hltxx 2 года назад

¡Gracias!

@TheCodingTrain 2 года назад

Thank you!

@PCmanPL 6 лет назад

wow that console.table is amazing, thanks for that :D

@TheCodingTrain 6 лет назад

Isn't it?

@Falcrist 3 года назад

I just wrote this in C#, so it's kind of interesting watching someone else tackle it quickly in a different language.

@lordofdalords 6 лет назад

you are jus awesome :D

@dhvalden 6 лет назад

Dude you're awesome... I'll try to replicate this in python just to learn and for fun :-)

@dhvalden 6 лет назад

as I promise: github.com/dhvalden/learning_python/blob/master/my_game_of_life.py However, I just translated it to Python, but I haven't been successful in adding another features :( part of the learning process I guess

@k12i 5 лет назад

@@dhvalden page not found :(

@thourayasboui376 2 года назад

@@dhvalden still you have the python implementation please??

@GodOfBreadd 6 лет назад

Would be interesting if you could implement more than one option for each of the cells and form little "tribes" to see which ones take over/fight for survival of the planet. I'm no coder myself so I don't think I could ever accomplish this but it's a nice thought and I think if someone ever did do this it would be pretty fun to watch.

@abdullahkhan-qn1ps 4 года назад

such an amazing video and it's not even monetized :0

@brunox7739 6 лет назад

Nice!

@fisouz 6 лет назад

I have no intention of coding in java but i'm watching pretty much all your coding challenges for some insight like that % solution. Classy!

@TheCodingTrain 6 лет назад

Glad to hear!

@nothappyz 6 лет назад

it's javascript, not java :P

@deniamnet2 5 лет назад

He's not coding in Java here, it's JavaScript. Java and JavaScript are like day and night.

@solodios420 Год назад

very nice thanks

@tekhiun 5 лет назад

You actually don't need two grids, since each cell is either on or off, you can use the first bit to represent the current state and the the second bit to represent the previous (or next state) so basically you fill the grids with 0,1,2 and 3

@eurob12 6 лет назад

Impressive!

@awawpogi3036 6 лет назад

I love your videos! My suggestion in your new video is coding chess or coding rubiks cube. I really love your videos! Happy new year!

@AFzizou 6 лет назад

Cool ! You should take a look at the Langton's ant too.

@daylen577 2 года назад

I know this video is really old at this point, but you could very easily just start a new array filled with zeroes, loop through the 'old' grid once, then for each 1 you encounter add one to the 'new' array, if a value reaches above 0 you add it to a separate 'alive' array, if a value reaches above 3 you remove it from the 'alive' array if it exists. Then, once you're done, simply redraw the original array, checking for each cell if it exists in the 'alive' array, and if so setting it to 1, if not setting it to 0. This way you only go through the original array once instead of counting neighbours for each cell, then in the drawing step you only check for values in an indexed array (that could be string keys (`x+'-'+y`)) and you basically end up with something that's 4x as fast as counting each neighbour.

@MrBadSmash 4 месяца назад

This is awesome! I have a couple of pretty rudimentary ideas that I want to do. I love the idea of being able to "draw" on it, so I'm going to implement that. I also want to make it pretty! So I'm going to cycle through a rainbow of color values and, for every generation, I'm going to change the fill color for live cells. It'll be a rainbow explosion!

@FlyGamingChannel 10 месяцев назад

Please do a video on Lenia. Bert Chan’s work on continuous cellular automata is fascinating.

@samvise7404 6 лет назад

I actually made this in Java myself, but in a console command window, it was one of my first projects I was really proud of haha.

@solarpellets 7 месяцев назад

Whenever I work with grids, I usually end up using a single array from top left to bottom right, and to check relationships, I use (i - gridsize) for up, where i is the number of the gridspace itself in the array, (i + gridsize) for down, (i + 1) for right and (i - 1) for left. Getting edges is a little harder, where if i % gridsize is 0 then you're on the left edge and if if i % size is equal to size - 1 then you're on the right edge, but that doesn't handle having different x and y sized very well. In that case, I guess having two variables, rowSize and columnSize could suffice, though.

@cerberes 6 лет назад

Bravo!

@number3boo 5 лет назад

LOL i love the outro

@MathHunter 11 месяцев назад

"Of course you guys are watching this on a television" famous last words

@cpaulicka 2 года назад

The Game of Life has been my primary interview question (though I also have a few graph/algorithm questions for variety.) It's great because it leads to obvious extensions, such as borderless with wrapping, and opens the discussion of how to make an infinite game of life, which many have difficulty answering. Finally, it's fun to introduce n-dimensional extension, and how to change existing loops to deal with multiple dimensions, and finally, how to make the system parallelizable for truly massive user experience. If they get through all that, they almost always get hired, and do great later.

@kolkonut Год назад

That's really interesting. Do you mean infinite over time or over an infinite grid? In Python, I would start with a list of lists, and have add rows/columns whenever a live cell needs to be created outside the original lists, although the size of the list will grow exponentially. Parallelization is also very interesting, maybe dividing the board into slightly overlapping zones, each of which is processed by a separate thread, then stitching the zones together? I'm naively guessing, but the minimum overlap should be around 3 tiles, to make sure no cell at the border is confused.