I know this is a silly little example but I'm just trying to do a simpler version of a more involved sketch to solve this one problem.

I think I am getting a clue that you have to work with the draw function to do animations, which this is. This post was helpful:  http://forum.processing.org/topic/problems-with-animation-in-void-draw

this code below works

Reason
Your code doesn't do what you want because of the following. Remember draw() stores internally what it has to draw througout running draw(). Only at the very end of draw(), in its last line, it throws everything on the screen at once. 
Therefore your rectangles are added up to the internal scene of draw() but not shown. Only at the end of draw, they are all shown at once.
Remember also that draw() is called about 60 times per second. Not in your Code because you delay it. But because of the automatically looping of draw() and the fact that it paints its stuff only once at the end and not throughout it is wise to choose an approach that uses the looping of draw() itself and just check how much time passed since the last rect has been added.
That's what I did, using the variable border to determine how many rects are shown.

The whole area is discussed here.

Greetings, Chrisir 

// edited

1. int[] x = new int[3];
2. int border=0;
3. int timeSinceLastLetter;
4. //
5. void setup() {
6.   size(400, 300);
7.   background(0);
8.   smooth();
9.   for (int i=0;i<3;i++) {
10.     x[i] = i*100;
11.   }
12.   timeSinceLastLetter = millis();
13. } // func
14. //
15. void draw() {
16.   background(0); // edited
    
17.   println(timeSinceLastLetter);
18.   for (int i = 0; i <  border; i++) {
19.     rect(x[i], 100, 50, 50);
20.   } // for
21.   if (millis ()- timeSinceLastLetter >= 3000) {
22.     timeSinceLastLetter = millis();
23.     border++;
24.     if (border>3)
25.       border=3; // edited
    
26.   } // if
27. } // func

Thanks for explaining it so clearly. I thought it wasn't possible to use a for loop at all but it's good to see that it is. Here is what I came up with just using draw() itself:

Hello,

Well, yes..... it works.

But if you think further, you would have disadvantages when you use the solution in a bigger project:

• Your "while" stops draw() from looping fast. A parallel process wouldn't be painted (or only after 3 secs) because draw doesn't reach the end till then
• Your noLoop() also stops your draw from looping totally. A process coming after this initial process wouldn't be executed at all.

To demonstrate both I inserted a small rect on the right that moves all the time up and down. When the 3 big rects are there it gets faster. Both features wouldn't be possible in your solution.

That isn't to say your way of doing it is bad, just to say it would have disadvantages in a bigger project.


Greetings, Chrisir  

1. int[] x = new int[3];
2. int border=0;
3. int timeSinceLastLetter;
4. int singleRect_i = 20;
5. int singleRect_i_Add = 1;
6. //
7. void setup() {
8.   size(400, 300);
9.   for (int i=0;i<3;i++) {
10.     x[i] = i*100+20;
11.   }
12.   timeSinceLastLetter = millis();
13. } // func
14. //
15. void draw() {
16.   background(0);
17.   println(timeSinceLastLetter);
18.   for (int i = 0; i <  border; i++) {
19.     rect(x[i], 100, 50, 50);
20.   } // for
21.   // ------------------------
22.   rect(370, singleRect_i, 10, 10);
23.   singleRect_i += singleRect_i_Add;
24.   if (singleRect_i>100 || singleRect_i<20)
25.     singleRect_i_Add*=-1;
26.   // ------------------------   
27.   if (border<3) { 
28.     if (millis ()- timeSinceLastLetter >= 3000) {
29.       timeSinceLastLetter = millis();
30.       border++;
31.       if (border==3)
32.         singleRect_i_Add*=3;
33.       if (border>3)
34.         border=3;
35.     } // if
36.   } // if
37. } // func

Again, great explanation. I was thinking of draw() as a constraint before and now I'm seeing it's a tool to be worked with depending on what you need to do. Thanks so much!

Hi, 

I think this tutorial  of Abe Pazos from  http://funprogramming.org should help you