p5js--bounceBalls2.0

//change te number of balls by changing "number"
var number = 4;

var frac=1.01;


frameRate = 60
var balls = []
var alp = 100;

class Bubble {
  constructor() {
    this.x = random(20,width-20)
    this.y = random(20,height-20)
    this.vx = random(-3, 3);
    this.vy = random(-3, 3);
    this.mass = random(5,80);
  }
  move() {
    this.x = this.x + this.vx
    this.y = this.y + this.vy
  }

  bounce() {
    if (this.x > width - this.mass / 2 || this.x - this.mass / 2 < 0) {
      this.vx = this.vx * -1*frac;
      this.vx = this.vx * 1*frac;
    }
    if (this.y > height - this.mass / 2 || this.y - this.mass / 2 < 0) {
      this.vy = this.vy * -1
      this.vx = this.vx * 1
    }
  }

  show() {
    var r = map(this.x, 0, width, 0, 255)
    var b = map(this.x, 0, width, 255, 0)
    var g = map(this.y, 0, height, 0, 255)
    //stroke(255);
    strokeWeight(1)
    fill(r, g, b, alp);
    ellipse(this.x, this.y, this.mass, this.mass);
  }

  collide(him) {

    for (this.i = 1; this.i <= number; this.i++) {
      if (this.i > him || this.i < him) {
        if(dist(balls[him].x,balls[him].y,balls[this.i].x,balls[this.i].y)<(balls[him].mass+balls[this.i].mass+2)/2){



          this.aa = balls[him].vx;
          this.bb = balls[him].vy;

          balls[him].vx = (balls[this.i].vx * balls[this.i].mass) / balls[him].mass;
          balls[him].vy = (balls[this.i].vy * balls[this.i].mass) / balls[him].mass;

          balls[this.i].vx = (this.aa * balls[him].mass*frac) / balls[this.i].mass;
          balls[this.i].vy = (this.bb * balls[him].mass*frac) / balls[this.i].mass;

        }
      }
    }
  }
}
function setup() {
  createCanvas(600, 400);


  for (var i = 1; i <= number; i++) {
    balls[i] = new Bubble();
  }
}


function draw() {

    background(0, 0, 0);
  for (var i = 1; i <= number; i++) {
    balls[i].show()
    balls[i].move()
    balls[i].bounce()
    balls[i].collide(i)


  }
}