How to remove previous shape after draw() in Processing

Question

I cant figure this out. I have a sketch with little rotating rectangles on it. They rotate on every draw(). However the previous rectangle remains visible. I tried moving background() around but it either gets rid of all the rectangles apart from one or it doesn't clear the screen. I would like to be able to clear all the rectangles after each draw.

Here is the code:

//Create array of objects 
ArrayList<Circle> circles = new ArrayList<Circle>();
ArrayList<Connector> centrePoint = new ArrayList<Connector>();

void setup(){
  size(800, 800);
  frameRate(1);
  rectMode(CENTER);
  background(204);
   for(int i = 1; i < 50; i++){
       float r = random(100,height-100);
       float s = random(100,width-100);
       float t = 20;
       float u = 20;
       println("Print ellipse r and s " + r,s);
       circles.add(new Circle(r,s,t,u,color(14,255,255),random(360),random(5),random(10)));
   }
    //Draw out all the circles from the array
    for(Circle circle : circles){
      circle.draw();
      float connectStartX = circle.x1;
      float connectStartY = circle.y1;
      println("PrintconnectStartX and Y  " + connectStartX,connectStartY);
        for(Circle circleEnd : circles){
          float connectEndX = (circleEnd.x1);
          float connectEndY = (circleEnd.y1);
          centrePoint.add(new Connector(connectStartX,connectStartY,connectEndX,connectEndY));
}
 }

//For each ellipse, add the centre point of the ellipse to array
    for(Connector connectUp : centrePoint){
      println(connectUp.connectStartX ,connectUp.connectStartY ,connectUp.connectEndX ,connectUp.connectEndY);
      stroke(100, 0, 0);
     if (dist(connectUp.connectStartX ,connectUp.connectStartY ,connectUp.connectEndX ,connectUp.connectEndY) < 75){
      connectUp.draw(connectUp.connectStartX ,connectUp.connectStartY ,connectUp.connectEndX ,connectUp.connectEndY);
     }
    }

//For the line weight it should equal the fat of the node it has come from ie
//for each circle, for each connectUp if the x==connectStartX and y==connectStartY then make the line strokeWeight==fat
for(Circle circle : circles){
for(Connector connectUp : centrePoint){

    if (connectUp.connectStartX == circle.x1 & connectUp.connectStartY == circle.y1 & (dist(connectUp.connectStartX ,connectUp.connectStartY ,connectUp.connectEndX ,connectUp.connectEndY) < 75)){
    print(" true "+ circle.fat);
    float authority = circle.fat;
    strokeWeight(authority*1.5);
    connectUp.draw(connectUp.connectStartX ,connectUp.connectStartY ,connectUp.connectEndX ,connectUp.connectEndY);
    }
  }
}
}

void update(){
}
void draw() {
 for(Circle circle : circles){
  circle.rot =+0.02;
  circle.draw();
  circle.rot = random(-6,6);

}
}


//Need to connect each ellipse to all the other ellipses

class Connector {
   public float connectStartX; 
   public float connectStartY;
   public float connectEndX;
   public float connectEndY;
   public color cB;
   public float thickness;

   public Connector(float connectStartX, float connectStartY, float connectEndX, float connectEndY){
      this.connectStartX = connectStartX;
      this.connectStartY = connectStartY;
      this.connectEndX = connectEndX;
      this.connectEndY = connectEndY;
      //this.cB = tempcB;
      //this.thickness = thickness;
   }

void draw(float connectStartX, float connectStartY, float connectEndX, float connectEndY){
     line(connectStartX, connectStartY, connectEndX, connectEndY);
      // float fat = random(255);
       //fill(fat);
       stroke(100, 0, 0);
   }
   }

class Circle{
   public float x1; 
   public float y1;
   public float x2;
   public float y2;
   public color cB;
   public float rot;
   public float fat = random(5);
   public float fert = 0.1;

   public Circle(float x1, float y1, float x2, float y2, color tempcB, float rot, float fat, float fert){
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;

      this.cB = tempcB;
      //Tilt - I think this is done in radians
      this.rot = rot;
      //Authority -this is the fill
      this.fat = fat;
      //Fertility- this is a multiplier for the tilt
      this.fert = fert;
   }
   void draw(){   
      pushMatrix();
        translate(x1, y1);
        fert = random(0.5);
        rot = random(-6,6);
        rotate(rot*fert);
        translate(-x1, -y1);
        //float fat = random(255);
        fill(fat);
        rect(x1, y1, 24, 36);
        popMatrix();
   }
}

Answer 1

You've got a few things going on in your code that I've seen in your previous posts. The way you're doing your drawing doesn't make a ton of sense, and I'll explain why.

Here's what most Processing sketches do:

• Use the setup() function to setup any data structures you'll use in your program. Don't do any drawing from the setup() function.
• Call background() every frame to clear out old frames.
• Draw everything you want to be drawn in the frame in the draw() function.
• Modify the data structures to change what you're drawing on the screen.

Your code is a bit too long for an MCVE, so here's a little example that handles the drawing in a more standard way:

ArrayList<PVector> circles = new ArrayList<PVector>();

void setup() {
  size(500, 500);
  ellipseMode(RADIUS);

  //setup your data structures here
  circles.add(new PVector(250, 250));

  //don't do any drawing yet
}

void mousePressed() {
  //modify the data structure whenever you want to change what's on the screen
  circles.add(new PVector(mouseX, mouseY));
}

void keyPressed() {
  //modify the data structure whenever you want to change what's on the screen
  if (!circles.isEmpty()) {
    circles.remove(0);
  }
}

void draw() {
  //call background every frame to clear out old frames
  background(0);

  //draw everything
  for (PVector p : circles) {
    ellipse(p.x, p.y, 20, 20);
  }
}

Notice how this is different from what you're doing. Here's what you do:

• You use the setup() function to setup your data structures, but then you draw the background and some of the objects to the screen.
• You then don't call background() from draw(), so you're always stuck with whatever has already been drawn.
• You then only draw a subset of what you want on the screen, so you can't redraw your whole scene.

You have to modify your code to no longer draw anything from setup(), to call the background() function every frame, and to draw everything you want on the screen every frame.