title: How to remove previous shape after draw() in Processing
body: <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>