You'll have to store the drawn rectangles, and re-draw them each frame, as to change background, everything gets cleared.

to store rectangles you can keep their co-ordinates in some array funcionality, and redraw each rectangle in draw() using "for" loop for example.

some quick draft code:

class myRect{ // class for storing rect co-ordinates
float x,y,w,h;
myRect(float _x, float _y, float _w, float _h){
  x = _x;
  y = _y;
  w = _w;
  h = _h;
}
}

ArrayList myRectangles = new ArrayList();
// add some rectangles to the list here:
myRectangles.add(new myRect(1,1,100,100));
myRectangles.add(new myRect(100,100,100,100));


void draw(){
background(0); // this clear background each time

for( int i = 0; i < myRectangles.size(); i++)
rect(myRectangles[i].x,myRectangles[i].y,myRectangles[i].w,myRectangles[i].h);
}

hope this would help

It was just quick pseudo-code to put you on the track...

An issue was the lack of setup(), another was his use of array index on ArrayList...
To keep the idea of extensible list, I give a corrected code:
Code:

class MyRect{ // class for storing rect co-ordinates
 float x,y,w,h;
 MyRect(float _x, float _y, float _w, float _h){
   x = _x;
   y = _y;
   w = _w;
   h = _h;
 }
 void draw(){
   rect(x, y, w, h);
 }
}

ArrayList myRectangles;
color backgr; 

void setup()
{
  size (500,500);
  smooth();
  noFill(); 
  myRectangles = new ArrayList();
  // add some rectangles to the list here:
  myRectangles.add(new MyRect(1,1,100,100));
  myRectangles.add(new MyRect(100,100,100,100));
}
 
void draw(){
background(backgr); // this clear background each time  
stroke(255);
for (int i = 0; i < myRectangles.size(); i++)
  ((MyRect)myRectangles.get(i)).draw();
} 

void keyPressed() {
  if (key == '+') {
    backgr += 10;
  }
  if (backgr > 255) {
    backgr = 255;
  }
 
  if (key == '-') {
    backgr -= 10;
  }
  if (backgr < 0) {
    backgr = 0;
  }
}
 

Note I delegated the drawing to the object itself: thus it is a little more than a simple structure.

put the statement that adds a rectangle to the list in the draw() method :

Quote:


(rectangles are drawn when user presses the mouse)

The important thing to notice here is that the first void draw() ... is wrapped inside the class MyRect definition's braces {}.  The second void draw() is the special one that Processing calls when it needs to draw a frame on the canvas.  Note also that the second draw() contains a line of code that calls the first one:

((MyRect)myRectangles.get(i)).draw();

Processing doesn't actually "distinguish" between the two -- it actually only knows about the special one because of where it's defined in the file.  Processing doesn't even "see" the draw() inside MyRect until it is explicitly called by that line in the special draw() method.

Another way of putting this is that MyRect's draw() could have been called drAwMe() instead (and the line that calls it updated to say ...drAwMe()) and everything would still work.  However, if the other draw() were changed to drAwMe(), Processing would not see the special draw() method and it wouldn't know to start the animation loop that calls it.

Similar to draw(), the definitions for setup() and keyPressed() are special Processing "hooks" that get invoked by Processing at the right times.

I hope this helps clarify.  If I've confused things further, try again and I'll attempt to undo the damage.  :-)

yep thank you! i guess i was confused that it was called draw() too... but now it really makes sense. Thanks again