Game of Life in P5.js

Question

Ok so i tried to make conway's game of life in p5.js and i am stuck in some wierd bug .

function make2DArray(cols, rows) {
     let arr = new Array(cols);
    for (let i = 0; i < arr.length; i++) {
        arr[i] = new Array(rows);
    }
    return arr;
 }

function countNeighbors(grid, x, y) {
    let sum = 0;
    for (let i = -1; i < 2; i++) {
        for (let j = -1; j < 2; j++) {
            let col = x + i;
            let row = y + i;
            if (grid[col][row] === undefined){
        sum += grid[col][row];
      }
    }
    }
  sum-=grid[x][y]
    return sum;
}

let grid;
let next;
let cols;
let rows;
let resolution = 20;
let fr = 15;

function setup() {
    createCanvas(600, 400);
    frameRate(fr);
    cols = width / resolution;
    rows = height / resolution;

    next = make2DArray(cols, rows);
    grid = make2DArray(cols, rows);
    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            grid[i][j] = floor(random(2));
        }
    }
}

function draw() {
    background(0);
    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            let x = i * resolution;
            let y = j * resolution;
            if (grid[i][j] == 1) {
                fill(0);
                stroke(150);
                rect(x, y, resolution - 1, resolution - 1);
            } else {
                fill(255);
                stroke(150);
                rect(x, y, resolution - 1, resolution - 1);
            }
        }   
    }   
    for (let i = 0; i < cols; i++) {
        for (let j = 0; j < rows; j++) {
            let state = grid[i][j];
            let neighbors = countNeighbors(grid, i, j);
            if (state == 0 && neighbors == 3) {
                next[i][j] = 1;
            } else if (state == 1 && (neighbors < 2 || neighbors > 3)) {
                next[i][j] = 0;
            } else {
                next[i][j] = state;
            }                   
        }
    }
    grid = next;
}

Soo basically i have function countNeighbors and i think that bug is in there , i tried checking if col and row are i boundaries of array like this

if (col>-1 && col <grid.length && row>-1 && row < grid[0].length){
     //increase sum 
}

but its even worse. I am new to js so i figured out that if for example

let x=new Array(10);
 //and then when i try this
 console.log(c[-1])
 //it should give undefined

but program still wont work :( Thanks!

Answer 1

With a few changes you can make it work:

1) Replace let row = y + i; by let row = y + j; That typo was making most of the counts off.

2) Replace the condition

if (grid[col][row] === undefined){

by

if (0 <= col && col < cols && 0 <= row && row < rows){

The problem with your original condition is that if grid[col] is undefined then grid[col][row] is undefined[row], which doesn't make sense.

3) For consistency sake, add a semicolon to the end of sum-=grid[x][y]

4) Finally, so as to not create an unintended alias, you need to replace grid = next by something like:

for(let i = 0; i < grid.length; i++){
      grid[i] = next[i].slice();
    }

Alternatively, make next a variable which is local to draw() and place the line let next = make2DArray(cols, rows); to the beginning of draw().