创建新对象Processing.js-随机球程序

Question

I'm learning to use Processing.JS have have a very basic idea on what I'm doing. I'm learning to create objects using cases. The aim of this code is to create random objects (balls) that bounce around the screen and when the mouse is clicked a new ball is created, leaving the original and the new created. I want to be able to do this multiple times, with all of the balls randomly bouncing around. I have the code working for one ball and have the code to a point where I'm creating new objects and they are being added to an array, however every time I click the single ball just gets reset to the middle of the screen. This is the code:

//random ball maker

Ball[] newBall = new Ball[1];

void setup(){
  size(500,500);
  newBall[0] = new Ball();
} 

void draw(){
  //newBall.display();
  // newBall.movement();
  for (int i = 0; i < newBall.length; i++) {  //Loops through all mrect objects
    newBall[i].display();
  }
  for (int i = 0; i < newBall.length; i++) {  //Loops through all mrect objects
    newBall[i].movement();
  }
}

void mousePressed(){
   Ball ballInstance = new Ball();
   newBall = (Ball[]) append(newBall, ballInstance);
}


class Ball{
  float xpos, ypos, xspeed, yspeed;

  Ball(){ 
    xpos = width/2;
    ypos = height/2;
    xspeed = 2;
    yspeed = 2.5;
    println("created new ball");
  } 

  void display(){
    background(100,100,100);
    fill(143,154,189);

    ellipseMode(CENTER);
    ellipse(xpos, ypos, 50,50);

  } 

  void movement(){
  xpos = xpos + xspeed; 
  ypos = ypos + yspeed; 

  if (xpos > width - 25 || xpos < 25){
    xspeed *= -1; }
  if (ypos > height - 25 || ypos < 25){
    yspeed *= -1; }

  }

} 

I feel my issue is with the initiation of the object or with the "void draw" function . What am I doing wrong??

Answer 1

Calling the background() function clears everything from the screen.

You call background() from inside the display() function in the Ball class. That means you draw each ball, but the last ball clears out all of the previous balls.

Move that line to inside the main draw() function.