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);

  // 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 Sad'); // Create 'Make Neutral' button

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

  // Apply the styles to the button

  neutralButton.style(buttonStyle)

  neutralButton.mousePressed(makeSad); // 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 makeHappy() {

  mood = 80;

}

​

function makeSad() {

  mood = 50;

}

​

function makeAngry() {

  mood = 20;

}

​

​

function draw() {

  background(255);

  // Draw face based on mood

  if (mood < 30) {

    drawAngryFace();

  } else if (mood < 70) {

    drawSadFace();

  } else {

    drawHappyFace();

  }

}

function drawHappyFace() {

  fill(255, 255, 0);

  strokeWeight(15);

  stroke(0);

  circle(200, 200, 200);

  line(170, 170, 170, 190);

  line(230, 170, 230, 190);

  arc(200, 220, 60, 60, 0, PI);

}

​

function drawSadFace() {

  fill(155, 200, 255);

  strokeWeight(15);

  stroke(0);

  circle(200, 200, 200);

  line(170, 170, 170, 190);

  line(230, 170, 230, 190);

  arc(200, 240, 60, 60, PI,0); 

}

​

function drawAngryFace() {

  fill(255, 80, 0);

  strokeWeight(15);

  stroke(0);

  circle(200, 200, 200);

  line(160, 170, 180, 180);

  line(240, 170, 220, 180);

  arc(200, 240, 60, 60, PI, 0);

}