How do I get the code that was run inside a function to remain on the canvas after I refresh the background

Question

I'm currently trying to make a game themed around zombies, so I made a function that is supposed to draw an ellipse on the canvas that represents the zombie. I am unable to figure out how to get the code that was run by the function to remain on the canvas after the background refreshes. Does anybody have an answer to this problem?

  var playerI = {
        
          x: width + 500,
          y: height + 300
        
        };
       
        
            void setup(){
            
                size(1350, 755);
                
            }
            
       //function to spawn zombies
       
       void spawnZombie(let x, let y) {
           
          fill(0, 100, 0);
          ellipse(x, y, 50, 50);
       
       }
            
            void draw(){
            
                background(0, 120, 0);
                frameRate(60);
                
                //player
                
                fill(250, 220, 0);
                ellipse(playerI.x, playerI.y, 50, 50);
                
                  //player movement
                    
                    if (keyPressed && key == 'w') {
                  
                        playerI.y -= 1.5;      
                  
                    }
           
                    if (keyPressed && key == 's') {
                  
                        playerI.y += 1.5;      
                  
                    }
           
                    if (keyPressed && key == 'a') {
                  
                        playerI.x -= 1.5;      
                  
                     }
           
                    if (keyPressed && key == 'd') {
                  
                        playerI.x += 1.5;      
                  
                    }
               
                spawnZombie(random(0, 1350), random(0, 755));
         
                
                
}

Answer 1

Similar to how your player has it's x,y properties which are declared once and reused in draw() you would need to store in memory each zombie, otherwise many times a second you're simply redrawing ellipses at random positions.

I recommend using an array to store all the zombies. Additionally you might want to spawn a zombie less often (e.g. every 60 frames or even less often), otherwise it will get pretty crowded pretty quickly :)

Something along these lines:

var playerI = {

  x: 
width + 500, 
  y: 
height + 300

  };

var zombies = [];

void setup() {

  size(1350, 755);
}

//function to spawn zombies

void spawnZombie(let x, let y) {
  return {
    x: x,
    y: y,
    draw(): function(){
     fill(0, 100, 0);
     ellipse(x, y, 50, 50); 
    }
  }
}

void draw() {

  background(0, 120, 0);
  frameRate(60);

  //player

  fill(250, 220, 0);
  ellipse(playerI.x, playerI.y, 50, 50);

  //player movement

  if (keyPressed && key == 'w') {

    playerI.y -= 1.5;
  }

  if (keyPressed && key == 's') {

    playerI.y += 1.5;
  }

  if (keyPressed && key == 'a') {

    playerI.x -= 1.5;
  }

  if (keyPressed && key == 'd') {

    playerI.x += 1.5;
  }
  // spawn a new zombie every once in a while and remember it
  if(frameRate % 60 == 0){
    zombies.push(spawnZombie(random(0, 1350), random(0, 755)));
  }
  // draw existing zombies
  int numZombies = zombies.length;
  for(int i = 0 ; i < numZombies; i++){
    zombies[i].draw();
  }
}

Note that the above code isn't tested: the intention is to illustrate the idea.

If I recall processing.js supports classes, so you could write it that way. It might get confusing to mix Processing (java like) syntax with js though. Since Processing.js has been archived since 2018 you might also want to check out p5.js