​

function setup() {

  createCanvas(400, 400);

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

    colns.push(new Coln(b * width / 10, 0, width / 10, height)); 

  }

}

​

function draw() {

  background(220);

  for (let coln of colns) {

    coln.display(); 

  }

}

​

function mousePressed() {

  for (let coln of colns) {

    if (mouseX > coln.x && mouseX < coln.x + coln.w && mouseY > coln.y && mouseY < coln.y + coln.h) {

      coln.changeColor();

    }

  }

}

​

class Coln {

  constructor(x, y, w, h) {

    this.x = x; 

    this.y = y; 

    this.w = w;

    this.h = h; 

    this.color = 'white';

  }

​

  display() {

    fill(this.color); 

    rect(this.x, this.y, this.w, this.h); 

  }

​

  changeColor() {

    if (this.color === 'white') {

      this.color = 'red'; 

    } else {

      this.color = 'white'; 

    }

  }

}

​