I don't understand why my nested for loop works-CodePudding

The objective is to draw a number of squares on a canvas depending on the defined number of rows and columns:

int squareSize = 20;
int distance = squareSize   10;
int numberofRows = 8;
int numberofColumns = 10;

for (int rows = 0; rows < numberofRows; rows  )
{

    for(int columns = 0; columns < numberofColumns ; columns  )
     {
        square(30   (distance * rows), 30   (distance * columns), squareSize);

     }
}

I'm confused as of to how the program still executes the code in the inner for() loop when the number of rows is lower than the number of columns. I thought I'd have a problem since it was to my understanding that the inner loop would only be read and executed only and only if the outer loop proved to be true (so in this case, the program would stop working when the number of rows reached 8.)

...Yet the program still gives the expected results when I insert a lower number of rows than of columns. Why is that? EDIT: English isn't my first language so I made a very stupid mistake in my question. Obviously my question is how the code is executed when the number of rows is lower than the number of columns. I've edited the post accordingly.

CodePudding user response：

You need to read slowly your code. As said, the two loops are detached one from each other. Also replacing the variables with their values might be useful to understand:

for (int i= 0; i< 8; i  )
{

    for(int j = 0; j< 10; j  )
     {
        square(30   (30* i), 30   (30* j), 20);

     }

}

As you can see the square function first is called with i=0 j=0 then it's:

square(30,30,20).
Then i=0, j=1
square(30,60,20)
Then i=0 j=2
square(30,90,20).
...
i=0 j=10
square(30,330,20)
Then the inner for reached the maximum and then you come again to your outer loop and add one to i. 
i=1 j=0 
square(60,30,20)
i=1 j=1
square(60,60,20)
...
i=1 j=10
square(60,330,20)
...

keep doing this exercise until the maximum value of i=8 and j=10.

square(240,330,20)

All these square functions will be called in that specific order with those arguments. If you want further insight please tell what this square function does.

Regards.

CodePudding user response：

The inner loop will execute for numberofColumns time's for every execute of the main loop. So the main loop will execute numberofRows time's and therefore the inner loop will execute numberofColumns*numberofRows time's

CodePudding user response：

Bandolero's answer is great ( 1) !

Here is a commented version of your sketch that visualises each iteration step as an animation frame:

int squareSize = 20;
int distance = squareSize   10;
int numberOfRows = 8;
int numberOfColumns = 10;

int rows;
int columns;
// do we still need to iterate through rows or columns or are we done ?
boolean isUpdating = true;

void setup(){
  size(290, 350);
  frameRate(3);
  reset();
}

void reset(){
  background(255);
  rows = 0;
  columns = 0;
  isUpdating = true;
}

void draw(){
  
  if(isUpdating){
    // render each square
    fill(255);
    float x = 30   (distance * rows);
    float y = 30   (distance * columns);
    square(x, y, squareSize);
    // render rows, columns values
    fill(0);
    text(rows   ","   columns, x, y   squareSize * 0.75);
    
    // increment each row
    rows  ;
    // if the end of a row is reached, reset the row count and increment the column count
    if(rows >= numberOfRows){
      rows = 0;
      columns  ;
    }
    // if we completed columns we're done
    if(columns >= numberOfColumns){
      isUpdating = false;
    }
    
    println("rows=", rows, "/", numberOfRows, "columns=", columns, "/", numberOfColumns);
  }
}

void keyPressed(){
  if(key == ' '){
    reset(); 
  }
  if(key == 'r'){
    numberOfRows--;
  }
  if(key == 'R'){
    numberOfRows  ;
  }
  if(key == 'c'){
    numberOfColumns--;
  }
  if(key == 'C'){
    numberOfColumns  ;
  }
}

Essentially, instead of using the for in one frame, it's using each new frame to increment.

Feel free to change the frameRate() to something faster or slower and use the SPACE key to reset the animation (and c/C to decrease/increase columns and r/R to decrease/increase rows)