Meteor Catcher isn't running, not sure why

Question

I was creating a meteor catcher game for my school project, I created the meteor catcher game and a restart function when you press your mouse. However, after you reach the required score and you click, it shows errors in the console. I'm not sure what to do.

Here is the code and error messages are underneath it.

Thanks for your time!

/* GLOBAL VARIABLES */
let meteorX = []; // Create array to store X positions of meteors
let meteorY = [0, 0, 0, 0, 0]; // Create array to store Y positions of meteors

let meteorDiameter = []; // Create array to store diameter of meteor
let catcherWidth = 40; // Store diameter of the catcher
let catcherHeight = 60

let distance = []; // Create array to store the distance between meteor and catcher
let speed = []; // Create array to store meteor speed

let score = 0; // Store the number of meteors caught

//Declare a variables to store the image files
let bgImage;
let meteorImage;
let catcherImage;

// Only runs once
function setup() {
  createCanvas(400, 400);
  
  //Load the images into the sketch and store in variables
  bgImage = loadImage('bgImage.jpg');
  meteorImage = loadImage('meteor.png');
  catcherImage = loadImage('rocketship.png');
  
   // Populate initial X values
  for(let i = 0; i < 5; i++){
    meteorX[i] = random(0, width);
    //print('meteorX = ' + meteorX[i]);
  }
  
  // Populate initial diameter values
  for(let i = 0; i < 5; i++){
    meteorDiameter[i] = random(10, 40);
    //print('meteorDiameter = ' + meteorDiameter[i]);
  }
  
  // Populate initial speed values
  for(let i = 0; i < 5; i++){
    speed[i] = random(0.5, 4);
    //print('speed = ' + speed[i]);
  }
}

// Runs over and over in a loop
function draw() {
  background(0);
  noStroke();
  
  // Draws the image starting from the top left corner
  imageMode(CORNER);
  background(bgImage); 
  noStroke(); 
  
  
  
  // Draw meteors to the screen
  for(let i = 0; i < 5; i++){
    imageMode(CENTER)
    image(meteorImage, meteorX[i], meteorY[i], meteorDiameter[i], meteorDiameter[i])
    
  }
  
  // Cycle through meteors to make them fall at different speeds
  for(let i = 0; i < 5; i++){
    meteorY[i] = meteorY[i] + speed[i];
  }
  
  // Draw the catcher to follow the mouse
  imageMode(CENTER)
  image(catcherImage, mouseX, mouseY, catcherWidth, catcherHeight);

  
  // Cycle through meteors to determine distance between meteor and catcher
  for(let i = 0; i < 5; i++){
    distance[i] = dist(meteorX[i], meteorY[i], mouseX, mouseY);
    //print('distance = ' + distance[i]);
  }
  
  // Cycle through meteors to test if meteor and catcher have intersected
  for(let i = 0; i < 5; i++){
    if(distance[i] < 25){
      // Redraw  meteor to top of screen at a random location on x-axis
      meteorY[i] = 0;
      meteorX[i] = random(0, width);
      
      // Set new meteor speed to random number between 1 and 4
      meteorDiameter[i] = random(10, 40);
      
      // Increase the score value by 1
      score = score + 1;
    }
  }
  
  // Cycle through meteors to test if intersected with screen bottom
  for(let i = 0; i < 5; i++){
    if(meteorY[i] > height){
      meteorY[i] = 0;
      meteorX[i] = random(0, width);
      meteorDiameter[i] = random(10, 40);
    }
  }
  
  // Draw the score to the screen
  fill(0, 254, 202);
  textAlign(LEFT);
  textSize(15);
  text('Meteors Caught: ' + score, 15, 380);
  

   if(score == 10){
    meteorY = width + 10;
    meteorX = height + 10;
    speed = 0;
    
    //win message
    textAlign(CENTER);
    textSize(20);
    text('You Win!', width/2, height/2);
    textSize(14);
    text('Click the mouse anywhere to restart.', width/2, height/2 + 30);
    
    // Restart the game if player clicks the mouse.
    if(mouseIsPressed){
    restart();
    }
  }
}
function restart(){
  meteorY = [0, 0 ,0 ,0 ,0];
  meteorX = []
  speed = [];
  score = 0;
  }

🌸 p5.js says: image() was expecting Number for the second parameter, received an empty variable instead. (on line 68 in sketch.js [/sketch.js:68:5])

If not intentional, this is often a problem with scope: [https://p5js.org/examples/data-variable-scope.html]. (http://p5js.org/reference/#/p5/image) 

🌸 p5.js says: image() was expecting Number for the third parameter, received an empty variable instead. (on line 68 in sketch.js [/sketch.js:68:5])

If not intentional, this is often a problem with scope: [https://p5js.org/examples/data-variable-scope.html]. (http://p5js.org/reference/#/p5/image) 

🌸 p5.js says: dist() was expecting Number for the first parameter, received an empty variable instead. (on line 84 in sketch.js [/sketch.js:84:19])

If not intentional, this is often a problem with scope: [https://p5js.org/examples/data-variable-scope.html]. (http://p5js.org/reference/#/p5/dist) 

🌸 p5.js says: dist() was expecting Number for the second parameter, received an empty variable instead. (on line 84 in sketch.js [/sketch.js:84:19])

If not intentional, this is often a problem with scope: [https://p5js.org/examples/data-variable-scope.html]. (http://p5js.org/reference/#/p5/dist) 

🌸 p5.js says: image() was expecting Number for the second parameter, received an empty variable instead. (on line 68 in sketch.js [/sketch.js:68:5])

If not intentional, this is often a problem with scope: [https://p5js.org/examples/data-variable-scope.html]. (http://p5js.org/reference/#/p5/image) 

🌸 p5.js says: dist() was expecting Number for the first parameter, received an empty variable instead. (on line 84 in sketch.js [/sketch.js:84:19])

If not intentional, this is often a problem with scope: [https://p5js.org/examples/data-variable-scope.html]. (http://p5js.org/reference/#/p5/dist) 

🌸 p5.js says: image() was expecting Number for the second parameter, received an empty variable instead. (on line 68 in sketch.js [/sketch.js:68:5])

If not intentional, this is often a problem with scope: [https://p5js.org/examples/data-variable-scope.html]. (http://p5js.org/reference/#/p5/image) ```

Answer 1

You don't actually run your code at the restart, you're just resetting your variables. It should work after you add setup() function call in the restart function. The error you receiving is because you're changing your array into a number by meteorY = width + 10; thus meteorY[i] returns undefined. So you can delete those. Here's the modified code;

/* GLOBAL VARIABLES */
let meteorX = []; // Create array to store X positions of meteors
let meteorY = [0, 0, 0, 0, 0]; // Create array to store Y positions of meteors

let meteorDiameter = []; // Create array to store diameter of meteor
let catcherWidth = 40; // Store diameter of the catcher
let catcherHeight = 60

let distance = []; // Create array to store the distance between meteor and catcher
let speed = []; // Create array to store meteor speed

let score = 0; // Store the number of meteors caught

//Declare a variables to store the image files
let bgImage;
let meteorImage;
let catcherImage;

// Only runs once
function setup() {
  createCanvas(400, 400);
  
  //Load the images into the sketch and store in variables
  bgImage = loadImage('bgImage.jpg');
  meteorImage = loadImage('meteor.png');
  catcherImage = loadImage('rocketship.png');
  
   // Populate initial X values
  for(let i = 0; i < 5; i++){
    meteorX[i] = random(0, width);
    //print('meteorX = ' + meteorX[i]);
  }
  
  // Populate initial diameter values
  for(let i = 0; i < 5; i++){
    meteorDiameter[i] = random(10, 40);
    //print('meteorDiameter = ' + meteorDiameter[i]);
  }
  
  // Populate initial speed values
  for(let i = 0; i < 5; i++){
    speed[i] = random(0.5, 4);
    //print('speed = ' + speed[i]);
  }
}

// Runs over and over in a loop
function draw() {
  background(0);
  noStroke();
  
  // Draws the image starting from the top left corner
  imageMode(CORNER);
  background(bgImage); 
  noStroke(); 
  
  
  
  // Draw meteors to the screen
  for(let i = 0; i < 5; i++){
    imageMode(CENTER)
    image(meteorImage, meteorX[i], meteorY[i], meteorDiameter[i], meteorDiameter[i])
    
  }
  
  // Cycle through meteors to make them fall at different speeds
  for(let i = 0; i < 5; i++){
    meteorY[i] = meteorY[i] + speed[i];
  }
  
  // Draw the catcher to follow the mouse
  imageMode(CENTER)
  image(catcherImage, mouseX, mouseY, catcherWidth, catcherHeight);

  
  // Cycle through meteors to determine distance between meteor and catcher
  for(let i = 0; i < 5; i++){
    distance[i] = dist(meteorX[i], meteorY[i], mouseX, mouseY);
    //print('distance = ' + distance[i]);
  }
  
  // Cycle through meteors to test if meteor and catcher have intersected
  for(let i = 0; i < 5; i++){
    if(distance[i] < 25){
      // Redraw  meteor to top of screen at a random location on x-axis
      meteorY[i] = 0;
      meteorX[i] = random(0, width);
      
      // Set new meteor speed to random number between 1 and 4
      meteorDiameter[i] = random(10, 40);
      
      // Increase the score value by 1
      score = score + 1;
    }
  }
  
  // Cycle through meteors to test if intersected with screen bottom
  for(let i = 0; i < 5; i++){
    if(meteorY[i] > height){
      meteorY[i] = 0;
      meteorX[i] = random(0, width);
      meteorDiameter[i] = random(10, 40);
    }
  }
  
  // Draw the score to the screen
  fill(0, 254, 202);
  textAlign(LEFT);
  textSize(15);
  text('Meteors Caught: ' + score, 15, 380);
  

   if(score == 10){
    speed = 0;
    
    //win message
    textAlign(CENTER);
    textSize(20);
    text('You Win!', width/2, height/2);
    textSize(14);
    text('Click the mouse anywhere to restart.', width/2, height/2 + 30);
    
    // Restart the game if player clicks the mouse.
    if(mouseIsPressed){
    restart();
    }
  }
}
function restart(){
  meteorY = [0, 0 ,0 ,0 ,0];
  meteorX = [];
  speed = [];
  score = 0;
  setup();
  }