'"Exception has occured: TypeError: Arrary.prototype.forEach called on null or undefined" in p5.js file

After trying to run some p5.js code in Visual Studio Code, I came upon this error. My HTML Code is below, and I copied and pasted it straight from the P5 editor:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

My javascript code is below, and when running in p5, no errors come up:

var numOfFood;
var foodList;
var numOfSlimes;
var slimesList;

function setup() {
  createCanvas(400, 400);
  
  numOfFood = prompt("Enter the amount of food that should be spawned: ");
  numOfSlimes = prompt("Enter the amount of slimes to be spawned: ");
  
  foodList = [];
  slimesList = [];
  
  background(220);
  rect(25, 25, width - 50, height - 50);
  spawnFood(numOfFood);
  initializeSlimes(numOfSlimes);
  
} 



// SLIME
Slime = function (x, y) {
  this.x = x;
  this.y = y;
}

Slime.prototype.draw = function () {
  ellipse(this.x, this.y, 12, 12);
}

Slime.prototype.assignFood = function (index) {
  this.food = foodList[index];
  this.foodIndex = index;
}
// SLIME


// HAWK
Hawk = function (x, y) {
  Slime.call(this, x, y);
  this.type = "HAWK";
}

Hawk.prototype = Object.create(Slime.prototype);
//HAWK



// DOVE
Dove = function (x, y) {
  Slime.call(this, x, y);
  this.type = "DOVE";
}

Dove.prototype = Object.create(Slime.prototype);
// DOVE




// FOOD
Food = function (x, y) {
  this.x = x;
  this.y = y;
}

Food.prototype.draw = function () {
  ellipse(this.x, this.y, 10, 10);
}

Food.prototype.assignSlime = function (firstSlime = null, secondSlime = null) {
  this.firstSlime = firstSlime;
  this.secondSlime = secondSlime;
}
// FOOD




spawnFood = function(food) {
  fill(229, 246, 88);
  
  var factors = []
  var differences = []
  
  for (let i = 1; i < food; i++) {
    
    var value = food/i;
    
    if (value != Math.floor(value)) {
      continue;
    }
    
    factors.push([value, i]);
    differences.push(abs(value - i));
    
  }
  
  
  var currentMinIndex = 0;
  for (let i = 0; i < differences.length; i++) {
    if (differences[i] < differences[currentMinIndex]) {
      currentMinIndex = i;
    }
  }

  for (let x = 50; x < 350; x += 300/factors[currentMinIndex][0]) {
    for (let y = 50; y < 350; y += 300/factors[currentMinIndex][1]) {
      var myFood = new Food(x, y);
      foodList.push(myFood);
      myFood.draw();
    }
  }
  
}




initializeSlimes = function (slimes) {
  var tempx = 0;
  var tempy = 0;
  fill(67, 163, 235);

  for (let i = 25; i < 375; i+= 375/(slimes / 4)) {
    let mySlime = new Slime(i, 12.5); mySlime.draw(); slimesList.push(mySlime);
  }
  
  for (let i = 25; i < 375; i+= 375/(slimes / 4)) {
    let mySlime = new Slime(i, 387.5); mySlime.draw(); slimesList.push(mySlime);
  }
  
  for (let i = 25; i < 375; i+= 375/(slimes / 4)) {
    let mySlime = new Slime(12.5, i); mySlime.draw(); slimesList.push(mySlime);
  }
  
  for (let i = 25; i < 375; i+= 375/(slimes / 4)) {
    let mySlime = new Slime(387.5, i); mySlime.draw(); slimesList.push(mySlime);
  }
}

However, when I try to run this in VSCode, chrome opens to try and run the file, but then the window switches back to VSCode, and it shows me:

My error code (I don't have enough rep to embed a picture yet)

If anybody knew how to fix this, I would be extremely grateful. Is this a problem in my code, or is this a problem with the p5 library?

javascripthtml


Solution 1:[1]

Could you show where the error appears in your javascript file rather than in the p5.js library itself?

Otherwise, I don't even see a call to Array.forEach() in your code snippit, did you make sure to paste all of the code you're running? Or since your p5.js file isn't even being loaded in your index.html, are you trying to run the p5.js file itself? That won't work, make sure you're running your index.html file.

I tried running your index.html using a copy of p5.js in the source folder and copied all of your code into a sketch.js file, and I was able to run it through VSCode. Let me know if this helps at all or if you have any other information that could help with fixing your problem!

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 TetroGem

Related Questions