let yellow0 = color(255, 191, 79);

  let yellow1 = color(255, 172, 28);

  let yellow2 = color(255, 209, 130);

  let yellow3 = color(255, 228, 181);

​

  createCanvas(400, 400);

  noStroke();

  background(yellow0)

  fill(yellow1);

  ellipse(150,150,500);

  fill(yellow2);

  ellipse(200,150,350);

  fill(yellow3);

  ellipse(150,150,200);

}

​

let option = 1;

​

function draw(){

  drawMe();

  //pupils that move with mouse movement

  let pupils = color(94, 69, 60);

  fill(pupils);      

  ellipse((width/2)-30+(0.01*mouseX), (height/2)-10+(0.01*mouseY), 15);

  ellipse((width/2)+30+(0.01*mouseX), (height/2)-10+(0.01*mouseY), 15);

  //inner eye that move with mouse movement

  fill(0);

  ellipse((width/2)+30+(0.01*mouseX), (height/2)-10+(0.01*mouseY), 5, 5);

  ellipse((width/2)-30+(0.01*mouseX), (height/2)-10+(0.01*mouseY), 5, 5);

}

​

function mouseClicked(){

  // first mouse click, changes background from yellow to blue (along with other changes further described in drawMe() function)

  if(option == 1){ 

      let blue0 = color(59, 197, 255);

      let blue1 = color(135, 219, 255);

      let blue2 = color(110, 212, 255);

      let blue3 = color(161, 227, 255);

      //non concentric circles in the background

      background(blue0);

      noStroke();

      fill(blue1);

      ellipse(150,150,500);

      fill(blue2);

      ellipse(200,150,350);

      fill(blue3);

      ellipse(150,150,200);

      // changes option to 2 so that the frame changes with next mouse click

      option = 2;

      // drawMe() function is called todraw the face over the desired background

      drawMe(); 

  }

​

  // second mouse click, changes background from blue to green (along with other changes further described in drawMe() function)

  else{if(option == 2){

        let green0 = color(67, 166, 60);

        let green1 = color(0, 139, 0);

        let green2 = color(76, 187, 23);

        let green3 = color(97, 194, 86);

​

        background(green0);

        noStroke();

        fill(green1);

        ellipse(150,150,500);

        fill(green2);

        ellipse(200,150,350);

        fill(green3);

        ellipse(150,150,200);

        option = 3;

        drawMe();

      }

      else{if(option == 3){

            let yellow0 = color(255, 191, 79);

            let yellow1 = color(255, 172, 28);

            let yellow2 = color(255, 209, 130);

            let yellow3 = color(255, 228, 181);

​

            background(yellow0)

            fill(yellow1);

            ellipse(150,150,500);

            fill(yellow2);

            ellipse(200,150,350);

            fill(yellow3);

            ellipse(150,150,200);

            drawMe();

            //resets option to 1 so that backgrounds can loop

            option = 1;

            }  

        } 

    }

}

​

//function that draws my portrait, so that it can be easily called by other functions when changing the background

function drawMe(){

  let hair = color(36,39,46);

  let skin = color(255, 200, 170);

  let pupils = color(94, 69, 60);

  let lips = color(248, 131, 121);

  let earrings = color(218,165,32);

  let nose = color(255, 217, 195);

  // hair

  fill(hair);

  noStroke();

  rectMode(CENTER);

  rect((width/2), (height/2), 200, 220, 200, 100, 10, 10); 

  // face

  fill(skin);

  noStroke();

  rectMode(CENTER);

  rect((width/2), (height/2), 160, 180, 90, 100, 100, 100);  

  //eyes (white part)

  fill(255);

  ellipse((width/2)-30, (height/2)-10, 30, 20);

  ellipse((width/2)+30, (height/2)-10, 30, 20);

  //eyebrows

  fill(hair);

​

  if(option == 1){ //straight brows

      bezier((width/2)-15, (height/2)-30, (width/2)-35, (height/2)-35, (width/2)-45, (height/2)-30, (width/2)-50, (height/2)-25);

      bezier((width/2)+15, (height/2)-30, (width/2)+35, (height/2)-35, (width/2)+45, (height/2)-30, (width/2)+50, (height/2)-25);    

  }

  else{if(option == 2){ //surprised brows

            bezier((width/2)-15, (height/2)-40, (width/2)-35, (height/2)-45, (width/2)-45, (height/2)-40, (width/2)-50, (height/2)-35);

            bezier((width/2)+15, (height/2)-40, (width/2)+35, (height/2)-45, (width/2)+45, (height/2)-40, (width/2)+50, (height/2)-35); 

        } 

       else{if(option == 3){ //pissed off brows

            bezier((width/2)-15, (height/2)-25, (width/2)-35, (height/2)-35, (width/2)-45, (height/2)-30, (width/2)-50, (height/2)-30);

            bezier((width/2)+15, (height/2)-25, (width/2)+35, (height/2)-35, (width/2)+45, (height/2)-30, (width/2)+50, (height/2)-30);

            }

       }

  }

​

​

  //lips

  fill(lips);

  //arc((width/2), (height/2)+40, 40, 40, 0, PI, CHORD)

  if(option == 1){

    arc((width/2), (height/2)+40, 40, 40, 0, PI, CHORD);

  }

  else{if(option == 2){

          rect((width/2), (height/2)+50, 30,30,20,40);

      }

       else{if(option == 3){

          rect((width/2), (height/2)+50, 40,10,10,10);

           }

       }

  }

  //right bangs

  fill(hair);

  rect((width/2)+70, (height/2)-40, 40, 50, 140, 110, 110, 110); 

  rect((width/2)+60, (height/2)-60, 30, 50, 140, 110, 110, 110); 

  rect((width/2)+40, (height/2)-70, 50, 50, 140, 110, 110, 110); 

  rect((width/2)+20, (height/2)-80, 45, 50, 140, 110, 110, 110);

  //left bangs

  rect((width/2)-70, (height/2)-40, 40, 50, 140, 110, 110, 110); 

  rect((width/2)-60, (height/2)-60, 30, 50, 140, 110, 110, 110); 

  rect((width/2)-40, (height/2)-70, 50, 50, 140, 110, 110, 110); 

  rect((width/2)-20, (height/2)-80, 45, 50, 140, 110, 110, 110); 

​

  //nose

  noStroke();

  fill(nose);

  rect((width/2), (height/2)+15, 12, 20, 140, 110, 110, 110); 

  //ears

  fill(skin);

  rect((width/2)-80, (height/2)+5, 20, 50, 10, 10, 10, 10);

  rect((width/2)+80, (height/2)+5, 20, 50, 10, 10, 10, 10);

​

  //earrings

  fill(earrings);

  circle((width/2)+80,(height/2)+20, 5);

  circle((width/2)-80,(height/2)+20, 5);

  //airpods

  fill(255);

  if(option == 1|| option ==2 ){

      circle((width/2)+80,(height/2)+2, 12);

      rect((width/2)+82, (height/2)+8, 5, 15, 10, 10, 10, 10);

      circle((width/2)-80,(height/2)+2, 12);

      rect((width/2)-82, (height/2)+8, 5, 15, 10, 10, 10, 10);

      fill(0)

      rect((width/2)-82, (height/2)+8, 3, 5, 10, 10, 10, 10);

      rect((width/2)+82, (height/2)+8, 3, 5, 10, 10, 10, 10);

  }

​

}