let bubble2;

​

function setup() {

  createCanvas(600, 400);

  bubble1 = new Bubble(150,150,20);

  bubble2 = new Bubble(350,200,60);

​

}

​

function draw() {

  background(51);

  bubble1.show();

  bubble1.move();

  bubble1.randomCol();

  bubble1.edges();

  bubble2.show();

  bubble2.move();

  bubble2.col();

  bubble2.edges();

}

​

class Bubble {

​

  constructor(tempX,tempY,tempR) {

    this.x = tempX;

    this.y = tempY;

    this.r = tempR;

  }

​

  move() {

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

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

​

  }

  show() {

    stroke(255);

    strokeWeight(4);

    //noFill();

   this.ellipse = ellipse(this.x, this.y, this.r*2);

  }

  col() {

  fill (255,255,0);

  }

  randomCol() {

  fill (random(255),random(255),random(255));

  }

  edges () {

    // I want to reset them but its not working 

    if (this.x > width || this.y > height) {

  this.ellipse = resetMatrix();

  }

  }

}