​

function setup() {

  createCanvas(400, 400);

}

​

function mousePressed() {

  state++;

  if (state > 3) {

    state = 1;

  }

}

​

function draw() {

  background("white");

if (state == 1); {

  noStroke();

 // Head

  fill(255, 218, 185); 

  ellipse(200, 200, 200, 200); 

  // Eyes

  fill(255); 

  ellipse(160, 180, 20, 20); 

  ellipse(240, 180, 20, 20); 

​

  // Pupils

  fill(0); 

  ellipse(160, 180, 8, 8); 

  ellipse(240, 180, 8, 8); 

​

  // Mouth

  noFill();

  stroke(0);

  strokeWeight(4);

  arc(200, 220, 100, 50, 0, PI); 

​

  // Nose

  fill(255, 160, 122); //

  triangle(200, 190, 190, 210, 210, 210); 

​

// Beard on chin

  fill(0); // Black color

  ellipse(200, 270, 3, 3); 

  ellipse(180, 290, 3, 3);

  ellipse(220, 290, 3, 3); 

  ellipse(200, 290, 3, 3); 

  ellipse(140, 260, 3, 3);

  ellipse(160, 270, 3, 3); 

    ellipse(250, 260, 3, 3); 

    ellipse(240, 280, 3, 3); 

    ellipse(270, 250, 3, 3); 

  // Text 

  strokeWeight(1);

    fill(0);

    textSize(20);

    textAlign(CENTER);

    text("I am letting my beard grow. ", width / 2, 50);

}

​

​

if (state == 2) {

  noStroke();

 // Head

  fill(255, 218, 185); 

  ellipse(200, 200, 200, 200); 

​

 // Eyes

  fill(255); 

  ellipse(160, 180, 30, 30); 

  ellipse(240, 180, 30, 30); 

​

  // Pupils

  fill(0); 

  ellipse(160, 180, 12, 12); 

  ellipse(240, 180, 12, 12); 

​

  // Mouth

  noFill();

  stroke(0);

  strokeWeight(4);

  arc(200, 220, 100, 50, 0, PI); 

​

  // Nose

  fill(255, 160, 122); 

  triangle(200, 190, 190, 210, 210, 210); 

// Hair

fill("black"); 

noStroke();

beginShape();

vertex(140, 280); 

vertex(260, 280); 

vertex(260, 320);

vertex(230, 320); 

vertex(210, 300); 

vertex(190, 320); 

vertex(170, 300); 

vertex(150, 320); 

vertex(140, 320); 

endShape(CLOSE);

​

}

​

​

if (state == 3){

  noStroke();

 // Head

  fill(255, 218, 185); 

  ellipse(200, 200, 200, 200); 

​

 // Eyes

  fill(255); // White color

  ellipse(160, 180, 40, 40); 

  ellipse(240, 180, 40, 40);

​

  // Pupils

  fill(0); // Black color

  ellipse(160, 180, 16, 16); 

  ellipse(240, 180, 16, 16); 

​

  // Mouth

  noFill();

  stroke(0);

  strokeWeight(4);

  arc(200, 220, 100, 50, 0, PI); 

​

  // Nose

  fill(255, 160, 122); 

  triangle(200, 190, 190, 210, 210, 210); 

​

  // Hair

fill("black"); 

noStroke();

beginShape();

vertex(120, 260); 

vertex(280, 260); 

vertex(280, 330); 

vertex(250, 330); 

vertex(230, 300); 

vertex(210, 330); 

vertex(190, 300); 

vertex(170, 330); 

vertex(150, 300); 

vertex(130, 330); 

vertex(120, 330); 

endShape(CLOSE);

​

​

​

}}