Move your cursor up and down to change the size of the mouth.

*/

​

function setup() {

  createCanvas(400, 400);

  // Create instructions for the user

  instructions = createP("Move your cursor up and down to change the size of the mouth.");

  // Position the instructions below the canvas

  instructions.position(10, height + 10); 

}

​

function draw() {

  // Drawing the character

  background(220);

  noStroke();

  fill('rgb(219,191,153)');

  ellipse(200, 150, 200);

  rect(175, 240, 50, 75);

  fill('black');

  rect(60, 300, 275, 200, 50, 50);

  fill('white');

  ellipse(150, 150, 50);

  ellipse(250, 150, 50);

  fill('black');

  ellipse(150, 150, 20);

  ellipse(250, 150, 20);

  fill('white')

  text('singing is my passion', 200, 350);

  // Adding interactivity 

  var maxSize = 150; // Maximum size for the mouth

  var minSize = 10;  // Minimum size for the mouth

  var s = map(mouseY, 0, height, maxSize, minSize); // Map mouseY to a value between maxSize and minSize

  var x = width / 2;

  var y = 200; // Position of the mouth

  fill('rgb(51,0,0)');

  ellipse(x, y, s, s / 2); // Draw the mouth with the new size

}

​