Why is the "topping1" not falling from the top of the screen and instead randomly teleporting across the screen?

Question

I'm trying to make a basic catch game where the user catches the objects (toppings). Right now, I'm just trying to make the animation of the topping falling (on p5.js) and for some reason, rather than falling, it just seems to be randomly generating across the screen.

function gamefunction() {
  //console.log("wo");
  let toppings = [];
  let positiony = -100;
  
  clear();
  createCanvas(600, 600);
  //background(bckgrnd1)
  fill(255,255,255)
  textSize(20)
  let score = 0
  let itemsmissed = 0
  text("PRESS SHIFT TO QUIT", 10, 25);
  text("SCORE: "+score, 465, 50);
  text("ITEMS MISSED: "+itemsmissed, 425, 25);
  pizza.resize(80, 0);
  //GENERATE RAINDROPS
  
  
  while (positiony < 600) {
    let positionx = getRandomInteger(50, 550);
    let toppingchoice= getRandomInteger(0, 2);
    let toppingImage;
    
    
    toppings.push({x: positionx, y:positiony, image: topping1});
    
    positiony += getRandomInteger(50, 200);
  }
  
  for (let topping of toppings) {
    topping.y += 1;
    image(topping.image, topping.x, topping.y);
    
    if(topping.y >= 600) {
      itemsmissed++;
      topping.y = -100;
    }
  }
  
  requestAnimationFrame(gamefunction);
  

So far, I've tried putting the defining section (excuse my bad English I'm not sure what the word is for this!) in other places in-case it is a reference error, but that has only made the website crash. I have also tried changing the organisation of the code, which only caused various errors and did not change anything. As a last resort, I also asked chatGPT, which unfortunately did not help.

Any help would be greatly appreciated. Sorry if this question is a little more simple than others - I'm very new to coding :-) Thank you!