// ccl-oop-14-collision

​

let balls = [];

​

function setup() {

  createCanvas(400, 400);

  background(50);

​

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

    balls.push(new Ball(width / 2, height / 2, random(10, 20)));

  }

}

​

function draw() {

  background(50);

​

  // update and display the objects

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

    let ball = balls[i];

​

    // update first

    ball.move();

    ball.bounce();

​

    // pass the array of all balls, so that the object

    // can loop through all of them, and figure out which

    // overlap

    ball.checkCollisions(balls);

​

    // lastly, display

    ball.display();

  }

}

​

class Ball {

  constructor(x, y, rad) {

    this.x = x;

    this.y = y;

    this.rad = rad;

    this.xSpd = random(-5, 5);

    this.ySpd = random(-5, 5);

    this.color = color(255);

  }

​

  move() {

    this.x += this.xSpd;

    this.y += this.ySpd;

  }

​

  bounce() {

    if (this.x < 0 || this.x > width) {

      this.xSpd *= -1;

    }

    if (this.y < 0 || this.y > height) {

      this.ySpd *= -1;

    }

  }

​

  checkCollisions(otherBalls) {

    // first, assume there is no collision (set the color to white)

    this.color = color(255);

​

    // then, let's go through each of the objects in the

    // array we got passed as an argument, and see whether

    // at least one of them overlaps

​

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

      let otherBall = otherBalls[i];

​

      // make sure we aren't comparing against ourself

      if (otherBall != this) {    

        let distance = dist(this.x, this.y, otherBall.x, otherBall.y);

        if (distance < this.rad + otherBall.rad) {

          // we collided (change color)

          this.color = color(random(255), random(255), random(255));

        }

      }

    }

  }

​

  display() {

    stroke(this.color);

    fill(this.color, 100);

    ellipse(this.x, this.y, this.rad * 2, this.rad * 2);

  }

}