Uso di for annidati

All'interno di un for possono essere inseriti anche altri for.

// height=300
let x;
let y;
let xOrigin;
let yOrigin;
let attendi;
let cancella;  // inutile?

function setup() {
  createCanvas(windowWidth, 300);
  textAlign(LEFT, CENTER);
  textSize(9);
  setupResizable();
}

function setupResizable() {
  x = 5;
  y = 5;
  xOrigin = (width - 200) / 2;
  yOrigin = (height - 200) / 2;
  attendi = 1;
//  cancella = false;
  cancella = true;
  background(255);
  translate(xOrigin, yOrigin);
  scale(2);
  fill(200);
  noStroke();
  square(0, 0, 100);
}

function windowResized() {
  resizeCanvas(windowWidth, 300);
  setupResizable();
}

function draw() {

  if ((frameCount % 30) == 0) {

    translate(xOrigin, yOrigin);
    scale(2);

    if (attendi > 0) {
      --attendi;
      if (attendi == 0 && cancella) {
        background(255);
        fill(200);
        noStroke();
        square(0, 0, 100);
      }
    } else {

      fill(255);
      stroke(0);
      strokeWeight(1); //???
      square(x, y, 10);

      noStroke();
      fill(255);
//      rect(0, -20, 100, 20);
//      rect(-20, 0, 20, 100);
      rect(-3, -20, 100, 20);
      rect(-29, -1, 29, 100);

      // evidenzia x
      fill(255, 255, 128);
//      rect(x - 5, -15, 10, 10);
//      rect(x-12, -17, 23, 12);

      fill(212, 255, 255);
//      rect(-15, y - 4, 10, 10);
//      rect(-26, y-6, 23, 12);

      // tacche
      stroke(192);
      line(x+1, -5, x+1, -1);
      line(-5, y, -1, y);

      fill(0);
      noStroke();

      strokeWeight(3);
      stroke(255, 255, 160);
//      text("x", x, -10);
//      text("y", -10, y);
      text("x="+x, x-6, -10);
      stroke(212, 255, 255);
      text("y="+y, -27, y);

      y += 20;
      if (y > 65) {
        y = 5;
        x += 20;
//        attendi = 1;
//        cancella = false;
        if (x > 85) {
          x = 5;
          y = 5;
          attendi = 2;
          cancella = true;
        }
      }
    }
  }
}

// height=100 lines=auto
function setup() {
    background( 200 );

    for (let x = 5;  x < 86;  x = x+20) {
        for (let y = 5;  y < 66;  y = y+20) {
            square( x,y, 10 );
        }
    }
}

for (let x = 5;  x < 86;  x = x+20) {

Esegue 5 cicli con x che va da 5 a 85.

    for (let y = 5;  y < 66;  y = y+20) {

Esegue 4 cicli con y che va da 5 a 65. Trovandosi all'interno dell'altro for, le sue istruzioni vengono ripetute 20 volte (4 * 5).

Far apparire l'ultima riga di quadrati intervenendo sui parametri di uno dei due for.