​

let canW = 400,canH = 400;

let radius = 25;

let xSpeed = 6, ySpeed = 10;

​

function setup() {

  createCanvas(canW,canH);

  ball1 = new Bubble(170,90,xSpeed,ySpeed,radius*2,200,10,0);

  ball2 = new Bubble(200,70,xSpeed,xSpeed,radius*2,150,100,250);

}

​

function draw() {

  background(250);

  // console.log("prev,  ",ball1.x);

  ball1.move();

  // console.log(ball1.x);

  ball1.bounce();

  ball1.showBubble();

  ball2.move();

  ball2.bounce();

  ball2.showBubble();

}

​

​

class Bubble{

  constructor(x=300,y=200,xSpeed = 4, ySpeed = 4, diameter = 80,r=100,g = 150,b=255) {

  this.x = x;

  this.y = y;

  this.xSpeed = xSpeed;

  this.ySpeed = ySpeed;

  this.diameter = diameter;

  this.r = r;

  this.g = g;

  this.b = b;

}

  move() {

    this.x += this.xSpeed;

    this.y += this.ySpeed;

  }

  bounce() {

    if(this.x >= canW - this.diameter/2 || this.x < this.diameter/2) {

      this.xSpeed *= -1;

    } 

    if(this.y >= canH - this.diameter/2 || this.y < this.diameter/2) {

      this.ySpeed *= -1;

    }

  }

  showBubble() {

    strokeWeight(0);

    fill(this.r,this.g,this.b);

    circle(this.x,this.y,this.diameter);

  }

}

​

​