Finally, we put the variables and for loop from step 3 into the outer loop from step 2 to put it all together!

*/

​

var rWidth, rSpacing;

var rWidth2, rSpacing2;

​

function setup() {

  createCanvas(400, 400);

  background(100);

  noStroke();

}

​

​

​

function draw() {

  for (var y = 0; y < 400; y = y + 60) {

    fill(255);

    rect(0,y, 400, 30);

    fill(0);

    rect(0,y+30, 400, 30);

    rWidth = 30;

    rSpacing = 60;

    for (var x = 0; x < 9; x++) {

      if (rWidth > 0) {

        rWidth-=3;

        rSpacing-=3;

      } 

      fill(0);

      rect(x*rSpacing, y, rWidth, 30);

      fill(255);

      rect(x*rSpacing, y+30, rWidth, 30);

    }

    rWidth2 = 0;

    rSpacing2 = rWidth2*2;

​

    for (var x2 = 0; x2 < 6; x2++) {

      if (rWidth2 < 30) {

        rWidth2+=3;

        rSpacing2+=3;

      }

      fill(0);

      rect(x2*rSpacing2 + 270, y, rWidth2, 30);

      fill(255);

      rect(x2*rSpacing2 + 270, y+30, rWidth2, 30);

    }

  }

}