let faceX = 250;

let faceY = 250;

let bg_counter = 1;

let button1_Xcentre = 450;

let button1_Ycentre = 60;

let radius = 30;

let hat_counter = 0;

let button2_Xcentre = 450;

let button2_Ycentre = 150;

let smile_counter = 0;

let button3_Xcentre = 450;

let button3_Ycentre = 240;

​

​

function setup() 

{

  createCanvas(500, 415); //create a canvas

}

​

//calling all functions

function draw()

{

  if (bg_counter % 2 != 0) //choosing the purple or orange background

  {

    background_default();

  }

  else

  {

   background_second(); 

  }

  bg_buttons();

  hat_buttons();

  smile_buttons();

  shirt();

  face_shape();

  ears();

  body();

  //reference_lines();

  eyes();

  nose();

  beard();

  lips();

  hair();  

  hat();

}

​

function face_shape()

{

  fill("#F1C27D");

  strokeWeight(2);

  ellipse(faceX,faceY, 180, 200);

  if (bg_counter % 2 != 0) //disguise rectangles to give shape to the face

  {

    fill("#BF00FF");

  }

  else

  {

    fill("#FF944D");

  }

  strokeWeight(0);

  rect(150, 200, 20, 100);

  strokeWeight(2);

  line(169, 200, 171, 298);

  if (bg_counter % 2 != 0)

  {

    fill("#BF00FF");

  }

  else

  {

    fill("#FF944D");

  }

  strokeWeight(0);

  rect(330, 200, 20, 100);

  strokeWeight(2);

  line(331, 200, 329, 298);

}

​

function body() //neck and shirt shape

{

  fill("#F1C27D");

  strokeWeight(0);

  rect(faceX - 30, 330, 60, 40);

  strokeWeight(2);

  line(faceX - 30, 345, 250 - 30, 375);

  line(faceX - 30, 375, 250 - 170, 420);

  line(faceX + 30, 345, 250 + 30, 375);

  line(faceX + 30, 375, 250 + 170, 420);

}

​

function eyes()

{

  strokeWeight(1);

  fill("white");

  ellipse(210, 220, 40, 15); //white part of eyes

  ellipse(290, 220, 40, 15);

  fill("brown");

  ellipse(210, 220, 15, 15); //brown part

  ellipse(290, 220, 15, 15);

  fill("black");

  ellipse(210, 220, 8, 8); //black part

  ellipse(290, 220, 8, 8);

  fill("white");

  ellipse(214, 217, 4, 4); //small white dot

  ellipse(294, 217, 4, 4);

}

​

function nose()

{

  //three different tones to give depth

  strokeWeight(0);

  fill("#C68642");

  triangle(faceX - 10, 275,250, 230,250, 275);

  fill("#E0AC69");

  triangle(faceX + 10, 275,250, 230,250, 275);

  fill("#8D5524");

  triangle(faceX -10, 275, 250, 280, 250 + 10, 275);

  strokeWeight(1);

}

​

function lips()

{

  strokeWeight(0);

  if (smile_counter % 2 == 1) //serious face

  {

    fill("#F5635B");

    triangle(faceX - 30, 310, 250 - 4, 300, 250, 305);

    triangle(faceX + 30, 310, 250 + 4, 300, 250, 305);

    triangle(faceX - 30, 310, 250, 305, 250 + 30, 310);

    fill("#FF8886");

    arc(faceX, 310, 62, 18, 0, PI);

  }

  else //laughing

  {

    fill("#F5635B");

    strokeWeight(2)

    arc(faceX, 297, 71, 50, 0, PI);

    fill("white");

    rect(faceX - 34, 297, 69, 7);

    strokeWeight(0);

  }

}

​

function hair()

{

  fill("black");

  arc(faceX, 200, 163, 160, PI, 0); //black arc

  fill("#F1C27D");

  for (let i = 0; i < 7; i++) //filled skin colored triangles to give effect of hair

  {

    triangle(170 + (i*20), 204, 170 + ((i+1)*20), 175, 170 + ((i+1)*20), 200);

  }

  triangle(310, 204, 325, 175, 328, 200); //increase precision by doing the last one manually

}

​

function shirt()

{

  strokeWeight(2);

  if (bg_counter % 2 != 0) //color depending on the season

    {

      fill("blue");

    }

  else

    {

      fill("red");

    }

  triangle(faceX - 170, 420, 250, 365, 250 + 170, 420)

  fill("black");

  ellipse(faceX, 375, 60, 25);

  strokeWeight(0);

  fill("#F1C27D");

  ellipse(faceX, 370, 59, 25);

}

​

function ears()

{

  fill("#F1C27D");

  arc(faceX - 79, faceY - 5, 20, 30, HALF_PI, HALF_PI + PI);

  arc(faceX - 78.5, 263, 10, 15, HALF_PI, HALF_PI + PI);

  arc(faceX + 79, faceY - 5, 20, 30, HALF_PI + PI, HALF_PI);

  arc(faceX + 78.5, 263, 10, 15, HALF_PI + PI, HALF_PI);

}

​

function beard() //will be below the layer of lips

{

  fill("#454442");

  strokeWeight(2);

  arc(faceX, faceY + 50, 158, 93, PI + PI, PI);

  strokeWeight(0);

  rect(172, 281, 156, 19);

}

function background_default() //concentric circles

{

  strokeWeight(0);

  fill("#6300A9");

  ellipse(faceX, faceY, 700, 700);

  fill("#8200C5");

  ellipse(faceX, faceY, 500, 500);

  fill("#A100E2");

  ellipse(faceX, faceY, 400, 400);

  fill("#BF00FF");

  ellipse(faceX, faceY, 300, 300);

}

​

function background_second() //summers

{

  strokeWeight(0);

  fill("#FF6600");

  ellipse(faceX, faceY, 700, 700);

  fill("#FF7519");

  ellipse(faceX, faceY, 500, 500);

  fill("#FF8533");

  ellipse(faceX, faceY, 400, 400);

  fill("#FF944D");

  ellipse(faceX, faceY, 300, 300);

}

​

​

function bg_buttons() //buttons change shapes as well

{

  if (bg_counter % 2 != 0)

    {

      fill("orange");

  strokeWeight(2);

  ellipse(450, 60, 60, 60);

  //draw sun

  strokeWeight(4);

  stroke(255, 0, 0);

  line(435, 45, 465, 75);

  line(435, 75, 465, 45);

  line(450, 40, 450, 80);

  line(430, 60, 470, 60);

  ellipse(450, 60, 25, 25);

  stroke(0, 0, 0);

    }

  else

  {

    //draw clouds

    fill("blue");

    strokeWeight(2);

    ellipse(450, 60, 60, 60);

    fill(255, 255, 255);

    strokeWeight(0);

    arc(440, 68, 30, 40, PI, 0);

    arc(462, 68, 20, 20, PI, 0);

  }

}

​

function hat_buttons()

{

  fill("green");

  strokeWeight(2);

  ellipse(450, 150, 60, 60);

  fill("yellow");

  arc(450, 155, 30, 30, PI, 0);

  rect(433, 155, 35, 5);

  if (hat_counter % 2 == 0)

    {

      stroke(255,0,0);

      strokeWeight(5);

      line(422, 169, 480, 132);

      stroke(0,0,0);

    }

  else

    {

      strokeWeight(0);

    }

}

​

function smile_buttons()

{

  fill("pink");

  strokeWeight(2);

  ellipse(450, 240, 60, 60);

  fill("black");

  ellipse(440, 230, 10, 10);

  ellipse(460, 230, 10, 10);

  if (smile_counter % 2 == 0)

    {

      rect(435, 245, 30, 10);

    }

  else

    {

      arc(450, 245, 30, 30, 0, PI); //change emotions

    } 

}

​

function mouseClicked()

{

  if (mouseX >= button1_Xcentre - radius && mouseX <= button1_Xcentre + radius && mouseY >= button1_Ycentre - radius && mouseY <= button1_Ycentre + radius)

    {

      bg_counter++;

    }

  if (mouseX >= button2_Xcentre - radius && mouseX <= button2_Xcentre + radius && mouseY >= button2_Ycentre - radius && mouseY <= button2_Ycentre + radius)

    {

      hat_counter++;

    }

  if (mouseX >= button3_Xcentre - radius && mouseX <= button3_Xcentre + radius && mouseY >= button3_Ycentre - radius && mouseY <= button3_Ycentre + radius)

    {

      smile_counter++;

    }

}

​

function hat()

{

  if (hat_counter % 2 == 0)

    {

      strokeWeight(2);

      fill("green");

      rect(145, 168, 205, 15);

      fill("yellow");

      rect(165, 160, 165, 8);

      fill("green");

      arc(250, 160, 140, 110, PI, 0);

    }

}

​

function reference_lines()

{

  line(250, 100, 250, 400); //vertical line

  line(170, 200, 330, 200); //line 1

  line(170, 230, 330, 230); //line 2

  line(170, 275, 330, 275); //line 3

  line(170, 300, 330, 300); //line 4

}

​

​