let columns;

let rows;

let board;

let next;

let frameRateSlider;

let resetbutton;

let bgcolor;

let cellscolor;

let cellhighlight;

​

​

function setup() {

  let canvasDimensions = createVector(720,720);

  frameRateSlider = createSlider(1,60);

  frameRateSlider.position(100, canvasDimensions.y + 10);

    let fstxt = createP('Frame Rate');

    fstxt.style('color', "white");

    fstxt.style('align', 'CENTER');

    fstxt.position(100, canvasDimensions.y + 15);

    text("Frame Rate",100, height + 10);

  resetbutton = createButton("reset");

  resetbutton.position(10, canvasDimensions.y + 10);

   bgcolor = createSlider(0,255);

   cellscolor = createSlider(0,255);

   cellhighlight =createSlider(0,255);

  bgcolor.value(175);

  bgcolor.position(250, canvasDimensions.y + 10);

  cellscolor.value(0);

  cellscolor.position(400, canvasDimensions.y + 10);

  cellhighlight.value(70);

  cellhighlight.position(550, canvasDimensions.y + 10);

  // Set simulation framerate to 10 to avoid flickering

  let f = frameRateSlider.value();

  frameRate(f);

  createCanvas(canvasDimensions.x, canvasDimensions.y);

  w = 6;

  // Calculate columns and rows

  columns = floor(width / w);

  rows = floor(height / w);

  // Wacky way to make a 2D array is JS

  board = new Array(columns);

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

    board[i] = new Array(rows);

  }

  // Going to use multiple 2D arrays and swap them

  next = new Array(columns);

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

    next[i] = new Array(rows);

  }

  init();

   resetbutton.mousePressed(()=>{

  init();

})

  resetbutton.mousePressed(()=>{

  init();

})

}

​

function draw() {

  colorMode(HSB,255);

  background(bgcolor.value(),255,70,50);

​

  generate();

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

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

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

      fill(cellscolor.value(),255,255,255);

        stroke(255);

        // strokeWeight(0.2);

      }else if ((board[i][j] == 0)) {

        fill(255,0);

        stroke(0);

        strokeWeight(0);

      }else if ((board[i][j] == 2)){

        fill(cellhighlight.value(),255,255,255);

        stroke(0);

        strokeWeight(0);

      } 

      ellipse(i * w, j * w, w-1, w-1);

    }

  }

filter(BLUR,2.5);

let f = frameRateSlider.value();

frameRate(f);

​

}

​

// reset board when mouse is pressed

​

​

// Fill board randomly

function init() {

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

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

      // Lining the edges with 0s

      if (i == 0 || j == 0 || i == columns-1 || j == rows-1) board[i][j] = 0;

      // Filling the rest randomly

      // else board[i][j] = floor(random(2));

      // else board[i][j] = 0;

      // board[width/2/w][height/2/w] = 1;

      // board[(width/2/w)+1][(height/2/w)] = 1;

      // board[(width/2/w)+1][(height/2/w)+1] = 1;

      // board[(width/2/w)+2][(height/2/w)+2] = 1;

       else board[i][j] = 0;

      board[width/2/w][height/2/w] = 1;

      board[(width/2/w)+1][(height/2/w)] = 1;

      board[(width/2/w)+2][(height/2/w)] = 1;

      board[(width/2/w)+3][(height/2/w)] = 1;

      board[(width/2/w)-1][(height/2/w)] = 1;

      next[i][j] = 0;

    }

  }

}

​

// The process of creating the new generation

function generate() {

​

  // Loop through every spot in our 2D array and check spots neighbors

  for (let x = 1; x < columns - 1; x++) {

    for (let y = 1; y < rows - 1; y++) {

      // Add up all the states in a 3x3 surrounding grid

      let neighbors = 0;

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

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

          neighbors += board[x+i][y+j];

        }

      }

​

      // A little trick to subtract the current cell's state since

      // we added it in the above loop

      neighbors -= board[x][y];

      // Rules of Life

      if      ((board[x][y] == 1) && (neighbors <  2)) next[x][y] = 0;           // Loneliness

      else if ((board[x][y] == 1) && (neighbors >  3)) next[x][y] = 0;  

       else if ((board[x][y] == 2) && (neighbors >  3)) next[x][y] = 0; 

       else if ((board[x][y] == 2) && (neighbors < 2)) next[x][y] = 0; 

      // Overpopulation

      else if ((board[x][y] == 0) && (neighbors == 3)) next[x][y] = 1;  

      else if ((board[x][y] == 0) && (neighbors == 4)) next[x][y] = 1;    

      else if ((board[x][y] == 0) && (neighbors == 7)) next[x][y] = 2; 

      // else if ((board[x][y] == 0) && (neighbors == 5)) next[x][y] = 1; 

      // else if ((board[x][y] == 0) && (neighbors == 7)) next[x][y] = 1; 

      else                                             next[x][y] = board[x][y]; // Stasis

    }

  }

​

  // Swap!

  let temp = board;

  board = next;

  next = temp;

}