createCanvas(400, 400);

}

​

function draw() {

  background(255);

  face.updateState();

  face.display();

  face.changeMood(-0.2);

}

​

function mouseClicked() {

  face.changeMood(5);

}

​

var face = {

  x: 200,

  y: 200,

  diameter: 200,

  mood: 100,

  state: "HAPPY",

​

  changeMood: function (value) {

    this.mood = this.mood + value;

    this.mood = constrain(this.mood, 0, 100);

  },

​

  updateState: function () {

    if (this.mood < 30) {

      this.state = "ANGRY";

    } else if (this.mood < 70) {

      this.state = "NEUTRAL";

    } else {

      this.state = "HAPPY";

    }

  },

​

  display: function () {

    fill(255, 255, 0);

    strokeWeight(15);

    stroke(0);

    switch (this.state) {

      case "HAPPY":

        circle(this.x, this.y, this.diameter);

        line(this.x - 30, this.y - 30, this.x - 30, this.y - 10);

        line(this.x + 30, this.y - 30, this.x + 30, this.y - 10);

        arc(this.x, this.y + 20, 60, 60, 0, PI);

        break;

      case "NEUTRAL":

        circle(this.x, this.y, this.diameter);

        line(this.x - 30, this.y - 30, this.x - 30, this.y - 10);

        line(this.x + 30, this.y - 30, this.x + 30, this.y - 10);

        line(this.x - 30, this.y + 30, this.x + 30, this.y + 30);

        break;

      case "ANGRY":

        circle(this.x, this.y, this.diameter);

        line(this.x - 40, this.y - 30, this.x - 20, this.y - 20);

        line(this.x + 40, this.y - 30, this.x + 20, this.y - 20);

        arc(this.x, this.y + 40, 60, 60, PI, 0);

        break;

    }

    fill(255, 200, 0);

    noStroke();

    var moodLength = map(this.mood, 0, 100, 0, this.diameter);

    rect(this.x - this.diameter * 0.5, this.y + this.diameter * 0.6, moodLength, 10);

  },

};

​