Bubbles changing color with cursor

This is the link.

let bubbles = [];

function setup() {
  createCanvas(400, 400);
  for(var i = 0; i < 500; i++){
    x = random(width)
    y = random(height)
    bubbles[i] = new Shapes(x, y, 50, 50)
  }
}

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


class Shapes {
  constructor(x, y, size){
    this.x = x;
    this.y = y;
    this.size = size;
  }
  
  moves(){
    
    this.x = this.x + random(-5, 5)
    this.y = this.y + random(-5, 5)
    if(mouseX > 200){
      noCursor()
      fill(255, 0, 0, 20)
      noStroke()
      ellipse(this.x, this.y, this.size, this.size)
    }
    if(mouseY > 200){
      fill(0, 0, 255, 20)
      ellipse(this.x, this.y, this.size, this.size)
    }
  }  
  
  show(){
   noCursor()
   fill(0, 80)
   noStroke()
   ellipse(this.x, this.y, this.size, this.size)
  
  }

}

Leave a Reply