In this coding challenge, I attempt to code Conway’s Game of Life cellular automata simulation in JavaScript using the p5.js library.

Support this channel on Patreon: https://patreon.com/codingtrain
To buy Coding Train merchandise: https://www.designbyhumans.com/shop/codingtrain/
To Support the Processing Foundation: https://processingfoundation.org/support

Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics

Contact:
Twitter: https://twitter.com/shiffman
The Coding Train website: http://thecodingtrain.com/

Links discussed in this video:
Conway’s Game of Life on Wikipedia: https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life
Mathematical Games: http://www.ibiblio.org/lifepatterns/october1970.html

Videos mentioned in this video:
My Video on The Game of Life: https://youtu.be/tENSCEO-LEc
2D Arrays in JavaScript: https://youtu.be/OTNpiLUSiB4
The Modulo Operator with Golan Levin: https://youtu.be/r5Iy3v1co0A

Source Code for the all Video Lessons: https://github.com/CodingTrain/Rainbow-Code

p5.js: https://p5js.org/
Processing: https://processing.org

For an Introduction to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
For More Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

Help us caption & translate this video!

https://amara.org/v/dO62/

📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

Comments (26)

  1. I noticed a problem :
    Look at the left and right and top and bottom.
    Overlapping sides.
    PROBLEM : When i > 10, then :
    (x + i + 10) % 10
    = (x + extra + 10 + 10) % 10
    = (x + extra + 10) % 10

    Same as j.
    When j > 10, then :
    (y + j + 10) % 10
    = (y + extra + 10 + 10) % 10
    = (y + extra + 10) % 10
    Which then produces an overlapping check.

    It should do when corner, top, bottom, left, right, checks the "undefined" cell as 0.
    (Note: I'm leaving this comment and don't feature THIS COMMENT to YOUR VIDEO, The Coding Train.)
    Edit: If you don't believe, continue the video and look at the corner canvas of 36:12.

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

  3. Thanks everyone for your contribution. Please I am new in this environment, i am learning to code for the first time. I need to understand how to write an algorithm in cellular automata. Then code it in python . I would appreciate material that focuses on the subject that I have mentioned.

  4. Nice video! Also notice since values are binary you could have saved the next generation on the next bit, let say: 'a' turns into 'b' (where 'a' and 'b' are either 1 or 0) you turn 'a' into 'ba' base 2. You get neightbour by its remainder with 2 and you get the next generation by dividing into two afterwards.

  5. My solution for counting the edge/corner pieces' neighbors was adding a row and column to each side, but not render them.
    My classmate checked if the cell was an on the edge, and if it was, started from the height/width of the Canvas instead of +1/-1
    EDIT: Also I did it with a 3DArray of booleans, so that I could track the history and also just skip to the n-th generation right from the start. Also worth mentioning is that I did it with C# 😂. But it's nearly identical, so don't worry hahaha

  6. You know that you have the same make2Darray error in Minesweeper? Not returning it? Super weird

  7. Z K

    The user of this game should be able to make the cells alive or dead by clicking on any individual cell, but alas! because of the canvas it doesn't seem to be possible 🙁

  8. yo i was watching this and i decided to code this game aswell as i was watching the video. i actually got some stuff really similar to yours, and in general im pretty sure my code is like identical to yours, but for some reason, some of my values on the grid end up undefined, breaking the whole game, making a 100 by 100 grid be empty in a matter of milisseconds.

    i cannot for the life of me debug this, i have no idea whats wrong, all ive managed to find out is that indeed some neighbor counts end up getting undefined for some odd reason (checked the indexes and the loops, nothing seems wrong there)

    has anyone else had this issue with this specific game? i honestly have no idea whats wrong, and i even went back to the beginning of the video and copied his exact code and it works, but even writing it again i dont feel any meaningful difference…..

  9. Long shot, but did anyone who attempted this solution have an issue where all the cells would eventually take the value of one and the game would stop?

  10. Shave your beard. And omg look at all the stickers on your apple laptop omgggg so cute omggggggg!!!!!!!!!!!!!!!

  11. back when the IBM PC was a new computer, I wrote a game of Life for it. I think it was about 50 lines of TurboBASIC code. 2D arrays are easy-peezy in BASIC. You DIM and that's it. I used one array for the current state, and a second array I called WORK, which is where we built the new generation. Then I simply copied the Work array to the current array and displayed. My version was the only one I knew of that could save and load shapes. I made mine wrap also, and I allowed you to chose the size of your playing field as well as delay interval to control the speed. Yours looks good. You're a better man than I. I wouldn't even try that in Javascript.

  12. 23:45 couldn’t you just put the access of the neighbor in a try statement to avoid the potential out of bounds? That’s at least what I did last time I had to check grid neighbors…

  13. You can massively speed up the cell calculating by some suitable way of tracking which cells have had no changing neighbours for a few generations, e.g. zoning the grid into sub-grid neighbourhoods of active cells.

  14. Challenge: Create a hexagonal (6 sided) version. Hint: the rules need to be simplified to not check 2 living neighbours, only 3. Bonus points: find a glider (I’ve never found one myself)

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

  16. Could you make a triangular grid with 3 neighbours per triangle? 1 alive neighbour results in a dead cell due to underpopulation. 2 alive neighbours causes reproduction. 3 alive neighbours results in a dead cell due to overpopulation.

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

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

Comments are closed.