​

​

var words = [ "good", "bad"];

var bubbles= [];

var index= 0;

​

function setup() {

  createCanvas(600, 600);

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

   let x = random(width);

   let y= random(height);

    let r = random(10,50);

  }

  }

​

​

function draw() {

  background(55,155,200);

for (i = 0; i< bubbles.length; i++){

 bubbles[i].move();

 bubbles[i].show();

  }

}

​

class Bubble{

  constructor(x,y,r){

  this.x= x;

  this.y= y;

   this.r = r;

    this.brightness= 0;

    this.text= words[index];

}

  changeColor(bright){

    this.brightness = bright;}

   rollover(px,py){

    let d= dist( px,py, this.x,this.y);

     if(d<this.r){

    // console.log("clciked on bubble");

       return true;

     } else{

       return false;}

   }

  move(){

   this.x= this.x+random(-2,2);

   this.y= this.y +random (-2,2);

  }

  show(){

  stroke(50,255,100,50);

  strokeWeight(2);

  fill(255,100,250,50);

  ellipse( this.x, this.y, this.r,this.r);

  text(words[index], this.x,this.y);

  }

}

​