P5JS error showing up

p5.js Coding Questions
1

So, I am trying to recreate the game of life in p5js. And for some reason, the official p5js web editor raises some sort of error in my code, which I have inspected thoroughly:

const segmentSize = 25;


class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}


class Organism {
  constructor(column, row) {
    this.column = column;
    this.row = row;
    this.status = true;
    this.neighbours = [
      [ , , ],
      [ , , ],
      [ , , ]
    ];
    
    for (let i = -0; i < 2; i += 1) {
      for (let j = 0; j < 2; j += 1) {
        this.neighbours[column + i][row + j] = Point(column + i, row + j);
      }
    }
  }
  
  deactivate() {
    this.status = false;
    fill(0);
    quad(
      this.column - segmentSize, this.row - segmentSize,
      this.column              , this.row - segmentSize,
      this.column              , this.row              ,
      this.column - segmentSize, this.row
     );
  }
}


function grid() {
  for (let i = segmentSize; i < width + segmentSize; i += segmentSize) {
    for (let j = segmentSize; j < height + segmentSize; j+= segmentSize) {
      quad(
        i - segmentSize, j - segmentSize,
        i              , j - segmentSize,
        i              , j              ,
        i - segmentSize, j
      );
    }
  }
}

function setup() {
  createCanvas(500, 500);
  background(0);
  stroke(200, 255, 255);
  strokeWeight(2);
}

function draw() {
  grid();
}

The error seems to show up on lines 18, 19, and 20.The error says that “Empty array elements require elision=true”. I cannot make any sense of this, and there seems to be no friendly p5js error associated with it. I would really appreciate it if somebody would care to tell me what I am doing wrong.

2

Hi,

Welcome to the forum! :wink:

The error is caused by those lines :

this.neighbours = [
  [ , , ],
  [ , , ],
  [ , , ]
];

This is because this is not exactly the right way to create and instantiate arrays in JavaScript.

Note that it works in JavaScript because it’s a weird language with strange syntax so in my Firefox console, I can write this :

a = [ , , ]
// -> Array [ <2 empty slots> ]

This creates elision (or holes) in the Array as described here :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Trailing_commas

However if the JavaScript engine running your code doesn’t really support it this may cause the error message you are seeing.

Are you using espruino as described in this thread? : empty array element require elision=true | Espruino

Anyway you should write this :

this.neighbours = [ Array(2), Array(2), Array(2) ];

By using the Array() constructor which reserve empty slots for you.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array

3

Thanks! But shouldn’t it be Array(3) instead of Array(2), since, each array requires 3 elements?

4

But now this shows up:

941Ă—110

5 
function createArray2d(rows, cols) {
  return Array.from({ length: rows }, _ => Array(cols).fill());
}
2 Likes
6

Yes, it’s because I thought that you wanted two neighbours because as I said, JavaScript use two empty slots with two commas :

a = [ , , ]
// -> Array [ <2 empty slots> ]

Also if you are making the game of life, it’s usually using the Von Neuman neighborhood with 4 neighbours :

1 Like
7

Forgive me, but I don’t get why each organism has 4 neighbors. Shouldn’t each organism have 8 neighbors?

8

In Conway’s Game of Life, each cell, with the possible exception of ones at the edges of the board, has eight neighboring cells. See Wikipedia: Conway’s Game of Life.

Following is quote from that page:

Every cell interacts with its eight neighbours , which are the cells that are horizontally, vertically, or diagonally adjacent.

2 Likes
9

My bad, @javagar is right on this point!

Von Neumann neighbourhood can also be used for other types of cellular automatas :

The two most common types of neighborhoods are the von Neumann neighborhood and the Moore neighborhood .[5]

1 Like
10

Thanks you everybody for responding! I fixed my code, and it is here if anyone wants to see:

const segmentSize = 25;



class Organism {
  constructor(column, row) {
    this.column = column * 25;
    this.row = row * 25;
    this.status = true;
    this.neighbours = [
      [0, 0, 0],
      [0, 0, 0],
      [0, 0, 0]
    ];
    
    for (let i = 0; i < 2; i += 1) {
      for (let j = 0; j < 2; j += 1) {
        this.neighbours[i][j] = {x: this.column + i, y: this.row + j}
      }
    }
    this.activate();
  }
  
  deactivate() {
    this.status = false;
    
    fill(0);
    
    quad(
      this.column - segmentSize, this.row - segmentSize,
      this.column              , this.row - segmentSize,
      this.column              , this.row              ,
      this.column - segmentSize, this.row
    );
  }
  
  activate() {
    this.status = true;
    
    fill(255);
    
    quad(
      this.column - segmentSize, this.row - segmentSize,
      this.column              , this.row - segmentSize,
      this.column              , this.row              ,
      this.column - segmentSize, this.row
    );
  }
}


function grid() {
  for (let i = segmentSize; i < width + segmentSize; i += segmentSize) {
    for (let j = segmentSize; j < height + segmentSize; j+= segmentSize) {
      fill(0);
      quad(
        i - segmentSize, j - segmentSize,
        i              , j - segmentSize,
        i              , j              ,
        i - segmentSize, j
      );
    }
  }
}

function setup() {
  createCanvas(500, 500);
  background(0);
  fill(0)
  stroke(200, 255, 255);
  strokeWeight(2);
}

function draw() {
  grid();
  
  new Organism(10, 10);
}
1 Like