I'm working on a video piece for class and I'm using processing to create color patches for key replacement.

So, I want to
-make little rectangles appear at the point where I click my mouse.
-the rectangle holds its position for three seconds then slowly moves 10 pixels on the x- axis.
-after said travel distance, the box stops moving and holds its position
-I want to be able to have multiple boxes on the screen doing this. anotherwords, the boxes don't disappear

so here's what I got:



void setup(){
 size(500, 500);
 background(0);
 noStroke();
 frameRate(30);
}

void draw(){}

void mousePressed(){
  x = 0;  
 rect(mouseX + x, mouseY, 40, 10);
   x = x+1;
   if (x = x+20){
     x = mouseX + 20;
   }
}

what am I missing?

class myBox {
 int x;
 int y;
 int t;
 color c;
 myBox(){
  x = mouseX-5;
  y = mouseY-5;
  t = millis();
  c = color(random(255),random(255),random(255));
 }
 void drawMyself(){
   fill(c);
   if( (millis() - t) < 3000 ){
     rect(x, y, 10, 10);
   } else if( (millis() - t) < 7000 ){
     x-=0.1;
     rect(x, y, 10, 10);
   } else {
     rect(x, y, 10, 10);
   }
 }
 
}

ArrayList myBoxes;

void setup(){
size(500, 500);
background(0);
noStroke();
myBoxes = new ArrayList();
}

void draw(){
 background(0);
 for (int i = 0; i < myBoxes.size(); i++) {
   myBox aBox = (myBox) myBoxes.get(i);
   aBox.drawMyself();
 }  
}

void mousePressed(){
 myBoxes.add(new myBox());
}

// It's not exactly what you wanted.
// But it is a step in the right direction.
// Feel free to edit it as needed...