let canvasWidth = 1200;

​

function setup () {

​

    createP("click to pause");

    createCanvas(canvasWidth, canvasWidth);

    frameRate();

​

    let numberOfRows = 10;

    squares = createEmptySquares(numberOfRows);

    //start with a center tile turned on

    squares[Math.floor(numberOfRows/2)][Math.floor(numberOfRows/2)] = 1;

​

}

​

function createEmptySquares(numberOfRows) {

    let returnSquares = new Array(numberOfRows);

    for (var x = 0; x < numberOfRows; x++) {

        returnSquares[x] = new Array(numberOfRows);

        for (var y = 0; y < returnSquares[x].length; y++) {

            returnSquares[x][y] =0;

        }

    }

    return returnSquares;

}

​

function edgesReached () {

    for (var i = 0; i < squares.length; i++) {

        if (squares[i][0] == 1)

            return true;

        if (squares[i][squares.length-1] == 1)

            return true;

    }

    for (var i = 0; i < squares.length; i++) {

        if (squares[0][i] == 1)

            return true;

        if (squares[squares.length-1][i] == 1)

            return true;

    }

​

    return false;

}

​

function growSquares (extraSize) {

    let newSquares = createEmptySquares(squares.length + extraSize);

    let emptySpace = Math.floor(extraSize / 2);

​

    for (var x = emptySpace; x < newSquares.length - emptySpace; x++) {

        for (var y = emptySpace; y < newSquares.length - emptySpace; y++) {

            newSquares[x][y] = squares[x-emptySpace][y-emptySpace];

        }

    }

​

    squares = newSquares;

}

​

function newRound () {

​

    let newSize = squares.length;

    //

    if (edgesReached()) {

        growSquares(10);

    }

​

    let tempSquares = createEmptySquares(squares.length);

​

    for (var x = 0; x < squares.length; x++) {

        for (var y = 0; y < squares[x].length; y++) {

​

            //count neighbours

            let count = 0;

​

            //top

            if (y > 0) {

                //left

                if (x > 0) {

                    count += squares[x-1][y-1];

                }

                //center

                count += squares[x][y-1];

                //right

                if (x < squares.length - 1 && y > 0) {

                    count += squares[x+1][y-1];

                }

            }

​

            //left center

            if (x > 0) {

                count += squares[x-1][y];

            }

            //right center

            if (x < squares.length - 1) {

                count += squares[x+1][y];

            }

​

            //bottom

            if (y < squares.length - 1) {

                //left

                if (x > 0) {

                    count += squares[x-1][y+1];

                }

                //center

                count += squares[x][y+1];

                //right

                if (x < squares.length - 1 && y > 0) {

                    count += squares[x+1][y+1];

                }

            }

​

            if (count % 2 == 0) {

                tempSquares[x][y] = 0;

            } else {

                tempSquares[x][y] = 1;

            }

        }

    }

​

    squares = tempSquares;

​

}

​

function mousePressed() {

  noLoop();

}

​

function mouseReleased() {

  loop();

}

​

function draw() {

​

    squareSize = Math.floor(width / squares.length);

    let offset = Math.floor(width % squares.length /2);

​

    if (squareSize == 0) {

        noLoop();

        return;

    }

​

    background(200);

    for (var x = 0; x < squares.length; x++) {

        for (var y = 0; y < squares[x].length; y++) {

            if (squares[x][y] == 1) {

                //draw the square

                fill(0);

                square(squareSize*x + offset, squareSize*y+offset, squareSize);

            }

        }

    }

​

    newRound();

​

}

​