let handWave = false;   // State variable for hand wave animation

let dancing = false;    // State variable for dancing animation

let sayingGoodbye = false; // State variable for saying goodbye

let bgColor;            // Variable to store background color

let waveOffset = 0;     // Variable for wave offset in animation

let danceStartTime;     // Variable to track the start time of the dance

​

function setup() {

  createCanvas(800, 600);

  bgColor = color("#FFECB4");  // Initial background color

​

  // Create and position the buttons

  let mouthButton = createButton('Move Mouth');

  mouthButton.position(10, 10);

  mouthButton.mousePressed(toggleMouth);

​

  let handButton = createButton('Wave Hand');

  handButton.position(10, 40);

  handButton.mousePressed(toggleHandWave);

​

  let danceButton = createButton('Dance');

  danceButton.position(10, 70);

  danceButton.mousePressed(toggleDance);

​

  let goodbyeButton = createButton('Say Goodbye');

  goodbyeButton.position(10, 100);

  goodbyeButton.mousePressed(sayGoodbye);

}

​

function draw() {

  if (dancing) {

    bgColor = color(random(255), random(255), random(255));  // Change background color if dancing

  }

  background(bgColor);  // Set background color

​

  push();  // Save the current transformation state

  if (dancing) {

    translate(mouseX - width / 2, mouseY - height / 2);  // Move the whole character with the mouse

  }

  // Draw the hands behind the body

  if (handWave) {

    drawWavingHand();  // Draw the waving hand animation

  } else {

    drawStaticHand();  // Draw the static hands

  }

​

  // Draw the body after the hands to ensure the hands are behind the body

  drawCharacter();  // Draw the static parts of the character

​

  if (dancing) {

    drawDancingHands();  // Draw the dancing hands animation

  }

​

  if (sayingGoodbye) {

    drawGoodbye();  // Draw goodbye message and smiling mouth

  }

  pop();  // Restore the transformation state

}

​

function drawCharacter() {

  // Draw the neck

  noStroke();

  fill("#795548");

  rect(275, 222, 150, 300, 50);

​

  // Draw the dreadlocks

  strokeWeight(10);

  stroke("#000000");

  drawDreadlocs();

​

  // Draw the face

  strokeWeight(60);

  stroke("#795548");

  noStroke();

  fill("#8B5D4C");

  ellipse(350, 200, 350, 350);

​

  // Draw the body

  strokeWeight(5);

  stroke("#000000");

  fill("#A6003C");

  stroke("black");

  strokeWeight(10);

  square(200, 400, 300, 50);

​

  // Draw the ears

  noStroke();

  fill("#8B5D4C");

  square(152, 175, 60, 15);

  square(486, 175, 60, 15);

​

  // Draw the eyes

  drawEyes();

​

  // Draw the hairline

  fill("#000000");

  drawHairline();

​

  // Draw the eyebrows

  strokeWeight(10);

  stroke("#000000");

  line(259, 140, 300, 150);

  line(450, 140, 400, 150);

​

  // Draw the mouth

  if (sayingGoodbye) {

    // Draw smiling mouth

    noFill();

    stroke("#9A7061");

    strokeWeight(5);

    arc(350, 270, 75, 50, 0, PI);

  } else if (mouthOpen) {

    fill("#FFC4C4");

    ellipse(347, 270, 75, 50);  // Open mouth as ellipse

  } else {

    fill("#9A7061");

    rect(310, 245, 75, 85, 25);  // Closed mouth as rectangle

  }

​

  // Draw the blush

  noStroke();

  fill("#FFC4C4");

  rect(450, 225, 50, 50, 50);

  rect(205, 225, 50, 50, 50);

​

  // Draw the nose

  fill("#583123");

  rect(337, 180, 20, 50, 50);

}

​

function drawDreadlocs() {

  // Draw each dreadlock

  line(190, 120, 180, 375);

  line(200, 120, 200, 375);

  line(215, 120, 215, 375);

  line(230, 120, 230, 375);

  line(245, 120, 245, 375);

  line(260, 120, 260, 375);

  line(440, 120, 440, 375);

  line(455, 120, 455, 375);

  line(470, 120, 470, 375);

  line(485, 120, 485, 375);

  line(500, 120, 500, 375);

  line(500, 120, 523, 375);

}

​

function drawEyes() {

  // Draw the white part of the eyes

  ellipseMode(RADIUS);

  fill(255);

  ellipse(425, 185, 30, 30);

  ellipse(275, 185, 30, 30);

  // Draw the pupils

  ellipseMode(CENTER);

  fill("#582C1C");

  ellipse(425, 185, 30, 30);

  ellipse(275, 185, 30, 30);

}

​

function drawHairline() {

  // Draw the hairline using ellipses

  ellipse(185, 160, 30, 30);

  ellipse(194, 129, 30, 30);

  ellipse(210, 100, 30, 30);

  ellipse(230, 74, 30, 30);

  ellipse(260, 55, 30, 30);

  ellipse(290, 40, 30, 30);

  ellipse(320, 30, 30, 30);

  ellipse(355, 27, 30, 30);

  ellipse(387, 30, 30, 30);

  ellipse(420, 44, 30, 30);

  ellipse(450, 60, 30, 30);

  ellipse(475, 80, 30, 30);

  ellipse(495, 105, 30, 30);

  ellipse(505, 135, 30, 30);

  ellipse(515, 165, 30, 30);

}

​

function drawStaticHand() {

  // Draw the static hands behind the body

  strokeWeight(60);

  stroke("#795548");

  line(600, 300, 400, 650);  // Right hand

  line(86, 250, 300, 650);   // Left hand

}

​

function drawWavingHand() {

  // Draw the waving hands with noticeable wave effect behind the body

  strokeWeight(60);

  stroke("#795548");

  waveOffset = sin(frameCount * 0.2) * 50;

  line(600, 300 + waveOffset, 400, 650 + waveOffset);  // Right hand

  line(86, 250 + waveOffset, 300, 650 + waveOffset);   // Left hand

}

​

function drawDancingHands() {

  // Draw the hands moving up and down for the dance animation behind the body

  strokeWeight(60);

  stroke("#795548");

  let danceOffset = sin((frameCount - danceStartTime) * 0.2) * 50;

  line(600, 300 + danceOffset, 400, 650 + danceOffset);  // Right hand

  line(86, 250 + danceOffset, 300, 650 + danceOffset);   // Left hand

}

​

function drawGoodbye() {

  // Draw "Goodbye" text on the screen

  fill("#A6003C");

  textSize(32);

  textAlign(TOP, RIGHT);

  text("Goodbye!", 550, height / 3 - 100);

}

​

function toggleMouth() {

  // Toggle the mouth state

  mouthOpen = !mouthOpen;

}

​

function toggleHandWave() {

  // Toggle the hand wave state

  handWave = !handWave;

}

​

function toggleDance() {

  // Toggle the dancing state

  dancing = !dancing;

  if (dancing) {

    danceStartTime = frameCount;  // Record the start time of the dance

  } else {

    bgColor = color("#FFECB4");  // Reset background color when stopping dance

  }

}

​

function sayGoodbye() {

  // Set the state to say goodbye

  sayingGoodbye = true;

  setTimeout(() => {

    sayingGoodbye = false;

  }, 3000);  // Reset the state after 3 seconds

}

​

​

​