let face;

​

let happyButton, neutralButton, angryButton;

​

// Define a variable with the CSS styles

var buttonStyle = `

  padding: 5px 10px;

  font-size: 16px;

  border: 1px solid #ccc;

  border-radius: 5px;

​

  cursor: pointer;

`;

​

​

function setup() {

  createCanvas(400, 400);

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

  //face2 = new Face(400, 200, 150, [255, 255, 0]);

   // Create buttons and position them below the canvas

  // Create buttons and position them below the canvas

  happyButton = createButton('Make Happy'); // Create 'Make Happy' button

  happyButton.position(20, 340); // Set position

  happyButton.style(buttonStyle);

  happyButton.mousePressed(makeHappy); // Set mood on press

  neutralButton = createButton('Make Neutral'); // Create 'Make Neutral' button

  neutralButton.position(145, 340); // Set position

  // Apply the styles to the button

  neutralButton.style(buttonStyle)

  neutralButton.mousePressed(makeNeutral); // Set mood on press

  angryButton = createButton('Make Angry'); // Create 'Make Angry' button

  angryButton.position(280, 340); // Set position

  // Apply the styles to the button

  angryButton.style(buttonStyle)

  angryButton.mousePressed(makeAngry); // Set mood on press

}

​

function draw() {

  background(220);

  face.draw();

​

  //face.setMood(100);

}

​

​

function makeHappy() {

  face.setMood(80);

}

​

function makeNeutral() {

  face.setMood(40);

}

​

function makeAngry() {

  face.setMood(0);

}

​

​

​

class Face {

  constructor(x, y,mood) {

    this.x = x;

    this.y = y;

    this.mood = mood;

  }

​

  draw() {

    if (this.mood > 50) {

      this.drawHappyFace(this.x, this.y);

    } else if (this.mood > 25) {

      this.drawNeutralFace(this.x, this.y);

    } else {

      this.drawAngryFace(this.x, this.y);

    }

  }

​

  setMood(mood) {

    this.mood = mood;

  }

​

  update() {

    this.mood = this.mood - 1;

    if (this.mood < 0) {

      this.mood = 0;

    }

  }

​

   drawHappyFace(x, y) {

    push();

    translate(x, y);

    fill(255, 255, 0);

    strokeWeight(15);

    stroke(0);

    circle(0, 0, 200);

    line(-30, -30, -30, -10);

    line(30, -30, 30, -10);

    arc(0, 20, 60, 60, 0, PI);

    pop();

  }

​

  drawNeutralFace(x, y) {

    push();

    translate(x, y);

    fill(255, 200, 150);

    strokeWeight(15);

    stroke(0);

    circle(0, 0, 200);

    line(-30, -30, -30, -10);

    line(30, -30, 30, -10);

    line(-30, 30, 30, 30);

    pop();

  }

​

  drawAngryFace(x, y) {

    push();

    translate(x, y);

    fill(255, 80, 0);

    strokeWeight(15);

    stroke(0);

    circle(0, 0, 200);

    line(-40, -30, -20, -20);

    line(40, -30, 20, -20);

    arc(0, 40, 60, 60, PI, 0);

    pop();

  }

​

}

​