Click the bubbles to change their colour

Code:

let bubbles = [];

function setup() {
  createCanvas(400, 400);
  for(let i = 0; i < 10; i++){
    x = random(width)
    y = random(height)
    z = random(50, 50); 
    let b = new Bubble(x, y, z)
    bubbles.push(b)
  }
}

function draw() {
  background(220);
  for(let i = 0; i < bubbles.length; i++){
    bubbles[i].shows()
    bubbles[i].moves()
  }
  //bubbles.moves()
  //bubbles.shows()
}

function mousePressed(){
  for(let i = 0; i < bubbles.length; i++){
    bubbles[i].clicked(mouseX, mouseY)
  }
  }

class Bubble {
  constructor(x, y, z){
    this.x = x;
    this.y = y;
    this.z = z;
    this.col = 0;
  }
  
  clicked(x, y){
    let d = dist(this.x, this.y, x, y)
    if(d < this.z){
     console.log("clickedddd")
      this.col = random(255)
    }
  }
  
  moves(){
    //let speed = 1;
    this.x = this.x + random(-5, 5);
    this.y = this.y + random(-5, 5);
    /*if(this.x > width){
      
       }*/
  }
  
  shows(){
    fill(255, 0, 0, 100)
    fill(this.col)
    noStroke()
    ellipse(this.x, this.y, this.z)
  }
  
}


/*function mouseDragged(){
  for(let i = 0; i < 100; i++){
    x = random(width)
    y = random(height)
    z = 50; 
    let b = new Bubble(x, y, z, z)
    bubbles.push(b)
  }

}*/