let eyes = 10;

let iris=3;

let Smokeoffset = -100;

let shake = 2;

let fade=12;

​

// Variables to control the Sun and the Moon 

let X = 0;

let Y = 0;

​

function setup() 

{

  createCanvas(600, 700);

}

​

function draw() 

{

  background(255);

// Start a new drawing state

  push();

// Sky blue color to indicate the Sky 

  fill(135, 206, 235);

  rectMode(CORNER);

  rect(0, 0, 600, 700);

// Using the Sun and Moon Emoji 

  textSize(100);

  text('🌞', X, 100);

  text('🌝', Y - 600, 100);

   fill(0); // Set text color to black

  textSize(10); // Set text size

  text("Mouse X: " + mouseX + ", Mouse Y: " + mouseY, 10, height - 10);

// Increment X to Move the Sun

  X += 1;

// Increment Y to Move the Moon

  Y += 1;

  Smokeoffset-=2;

  shake+=2;

  fade+=1;

  if (shake >=10)

  {

    shake =1;

  }

  if (Smokeoffset==-300)

  {

    fade=12;

    Smokeoffset=0;

  }

// Reseting X to -600 when it reaches 600 to loop the With a Delay sun

  if (X == 600) 

  {

    X = -600;

  }

// Reseting Y to 0 when it reaches 1200 to loop the Moon with a delay

  if (Y == 1200) 

  {

    Y = 0;

  }

// Restore the previous drawing state

  pop();

// Call the MyPortrait function to draw the portrait

  MyPotrait();

}

​

​

function MyPotrait()

{

// Drawing the Face with Skin Tone

fill(255, 224, 189);

arc(300, 245, 140, 280, 0, PI);

​

// Drawing the Hat 

fill(122, 45, 45);

arc(300, 220, 280, 60, 0 - 0.33, PI + 0.33);

​

// The Middle Hat stripe 

fill(0, 0, 0);

arc(300, 203, 150, 40, 0, PI);

​

// Top of the Hat 

fill(122, 45, 45);

arc(300, 200, 150, 200, PI, 0);

​

// Hat's Inner edge

arc(300, 200, 150, 40, 0, PI);

​

// Drawing the left eye

fill("white");

ellipse(270, 265, 30, eyes);

​

// Drawing the left eye lid

fill(173, 216, 230);

circle(270, 265, eyes);

noFill();

​

​

// Drawing the left Iris   

fill(0);

circle(270, 265, iris);

noFill();

​

// Draw the left eyelash 

arc(270, 265, 30, 20, PI, 0);

​

// Draw multiple arcs to create the left eyebrows

arc(270, 261, 50, 20, PI, 0);

arc(270, 262, 50, 20, PI, 0);

arc(270, 263, 50, 20, PI, 0);

​

// Draw the right eye

fill("white");

ellipse(330, 265, 30, eyes);

​

// Drawing the right eyelid

fill(173, 216, 230);

circle(330, 265, eyes);

noFill();

// Drawing the right eyelash

arc(330, 265, 30, 20, PI, 0);

noFill();

​

// Drawing the Iris 

fill(0);

circle(330, 265, iris);

noFill();

​

// Draw multiple arcs to create the righgt eyebrows

arc(330, 261, 50, 20, PI, 0);

arc(330, 262, 50, 20, PI, 0);

arc(330, 263, 50, 20, PI, 0);

​

// Close Eyes on Pressing the Mouse

if (mouseIsPressed==true)

{

  eyes=0;

  iris=0;

  count =0;

}else

{

  eyes=10;

  iris=3;

  count=0;

}

​

​

// Draw the nose edges 

line(295, 275, 285, 295); // Left side of the nose

line(305, 275, 315, 295); // Right side of the nose

​

// Draw the nostrils 

arc(295, 298, 18, 15, 0, PI + 0.2); // Left nostril top

arc(295, 300, 18, 15, 0, PI + 0.2); // Left nostril bottom

arc(305, 298, 18, 15, -0.2, PI);    // Right nostril top

arc(305, 300, 18, 15, 0, PI + 0.2); // Right nostril bottom

​

// Drawing the mouth

ellipse(300, 340, 40, 10);                // Mouth base

arc(300, 338, 47, 15, PI - 0.3, 0 + 0.3); // Top lip

arc(300, 344, 43, 10, -0.14, PI + 0.14);  // Bottom lip

​

// Drawing the Mustache using multiple arcs

arc(300, 327, 55, 8, PI, 0);

arc(300, 327, 55, 9, PI, 0);

arc(300, 327, 55, 10, PI, 0);

arc(300, 327, 55, 11, PI, 0);

arc(300, 327, 55, 12, PI, 0);

arc(300, 327, 55, 13, PI, 0);

arc(300, 327, 55, 14, PI, 0);

arc(300, 327, 55, 15, PI, 0);

arc(300, 327, 55, 16, PI, 0);

​

// Drawing additional Mustache details

arc(300, 322, 59, 5, PI - 0.12, 0 + 0.12); // Small arc at the top

fill(0); 

arc(300, 322, 60, 10, PI - 0.12, 0 + 0.12); 

noFill(); 

// Drawing the Ciagarette

line(290, 335, 220, 370);  //Top line

fill(0, 0, 0); 

line(310, 335, 222, 380); //Bottom line

fill(150);

​

// Tracing Ciagette vertices to Shade the shape

beginShape();

vertex(220, 370); // Bottom left

vertex(222, 380); // Bottom right

vertex(310, 335); // Top right

vertex(290, 335); // Top left

endShape(CLOSE);

​

// Drawing Ciagerette tip 

circle(220, 375, 10);

​

// Drawing Cigarette smoke

fill(12, 12, 12);

bezier(220, 375, 200, 350, 250, 320, 230, 300);

bezier(222, 380, 210, 355, 260, 330, 240, 310);

noFill();

fill(fade, fade, fade)

bezier(220+shake, 375+Smokeoffset, 200-shake, 350+Smokeoffset, 250+shake, 320+Smokeoffset, 230-shake, 300+Smokeoffset);

bezier(222+shake, 380+Smokeoffset, 210-shake, 355+Smokeoffset, 260+shake, 330+Smokeoffset, 240-shake, 310+Smokeoffset);

noFill();

​

// Drawing the Neck

line(330, 370, 330, 400); // Right neckline

line(270, 370, 270, 400); // Left neckline

​

// Drawing the suit collar lines Right

line(270, 385, 250, 400); // Left collar part 1

line(250, 400, 300, 420); // Left collar part 2

line(300, 420, 290, 440); // Right collar part 3

line(290, 440, 250, 400); // Right collar part 4

​

// Drawing the suit collar lines Left

line(330, 385, 350, 396); // Right collar part 1

line(350, 396, 315, 420); // Right collar part 2

line(315, 420, 330, 440); // Right collar part 3

line(330, 440, 350, 396); // Right collar part 4

​

// Tie top boundary

line(300, 420,315, 420)

// Coloring the Tie

fill(255, 0, 0);

beginShape();

vertex(300, 420); 

vertex(290, 440);

vertex(330, 440); 

vertex(315, 420); 

endShape(CLOSE);

noFill();

​

// Filling the Tie tail red 

rectMode(CENTER);

fill(255, 0, 0);

rect(310, 490, 40, 100);

fill(255, 0, 0);

​

// Tai end tip

beginShape();

vertex(290, 540); 

vertex(330, 540); 

vertex(310, 580); 

endShape(CLOSE);

noFill();

​

// Drawing the suit and arm Left side

line(180, 410, 150, 440);

line(200, 500, 180, 600); 

line(180, 600, 270, 620); 

line(200, 500, 200, 700); 

line(270, 385, 180, 410); 

line(180, 410, 150, 440); 

line(130, 650, 250, 632); 

noFill();

​

// Used this shape/Curve from (https://p5js.org/examples/repetition-bezier/)

bezier(150, 440, 140, 470, 110, 520, 130, 650); 

​

line(330, 385, 430, 410); 

line(430, 410, 460, 440); 

line(400, 500, 420, 600); 

line(420, 600, 330, 620);

line(400, 500, 400, 700);

line(480, 650, 350, 632);

noFill();

// Used this shape/Curve from (https://p5js.org/examples/repetition-bezier/)

bezier(460, 440, 470, 470, 500, 520, 480, 650); // Right arm curve

// Text for Hand Emojis 

fill(0);

textSize(60);

text('🤜🏽🤛🏽', 240, 650);

}

​

​

​