// When we cover nested loops -

//   come back to this and see if you can simplify

//   the below code by nesting, one for red and one

//   for blue.

​

function setup() {

  createCanvas(600, 600);

}

​

function draw() {

  background(220);

  // Put down the blue circles first

  noStroke();

  fill('blue');

​

  for (let j = 0; j < 5; j++) {

    circle(100, 100 + j * 100, 100);

  }

  for (let j = 0; j < 5; j++) {

    circle(100 + 100, 100 + j * 100, 100);

  }

  for (let j = 0; j < 5; j++) {

    circle(100 + 200, 100 + j * 100, 100);

  }

  for (let j = 0; j < 5; j++) {

    circle(100 + 300, 100 + j * 100, 100);

  }

  for (let j = 0; j < 5; j++) {

    circle(100 + 400, 100 + j * 100, 100);

  }

  // Red stroke circles go on top

  noFill();

  stroke('red');

  for (let j = 0; j < 5; j++) {

    circle(100, 100 + j * 100, mouseX);

  }

  for (let j = 0; j < 5; j++) {

    circle(100 + 100, 100 + j * 100, mouseX);

  }

  for (let j = 0; j < 5; j++) {

    circle(100 + 200, 100 + j * 100, mouseX);

  }

  for (let j = 0; j < 5; j++) {

    circle(100 + 300, 100 + j * 100, mouseX);

  }

    for (let j = 0; j < 5; j++) {

    circle(100 + 400, 100 + j * 100, mouseX);

  }

}