createCanvas(400, 400);

}

​

function draw() {

  background(220);

​

  // What do I count to repeat this column

  // drawing code?

  // 2. Count pixels.

  // Start at pixel 0

  // End before we reach the width of the canvas.

  // Skip by the width of each column - width/20

  // width / 20 -- 1/20th of the width

  // let w = width/20;

  // for (let x = 0; x < width; x += w) {

  //   if (mouseX > x && mouseX < x + w) {

  //     // What do we want to loop?

  //     // Draw my column

  //     fill('red');

  //     rect(x, 0, w, height);

    // }

  // Counting columns

  // Start at col 0

  // Count up to, but not including 20 columns

  // Count every one, c++

  let w = width/20; // 20

  for (let c = 0; c < 10; c++) {

    // c0, x is 0

    // c1, x is 20

    // c2, x is 40

    // c3, x is 60

    // c4, x is 80 

    //c8, c is 160

    x = c * w;

    if (mouseX > x && mouseX < x + w) {

      // What do we want to loop?

      // Draw my column

      fill('blue');

       strokeWeight(2);

      rect(x, 0, w, height);

    }

  }

  for (let c = 10; c < 20 ; c++) {

    x = c * w;

    if (mouseX > x && mouseX < x + w) {

   strokeWeight(2);

      fill('red');

      rect(x, 0, w, height);

  }

  }

}