Cannot read property '0' of undefined

cameronnichols

I don't understand why I'm getting this error. I am attempting to make Conway's Game Of Life, and this requires a grid. So in the process of drawing the grid, it makes it to the last column, and 2nd row (index 1) and produces the error in the title. I don't understand why, I even put 'grid' in the console log and none of the elements were undefined.

function Cell(i,j){
  this.r = j;
  this.c = i;
  this.x = this.c*res;
  this.y = this.r*res;
  this.state = floor(random(0,1)+.5);
  this.next;
  this.getNeighborhood = () => {
    let temp = [];
    for (let k = -1; k <=1; k++){
      for (let l = -1; l <= 1; l++){
        if (inRange(k,0,cols) && inRange(l,0,rows)){
          temp.push(grid[this.c+k][this.r+l]);
        }
      }
    }
    return temp;
  }
  this.show = () => {
    stroke(0);
    fill(this.state*255);
    rect(this.x,this.y,res,res);
  }
}

function inRange(val,min,max){
  return (val>=min&&val<max)
}

Those two functions are in a separate file from the main sketch.

Here's the main sketch:

var res = 10;
var cols;
var rows;
var grid;

function setup(){
  createCanvas(600,600);
  cols = floor(width/res);
  rows = floor(height/res);
  grid = new Array(cols);
  for (let i = 0; i < grid.length; i++){
    grid[i] = new Array(rows);
    for (let j = 0; j < grid[i].length; j++){
      grid[i][j] = new Cell(i,j);
    }
  }
}

function draw(){
  background(255);
  for (let i = 0; i < grid.length; i++){
    for (let j = 0; j < grid[i].length; j++){
      let cell = grid[i][j];
      cell.show();
      cell.next = computeState(cell);
      cell.state = cell.next;
      cell.show();
    }
  }
}