let columns, rows;

let board;

​

function setup() {

  createCanvas(650, 300);

  columns = floor(width / w);

  rows = floor(height / w);

  board = create2DArray(columns, rows);

  frameRate(20); // Slower frame rate for visibility of evolution

}

​

function draw() {

  background(255);

  for (let i = 0; i < columns; i++) {

    for (let j = 0; j < rows; j++) {

      board[i][j].display(); // Show the cells

    }

  }

​

 stroke(0); // black grid lines

  for (let i = 0; i <= width; i += w) {

    line(i, 0, i, height);

  }

  for (let j = 0; j <= height; j += w) {

    line(0, j, width, j);

  }

​

}

​

// activates a cell and gives it a random color when dragged over

function mouseDragged() {

  let x = floor(mouseX / w);

  let y = floor(mouseY / w);

  if (x >= 0 && x < columns && y >= 0 && y < rows) {

    board[x][y].state = 1; // Activate the cell

    board[x][y].color = [random(255), random(255), random(255)]; // Assign a random color

  }

}

​

​

// changes colors of all alive cells to random colors when spacebar is pressed

function keyPressed() {

  if (key === ' ') {

    for (let i = 0; i < columns; i++) {

      for (let j = 0; j < rows; j++) {

        if (board[i][j].state === 1) {

          board[i][j].color = [random(255), random(255), random(255)];

        }

      }

    }

  } 

}

​

function create2DArray(cols, rows) {

  let arr = new Array(cols);

  for (let i = 0; i < cols; i++) {

    arr[i] = new Array(rows);

    for (let j = 0; j < rows; j++) {

      arr[i][j] = new Cell(i, j, w);

    }

  }

  return arr;

}

​

function generateNextBoard() {

  let next = create2DArray(columns, rows);

​

// looping through each cell to apply Game of Life rules

  for (let x = 0; x < columns; x++) {

    for (let y = 0; y < rows; y++) {

       // counting alive neighbors

      let neighbors = 0;

      for (let i = -1; i <= 1; i++) {

        for (let j = -1; j <= 1; j++) {

          if (i === 0 && j === 0) {

            // skip the current cell itself

            continue;

          }

          let col = (x + i + columns) % columns;

          let row = (y + j + rows) % rows;

          neighbors += board[col][row].state;

        }

      }

​

      // Rules of Life

      if (board[x][y].state == 1 &&  (neighbors<2 || neighbors > 3)) {

        next[x][y] = new Cell(x, y, w, 0); // cell dies due to underpopulation and overpopulation

      } else if (board[x][y].state == 0 && neighbors == 3) {

        // cell becomes alive 

        next[x][y] = new Cell(x, y, w, 1);

        next[x][y].color = [random(255), random(255), random(255)]; //  cell gets a random color

      } else {

        next[x][y] = new Cell(x, y, w, board[x][y].state); // cell stays in current state

        next[x][y].color = board[x][y].color; // keep the same color

      }

    }

  }

​

  // swap new board with the old

  board = next;

}

​

class Cell {

  constructor(x, y, w, state) {

    this.state = state || 0; // state is 0 by default

    this.x = x * w;

    this.y = y * w;

    this.w = w;

    this.color = [255, 255, 255]; //white

  }

​

  display() {

    noStroke();

    fill(this.state === 1 ? this.color : [255, 255, 255]); // color if alive, white if dead

    rect(this.x, this.y, this.w, this.w);

  }

}

​

// generate the next generation on mouse press

function mousePressed() {

  generateNextBoard();

}

​

​