# P5JS error showing up
**URL:** https://discourse.processing.org/t/p5js-error-showing-up/27904
**Category:** Coding Questions
**Created:** [February 18, 2021, 11:31am UTC](https://discourse.processing.org/t/p5js-error-showing-up/27904 "2021-02-18T11:31:40Z")
**Posts on this page:** 10
**Page:** 1
### Author:  [@Ariadne](https://discourse.processing.org/u/Ariadne)
#### Post date: [February 18, 2021, 11:31am UTC](https://discourse.processing.org/t/p5js-error-showing-up/27904/1 "2021-02-18T11:31:40Z")
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:
```auto
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.
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [February 19, 2021, 12:16am UTC](https://discourse.processing.org/t/p5js-error-showing-up/27904/2 "2021-02-19T00:16:44Z")
Hi,
Welcome to the forum! 😉
The error is caused by those lines :
```auto
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](https://github.com/denysdovhan/wtfjs#trailing-commas-in-array) with strange syntax so in my Firefox console, I can write this :
```auto
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](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](http://forum.espruino.com/conversations/348391/)
* * *
Anyway you should write this :
```auto
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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Array)
---
### Author:  [@Ariadne](https://discourse.processing.org/u/Ariadne)
#### Post date: [February 19, 2021, 6:00am UTC](https://discourse.processing.org/t/p5js-error-showing-up/27904/3 "2021-02-19T06:00:06Z")
Thanks! But shouldn’t it be `Array(3)` instead of `Array(2)`, since, each array requires 3 elements?
---
### Author:  [@Ariadne](https://discourse.processing.org/u/Ariadne)
#### Post date: [February 19, 2021, 6:26am UTC](https://discourse.processing.org/t/p5js-error-showing-up/27904/4 "2021-02-19T06:26:07Z")
But now this shows up:
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [February 19, 2021, 7:07am UTC](https://discourse.processing.org/t/p5js-error-showing-up/27904/5 "2021-02-19T07:07:03Z")
> [@How do I make a 2 dimensional array?](https://discourse.processing.org/t/how-do-i-make-a-2-dimensional-array/25934/4):
>
> function createFloatArray2d(rows, cols) { return Array.from({ length: rows }, \_ =\> new Float32Array(cols)); }
```auto
function createArray2d(rows, cols) {
return Array.from({ length: rows }, _ => Array(cols).fill());
}
```
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [February 19, 2021, 8:09am UTC](https://discourse.processing.org/t/p5js-error-showing-up/27904/6 "2021-02-19T08:09:10Z")
> [@Ariadne](#):
>
> But shouldn’t it be `Array(3)` instead of `Array(2)` , since, each array requires 3 elements?
Yes, it’s because I thought that you wanted two neighbours because as I said, JavaScript use two empty slots with two commas :
```auto
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 :
> **[Von Neumann neighborhood](https://en.wikipedia.org/wiki/Von_Neumann_neighborhood)**
>
> In cellular automata, the von Neumann neighborhood (or 4-neighborhood) is classically defined on a two-dimensional square lattice and is composed of a central cell and its four adjacent cells. The neighborhood is named after John von Neumann, who used it to define the von Neumann cellular automaton and the von Neumann universal constructor within it. It is one of the two most commonly used neighborhood types for two-dimensional cellular automata, the other one being the Moore neighborhood This ...
---
### Author:  [@Ariadne](https://discourse.processing.org/u/Ariadne)
#### Post date: [February 21, 2021, 1:12pm UTC](https://discourse.processing.org/t/p5js-error-showing-up/27904/7 "2021-02-21T13:12:51Z")
Forgive me, but I don’t get why each organism has 4 neighbors. Shouldn’t each organism have 8 neighbors?
---
### Author:  [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [February 21, 2021, 2:54pm UTC](https://discourse.processing.org/t/p5js-error-showing-up/27904/8 "2021-02-21T14:54:37Z")
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](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life).
Following is quote from that page:
> Every cell interacts with its eight _[neighbours](https://en.wikipedia.org/wiki/Moore_neighborhood)_ , which are the cells that are horizontally, vertically, or diagonally adjacent.
---
### Author:  [@josephh](https://discourse.processing.org/u/josephh)
#### Post date: [February 21, 2021, 7:05pm UTC](https://discourse.processing.org/t/p5js-error-showing-up/27904/9 "2021-02-21T19:05:54Z")
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](https://en.wikipedia.org/wiki/Von_Neumann_neighborhood)_ and the _[Moore neighborhood](https://en.wikipedia.org/wiki/Moore_neighborhood)_ .[[5]](https://en.wikipedia.org/wiki/Cellular_automaton#cite_note-kier-seybold-cheng-15-5)
---
### Author:  [@Ariadne](https://discourse.processing.org/u/Ariadne)
#### Post date: [February 22, 2021, 4:08am UTC](https://discourse.processing.org/t/p5js-error-showing-up/27904/10 "2021-02-22T04:08:10Z")
Thanks you everybody for responding! I fixed my code, and it is here if anyone wants to see:
```auto
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);
}
```