* Creative Coding Workshop #4 Demo - Two Faces Bouncing Around

 *

 * Jack B. Du (github@jackbdu.com)

 */

​

// a class (template/blueprint) for face

class Face {

  // constructor for initializing the object with these provided parameters

  constructor(x, y, d) {

    this.d = d;

    this.pos = createVector(x, y);

    this.v = createVector(random(-1,1),

                          random(-1,1));

  }

  // chech if touching edges

  checkEdges() {

    // check left and right edges

    if (this.pos.x < this.d/2 ||

        this.pos.x > width - this.d/2) {

      this.v.x = this.v.x * -1;

    }

    // check top and bottom edges

    if (this.pos.y < this.d/2 ||

        this.pos.y > height - this.d/2) {

      this.v.y = this.v.y * -1;

    }

  }

  // move face by adding velocity

  move() {

    this.pos.add(this.v);

  }

  // display current face

  display() {

    circle(this.pos.x,this.pos.y,this.d);

    circle(this.pos.x-this.d/5,this.pos.y-this.d/10,this.d/4);

    circle(this.pos.x+this.d/5,this.pos.y-this.d/10,this.d/4);

  }

}

​

// initialize face and face2 as global variables

let face;

let face2;

​

function setup() {

  createCanvas(400, 400);

  // create an instance of Face class

  face = new Face(200,200,100);

  // create another instance of Face class

  face2 = new Face(200,200,50);

}

​

function draw() {

  background(220);

  // check edges for face

  face.checkEdges();

  // move face

  face.move();

  // display face

  face.display();

  // check edges for face2

  face2.checkEdges();

  // move face2

  face2.move();

  // display face2

  face2.display();

}