////let b1;
//let b2;
let shapeArr = [];
function setup() {
  createCanvas(500, 500);
  // b1 = new Bubble(random(50, width - 50), random(50, height - 50));
  // b2 = new Bubble(random(50, width - 50), random(50, height - 50));
  angleMode(DEGREES);

  for (let i = 0; i < 10; i++) {
    shapeArr.push(new Bubble(random(50, width - 50), random(50, height-50), random(1, 40)));  // add a new MovingShape to our array each loop     
  }
}

function draw() {
  background(0);
  //b1.move();
  //b2.move();
  //b1.display();
  //b2.display();


  // b1.intersects(b2);


  for (let i = 0; i < 10; i++) {
    shapeArr[i].move();
    shapeArr[i].display();

    if (i < 9) {
      shapeArr[i].intersects(shapeArr[i + 1]);
    }
  }




}



class Bubble {

  constructor(startX, startY) {

    this.x = startX;
    this.y = startY;
    this.r = 50;
    this.col = color(0, 0, random(125, 255));

    this.xSpeed = random(0.3, 5);
    this.ySpeed = random(0.3, 5);
    this.xDir = 1;
    this.yDir = 1;
    this.angle = 1;



  }

  spin(val) {
    this.angle = this.angle + val;
  }

  changeColor() {



    this.col = color(0, 0, random(125, 255));
    this.spin(1);
  }

  move() {

    this.x = this.x + (this.xSpeed * this.xDir);
    this.y = this.y + (this.ySpeed * this.yDir);

    if (this.x > (width - (this.r)) || this.x < (this.r)) {
      this.xDir = this.xDir * -1;
    }

    if (this.y > (height - (this.r)) || this.y < (this.r)) {
      this.yDir = this.yDir * -1;
    }

  }

  display() {

   push();
    translate(this.x, this.y);
    rotate(this.angle);

    //fill(random(125, 255), 0, 0);







    stroke(255);
    noFill();
    ellipse(0, 0, this.r * 2, this.r * 2);
    line(0 - this.r, 0, 0 + this.r, 0)

    pop();

  }



  intersects(other) {
    let d = dist(this.x, this.y, other.x, other.y);

    if (d < this.r + other.r) {
      this.changeColor();
      other.changeColor();


      // overlapping


    }

  }
}
