###

## WEF008

Introduction of Game of Life and p5.js
Game of Life Code-Along
Personal project - Game of Life Enhanced
Game of Life Project Grading
My Submissions

###### WEF008

###### Introduction of Game of Life and p5.js

# Introduction to Game of Life and p5.js

You have learned enough fundamental knowledge to attempt your first personal project. We are going to attempt the game of Conway's Game of Life with the help of a library called `p5.js`.

## Conway's Game of Life

Conway's game of life is a zero-player game that is created by the English Computer Scientist and Mathematician John Horton Conway . It is very typical programming problem because of the simplicity, beauty and inherent complexity of this problem.

Let's look at what Game of Life looks like. Here is one famous example called Gosper's Glider Gun.

What is happening here ? It seems that we are having a form of life spitting something crawling to the corner. You may assume that the above animation is based on a very complex rule to generate such pattern. Surprisingly, the rules of game of life is very simple.

### Rules of Game of Life

Game of Life runs on a 2-dimensional grid plane with square grid. On each grid, there could be with life (colored) or no life(white). So it looks like the following.

What are all those numbers? It is the neighbor of the grid. We call it the Moore neighborhood which includes all neighboring grids. We would hide the number of neighbors of all box with 0 neighbors since it is trivial.

Here are the rules of Game of life:

- If a box has life and it has less than 2 neighbors. It dies of loneliness. The box becomes lifeless next generation.
- If a box has life and it has more than 3 neighbors. It dies of overpopulation. The box becomes lifeless next generation.
- If a box has life and it has 2 to 3 neighbors. Nothing changes for this box.
- If a box has no life and it has 3 neighbors, the box in next generation fills with life because of reproduction.

It seems pretty simple rule. But it gives unexpectedly complex behavior.

Here are some common patterns:

As you can see from these examples, the first one changes from a vertical three-box pattern to a horizontal three-box pattern. It is going to oscillate between these two patterns forever if there is no other box interfering.

The second one is a pattern just like Tecky Logo. It is stable because of the life-box has 2-3 neighbors.

The third one is much more populate and it becomes four separated box with 0 neighbors. So the third pattern would disappear completely after two generations.

That is the game we need to implement. It seems pretty difficult to implement all these boxes by ourselves. Hence we are going to make use of a very useful library called `p5.js`.

Here is a demonstration that showcase how the neighbors are calculated.

## p5.js

`p5.js` is a library that makes use of the `canvas` element in web. It aims at making coding easier for designer, artist and programming beginners. Hence it is a very nice library for us to build our Game of life with this library.

### Installation of p5.js

Installation of p5.js is very simple. You can just put the following CDN link to your `index.html`.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>

Our resulting `index.html` would look like the following with `bootstrap` installed as well.

    <html>
        <head>
            <meta charset="utf-8">
            <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
            rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
            crossorigin="anonymous">
            <link rel="stylesheet" href="index.css"/>
        </head>
        <body>
            <div id='canvas'></div>
            <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script>
            <script src="index.js"></script>
        </body>
    </html>

## Usage

Using `p5.js` is very straight forward, there are two functions that you can put inside your `index.js` to start with. They are the functions `setup()` and `draw()`.

    function setup(){
       // Setup logic here
    }

    function draw(){
       // draw logic here
    }

`setup()` function is for setting up the initial values. It is going to run exactly once. `draw()` is going to run many times. It is going to run once per frame. If you have a frame rate of 30 frames per second, then `draw()` runs 30 times per second!

`p5.js` makes writing `canvas` related code easier because it simplifies the common flow of drawing animations into `functions` like `setup()` and `draw()`. They also have different functions in their Reference. We would utilize many of them in the next section.

End of Content
© 2022 Tecky Academy Limited

Tecky CMS