function setup() {
  createCanvas(400, 400);
}

function draw() {
  const black = color(0, 0, 0);
  const white = color(255, 255, 255);
  const red = color(255, 0, 0);

  let millisecond = millis();
  let num_of_square = 10 - Math.floor((millisecond / 500) % 10);
  background(220);

  var j = 0;
  for (var i = 10; i > 0; i--) {
    console.log(j);
    var top_left_x = 0 + 20 * j;
    var top_left_y = 0 + 20 * j;
    var square_length = 400 - 40 * j;
    var bottom_right_x = 0 + 20 * j + 400 - 40 * j;
    var bottom_right_y = 0 + 20 * j + 400 - 40 * j;

    if (j + 1 >= num_of_square) {
      if (
        (mouseX > top_left_x) &
        (mouseY > top_left_y) &
        (mouseX < bottom_right_x) &
        (mouseY < bottom_right_y) &
        ((mouseX - top_left_x < 20) |
          (mouseY - top_left_y < 20) |
          (bottom_right_x - mouseX < 20) |
          (bottom_right_y - mouseY < 20))
      ) {
        fill(red);
      } else if (i % 2 == 0) {
        fill(black);
      } else {
        fill(white);
      }

      // square(20 * j, 20 * j, 400 - 20 * 2 * j);
      square(top_left_x, top_left_y, square_length);
    }
    j += 1;
  }
}