How to build a loop

Let’s draw a checkerboard

Let’s draw an NxN checkerboard with squares of a given size, with the top left of the board at a given x, y point

const checkerboard = (n, sq, x, y) => {
}

n is number of squares (e.g. 8 for a chess board)

sq is size of each square

x and y are coordinates of top left corner of board

Draw one square

First, write a helper function:

const drawFilledSquare = (x, y, size, color) => {
  drawFilledRect(x, y, size, size, color);
}

Now, let’s start.

const checkerboard = (n, sq, x, y) => {
  drawFilledSquare(x, y, sq, "blue");
}

Draw next square in row

const checkerboard = (n, sq, x, y) => {
  drawFilledSquare(x, y, sq, "blue");
  drawFilledSquare(x + sq, y, sq, "blue");
}

Yeah, these squares are both going to be blue.

We’ll deal with that later.

And another

const checkerboard = (n, sq, x, y) => {
  drawFilledSquare(x, y, sq, "blue");
  drawFilledSquare(x + sq, y, sq, "blue");
  drawFilledSquare(x + sq * 2, y, sq, "blue");
}

Regularize

const checkerboard = (n, sq, x, y) => {
  drawFilledSquare(x, y, sq, "blue");
  drawFilledSquare(x + sq * 1, y, sq, "blue");
  drawFilledSquare(x + sq * 2, y, sq, "blue");
}

Regularize some more

const checkerboard = (n, sq, x, y) => {
  drawFilledSquare(x + sq * 0, y, sq, "blue");
  drawFilledSquare(x + sq * 1, y, sq, "blue");
  drawFilledSquare(x + sq * 2, y, sq, "blue");
}

Now these three lines are all exactly the same except for the number we multiply sq by.

Add a variable

const checkerboard = (n, sq, x, y) => {
  let c = 0;
  drawFilledSquare(x + sq * c, y, sq, "blue");
  c++;
  drawFilledSquare(x + sq * c, y, sq, "blue");
  c++;
  drawFilledSquare(x + sq * c, y, sq, "blue");
}

Loop it to draw a row

const checkerboard = (n, sq, x, y) => {
  for (let c = 0; c < n; c++) {
    drawFilledSquare(x + sq * c, y, sq, "blue");
  }
}

Now draw two rows

const checkerboard = (n, sq, x, y) => {
  for (let c = 0; c < n; c++) {
    drawFilledSquare(x + sq * c, y, sq, "blue");
  }
  for (let c = 0; c < n; c++) {
    drawFilledSquare(x + sq * c, y + sq, sq, "blue");
  }
}

We copied the whole for loop.

The only change is the argument we pass for the square’s y value is y + sq instead of y.

Three rows

const checkerboard = (n, sq, x, y) => {
  for (let c = 0; c < n; c++) {
    drawFilledSquare(x + sq * c, y, sq, "blue");
  }
  for (let c = 0; c < n; c++) {
    drawFilledSquare(x + sq * c, y + sq, sq, "blue");
  }
  for (let c = 0; c < n; c++) {
    drawFilledSquare(x + sq * c, y + sq * 2, sq, "blue");
  }
}

Regularize

const checkerboard = (n, sq, x, y) => {
  for (let c = 0; c < n; c++) {
    drawFilledSquare(x + sq * c, y + sq * 0, sq, "blue");
  }
  for (let c = 0; c < n; c++) {
    drawFilledSquare(x + sq * c, y + sq * 1, sq, "blue");
  }
  for (let c = 0; c < n; c++) {
    drawFilledSquare(x + sq * c, y + sq * 2, sq, "blue");
  }
}

Loop it

const checkerboard = (n, sq, x, y) => {
  for (let r = 0; r < n; r++) {
    for (let c = 0; c < n; c++) {
      drawFilledSquare(x + sq * c, y + sq * r, sq, "blue");
    }
  }
}

Pretty good but all the squares are the same color.

We want to draw either a blue square or a red square.

const checkerboard = (n, sq, x, y) => {
  for (let r = 0; r < n; r++) {
    for (let c = 0; c < n; c++) {
      if (???) {
        drawFilledSquare(x + sq * c, y + sq * r, sq, "blue");
      } else {
        drawFilledSquare(x + sq * c, y + sq * r, sq, "red");
      }
    }
  }
}

Which squares are blue?

Color it

const checkerboard = (n, sq, x, y) => {
  for (let r = 0; r < n; r++) {
    for (let c = 0; c < n; c++) {
      if (r % 2 === c % 2) {
        drawFilledSquare(x + sq * c, y + sq * r, sq, "blue");
      } else {
        drawFilledSquare(x + sq * c, y + sq * r, sq, "red");
      }
    }
  }
}