​

function setup() {

  createCanvas(400, 400);

  background(100);

  noStroke();

}

​

function draw() {

  /*

  We're going to use the same pattern of rectangles, except with inverted colors. That means that we can cheat the 'background' by drawing rectangles that are the width of the canvas. These will set up our "rows".

  */

  fill(255);

  rect(0,0, 400, 30);

  fill(0);

  rect(0,30, 400, 30);

  /*

  Setting the initial values for the rectangle width and spacing. The spacing is essentially double the width.

  */

  rWidth = 30;

  rSpacing = 60;

  /*

  Setting a for loop to get a single row of rectangles.

  We want 9 rectangles for the first part of our loop.

  */

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

    /*

    Everytime the loop iterates (draws 1 rectangle), we want the width and the spacing to decrease a little bit...

    */

    if (rWidth > 0) {

      rWidth-=3;

      rSpacing-=3;

    }

    /*

    draw 1 row of black rectangles...

    */

    fill(0);

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

    /*

    draw 1 row of white rectangles right underneath...

    */

    fill(255);

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

  }

}