4 Faces

var option=1;

function setup() {

  createCanvas(800,800);

}

​

function draw() {

  background(0);

  var x=map(mouseX,0,width,285,315);

  var y=map(mouseY,0,height,286,354);

  var x2=map(mouseX,0,height,485,515);

  var y2=map(mouseY,0,height,480,528);

  var x3=map(mouseX,0,width,370,418); 

 if(option==1){ 

/////////////////////////////////////////////////////////Face 1   

///////////////////////////////////////////////Neck

fill(24,127,131);

ellipse (400,690,100,300);

​

///////////////////////////////////////////////Ears

fill(24,127,131);

ellipse (200,370,40,90);

ellipse (600,370,40,90);

​

​

///////////////////////////////////////////////shadow

fill(0,60);

noStroke();

circle(400,415,400);

///////////////////////////////////////////////head

​

fill(24,127,131);

circle(400,400,400);

​

​

///////////////////////////////////////////////eyesbrows

fill(88,162,165);

arc(300,310,150,150,PI,TWO_PI);

arc(500,310,150,150,PI,TWO_PI);

​

​

///////////////////////////////////////////////eyes

fill(255);

circle(300,320,110);

circle(500,320,110);

​

​

///////////////////////////////////////////////pupils

fill(0);

circle(x,y,30);

circle(x2,y,30);

///////////////////////////////////////////////mouth

fill(0);

ellipse(400,500,200,150);

///////////////////////////////////////////////throat

fill(130);

circle(400,483,20);

​

​

///////////////////////////////////////////////tongue

fill(254,127,156);

ellipse(x3,y2,110,70);

​

​

 }

​

​

if(option==2){

/////////////////////////////////////////////////////////Face 2       

///////////////////////////////////////////////Neck

fill(232,156,75);

ellipse (400,690,400,600);

​

​

///////////////////////////////////////////////shadow

fill(0,60);

noStroke();

circle(400,410,400);

​

​

///////////////////////////////////////////////head

​

fill(232,156,75);

circle(400,400,400);

​

///////////////////////////////////////////////eyesbrows

fill(170,123,72);

arc(300,310,150,150,PI,TWO_PI);

arc(500,310,150,150,PI,TWO_PI);

​

​

///////////////////////////////////////////////eyes

fill(255);

circle(300,320,110);

circle(500,320,110);

​

​

///////////////////////////////////////////////pupils

fill(0);

circle(x,y,30);

circle(x2,y,30);

​

​

///////////////////////////////////////////////teeth    

fill(255);

rect(389,505,10,20);    

​

​

///////////////////////////////////////////////mouth  

strokeWeight(3);

stroke (0);

noFill();

arc(400,430,150,150,HALF_PI,PI);

  }

 if(option==3){

/////////////////////////////////////////////////////////Face 3

///////////////////////////////////////////////line

stroke(255);

line (300,150,300,250);

line (315,145,315,245);

line (330,150,330,250);

line (345,145,345,245);

line (360,150,360,250);

line (375,145,375,245);

line (390,150,390,250);

line (405,145,405,245);

line (420,150,420,250);

line (435,145,435,245);

line (450,150,450,250);

line (465,145,465,245);

line (480,150,480,250);

line (495,145,495,245);

​

​

///////////////////////////////////////////////Neck

noStroke();

fill(216,50,50);

ellipse (400,690,300,400);

​

​

///////////////////////////////////////////////Ears

fill(216,50,50);

ellipse (200,370,40,90);

ellipse (600,370,40,90);

​

​

///////////////////////////////////////////////shadow

fill(0,60);

noStroke();

circle(400,415,400);

​

​

///////////////////////////////////////////////Head

fill(216,50,50);

circle(400,400,400);

///////////////////////////////////////////////eyesbrows

fill(111,46,46);

arc(320,310,150,150,PI,TWO_PI);

arc(480,310,150,150,PI,TWO_PI);

///////////////////////////////////////////////eyes

fill(255);

circle(320,320,110);

circle(480,320,110);

​

​

///////////////////////////////////////////////pupils

fill(0);

circle(x,y,30);

circle(x2,y,30);

​

   //eyebrows

   line(240,225,375,265);

   line(425,265,560,225);

///////////////////////////////////////////////mouth

stroke(0);

line(300,470,500,470);

} 

​

​

​

  if(option==4){

/////////////////////////////////////////////////////////Face 4

///////////////////////////////////////////////Neck

noStroke();

fill(71,201,124);

ellipse (400,690,250,250);

​

​

///////////////////////////////////////////////shadow

fill(0,60);

noStroke();

circle(400,415,400);

​

​

///////////////////////////////////////////////head

fill(71,201,124);

circle(400,400,400);

///////////////////////////////////////////////eyesbrows

fill(49,142,86);

arc(300,310,150,150,PI,TWO_PI);

arc(500,310,150,150,PI,TWO_PI);

///////////////////////////////////////////////eyes

fill(255);

circle(300,320,110);

circle(500,320,110);

​

​

///////////////////////////////////////////////pupils

fill(0);

circle(x,y,30);

circle(x2,y,30);

///////////////////////////////////////////////Nose

fill(53,90,68);

ellipse(400,435,145,125);

​

​

///////////////////////////////////////////////line

stroke(117,175,141);

strokeWeight (15);

line (375,400,375,470);

line (425,400,425,470);

///////////////////////////////////////////////Mouth

fill(0);

ellipse(400,535,145,25);   

 } 

}

​

function mousePressed() {

  option++;

  if (option>4) {

    option=1;

  }

}