let p2;

let tink;

​

function preload() {

  tink = loadSound('Tink.mp3');

}

​

function setup() {

  createCanvas(400, 400);

  p1 = new Particle(100, 100, 'red');

  p2 = new Particle(300, 300, 'blue');

}

​

function draw() {

  background(220);

​

  // Move p1 (WASD keys)

  if (keyIsDown(87)) p1.moveUp();    // W

  if (keyIsDown(83)) p1.moveDown();  // S

  if (keyIsDown(65)) p1.moveLeft();  // A

  if (keyIsDown(68)) p1.moveRight(); // D

​

  // Move p2 (Arrow keys)

  if (keyIsDown(UP_ARROW)) p2.moveUp();

  if (keyIsDown(DOWN_ARROW)) p2.moveDown();

  if (keyIsDown(LEFT_ARROW)) p2.moveLeft();

  if (keyIsDown(RIGHT_ARROW)) p2.moveRight();

​

  p1.update();

  p2.update();

  p1.collide(p2);

  p2.collide(p1);

}

​

class Particle {

  constructor(tempX, tempY, color) {

    this.x = tempX;

    this.y = tempY;

    this.r = 25;

    this.color = color;

    this.speed = 5;

  }

​

  update() {

    this.show();

    this.bounce();

  }

​

  moveUp() {

    this.y -= this.speed;

  }

​

  moveDown() {

    this.y += this.speed;

  }

​

  moveLeft() {

    this.x -= this.speed;

  }

​

  moveRight() {

    this.x += this.speed;

  }

​

  show() {

    noStroke();

    fill(this.color);

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

  }

​

  bounce() {

    this.x = constrain(this.x, this.r, width - this.r);

    this.y = constrain(this.y, this.r, height - this.r);

  }

  collide(other) {

    if (dist(this.x, this.y, other.x, other.y) < this.r + other.r) {

      tink.play();

    }

  }

}