​

function setup() {

  createCanvas(400, 400);

  angleMode(DEGREES);

  faces[0] = new drawFace(150, 150, -1, 3);

}

​

function draw() {

  background(220);

  // drawFace(150, 150, -1, 3);

  // drawFace(100, 100, 3, 1);

  for (var i = 0; i < faces.length; i++)

    faces[i].display();

}

​

function mouseClicked() {

let v;

  for (var i = 0; i < faces.length; i++) {

    v = faces[i].clicked();

  }

  if (v == false)

      faces.push(new drawFace(mouseX, mouseY, random(-2, 2), random(0.5, 3)));

}

​

function drawFace(x, y, r, s) {

  this.x = x;

  this.y = y;

  this.r = r;

  this.s = s;

  this.col = color(255, 250, 200);

​

  this.clicked = function() {

    var d = dist(mouseX, mouseY, this.x, this.y);

    if (d < 30) {

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

      return true;

    } else

      return false;

  }

​

  this.display = function() {

    push();

    translate(this.x, this.y);

    scale(this.s);

    rotate(frameCount * this.r);

    //head

    fill(this.col);

    ellipse(0, 0, 60, 80);

​

    //left eye

    fill(255);

    ellipse(-10, -5, 10, 5 * cos(frameCount / 2));

    point(-10, -5);

    line(-4, -14 - 2 * sin(frameCount / 2), -16, -14 + 2 * sin(frameCount / 2));

​

    //right eye

    ellipse(10, -5, 10, 5 * cos(frameCount / 2));

    point(10, -5);

    line(4, -14 - 2 * sin(frameCount / 2), 16, -14 + 2 * sin(frameCount / 2));

​

    //mouth

    fill(200, 140, 100);

    arc(0, 10, 20, 12 * sin(frameCount / 2), 0, 180, CHORD);

    pop()

  }

}