How to remove previous shape after draw() in Processing
<p>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.</p>

<p>Here is the code:</p>

 

<pre class="lang-java prettyprint-override"><code>//Create array of objects 
ArrayList&lt;Circle&gt; circles = new ArrayList&lt;Circle&gt;();
ArrayList&lt;Connector&gt; centrePoint = new ArrayList&lt;Connector&gt;();

void setup(){
  size(800, 800);
  frameRate(1);
  rectMode(CENTER);
  background(204);
   for(int i = 1; i &lt; 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) &lt; 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 &amp; connectUp.connectStartY == circle.y1 &amp; (dist(connectUp.connectStartX ,connectUp.connectStartY ,connectUp.connectEndX ,connectUp.connectEndY) &lt; 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();
   }
}
</code></pre>