make grid appear one square at a time

herefor1reason

I need to be able to make a grid appear in an animation with each square appearing one at a time. I tried using a for loop, which draws one at a time in the draw function, but the way it draws it all still appears all at once. I need to adjust the frame rate so it resets one by one, however im not 100% sure how to do this. The code i have for this inside draw is:

  //resets squares once grid is full
  if (reset==!reset){
    for (float x=0;x<width;x=x+width/6.0){
      for(float y=0;y<height;y=y+height/6.0){
        fill(255);
        rect(x,y,width/6.0,height/6.0);
      }
    }
  }

TfGuy44

int numToDraw;
int time;

void setup() {
  size(400, 400);
  numToDraw = -1;
  time = millis() + 100;
}

void draw() {
  background(0);
  int t = 0;
  for (int j=0; j<height/20; j++) {
    for (int i=0; i<width/20; i++) {
      if( t > numToDraw ){
        break;
      }
      rect(i*20,j*20,20,20);
      t++;
    }
  }
  if( millis() > time ){
    numToDraw++;
    time = millis() + 100;
  }
  if( numToDraw > height/20 * width/20 ){
    numToDraw = -1;
  }
}

koogs

if (reset==!reset){

!!??

Draw is called many times but the screen is only updated at the end of draw meaning everything you do as part of draw will appear at once. So the trick is to draw only one (more) thing per draw loop, keep a count on a global variable. Which is what the above is doing

https//forum.processing.org/two/discussion/8085/i-display-images-in-sequence-but-i-see-only-the-last-one-why