let y;

function setup() {

  createCanvas(700, 500);

  frameRate(30)

}

​

function draw() {

  background('rgb(0,128,175)')

​

  //ears

  noStroke()

  fill('#C7A184')

  ellipse(255,200,30,40)

  ellipse(445,200,30,40)

  fill('#B0764A')

  ellipse(255,200,20,30)

  ellipse(445,200,20,30)

  //face

  noStroke()

  fill('#C7A184')

  ellipse(350,230,190,230)

  //eyes

  fill(255)

  ellipse(320,200,30,30)

  ellipse(380,200,30,30)

  fill('#320D05')

  ellipse(320,200,20,20)

  ellipse(380,200,20,20)

  //interactive eyeballs

  if (mouseX<=350 && mouseY<=250) {

  fill(255)

  ellipse((320-(255-mouseX)/120),(200+mouseY/120),6,6)

  ellipse((380-(255-mouseX)/120),(200+mouseY/120),6,6)

}

  if (mouseX>350 && mouseY<=250) {

  fill(255)

  ellipse((320-(255-mouseX)/120),(200+mouseY/120),6,6)

  ellipse((380-(255-mouseX)/120),(200+mouseY/120),6,6)

}

  if (mouseX>350 && mouseY>250) {

  fill(255)

  ellipse((320-(255-mouseX)/120),(200+mouseY/120),6,6)

  ellipse((380-(255-mouseX)/120),(200+mouseY/120),6,6)

}  

  if (mouseX<=350 && mouseY>250) {

  fill(255)

  ellipse((320-(255-mouseX)/120),(200+mouseY/120),6,6)

  ellipse((380-(255-mouseX)/120),(200+mouseY/120),6,6)

} 

  //interactive mouth + eyebrows

  if(mouseX<310 || mouseX>390) {

  fill('rgb(253,91,91)')

  stroke('#B0764A')

  strokeWeight(2)

  curve(300, 0, 310, 290, 390, 280, 300, 0);

  fill('#C7A184')

  strokeWeight(4)

  curve(310,220,305,181,330,178,328,220)

  curve(370,220,365,181,390,178,388,220)

  }

  if (mouseY<285 || mouseY>320) {

  fill('rgb(253,91,91)')

  stroke('#B0764A')

  strokeWeight(2)

  curve(300, 0, 310, 290, 390, 280, 300, 0);

  fill('#C7A184')

  strokeWeight(4)

  curve(310,220,305,181,330,178,328,220)

  curve(370,220,365,181,390,178,388,220)

  }

  if(mouseX>=310 && mouseX<=390 && mouseY>=285 && mouseY<=320) {

  stroke('#B0764A')

  strokeWeight(4)

  line(320,300,390,280)

  line(310,175,330,180)

  line(365,180,385,175)  

  //Random Crosses  

  noStroke()

  fill('red')  

  // quad(200,100,205,95,225,120,220,125) 

  // quad(220,95,225,100,205,125,200,120) 

  x=random(0,200)

  y=random(0,500)

  quad(x,y,x+5,y-5,x+25,y+20,x+20,y+25) 

  quad(x+20,y-5,x+25,y,x+5,y+25,x,y+20)  

  x=random(500,700)

  y=random(0,500)

  quad(x,y,x+5,y-5,x+25,y+20,x+20,y+25) 

  quad(x+20,y-5,x+25,y,x+5,y+25,x,y+20)  

  x=random(200,500)

  y=random(350,500)

  quad(x,y,x+5,y-5,x+25,y+20,x+20,y+25) 

  quad(x+20,y-5,x+25,y,x+5,y+25,x,y+20)    

  x=random(200,500)

  y=random(0,100)

  quad(x,y,x+5,y-5,x+25,y+20,x+20,y+25) 

  quad(x+20,y-5,x+25,y,x+5,y+25,x,y+20)  

  }

  //hair

  fill('#271416')

  noStroke()

  arc(350, 165, 184, 130, PI, 0)

  triangle(258,165,260,190,275,165)

  triangle(442,165,440,190,425,165)

  circle(280,145,40)

  circle(290,130,40)

  circle(305,120,40)

  circle(323,115,40)

  circle(342,113,40)

  circle(420,145,40)

  circle(410,130,40)

  circle(395,120,40)

  circle(377,115,40)

  circle(358,113,40)

  circle(280,150,40)

  circle(305,150,40)

  circle(330,150,40)

  circle(355,150,40)

  circle(380,150,40)

  circle(405,150,40)

  circle(425,155,30)

  noFill()

  stroke('#271416')

  curve(100,0,290,110,275,80,0,0)

  curve(350,0,320,70,290,120,200,0)

  //triangle(275,165,425,165,435,171)

​

  //nose

  noFill()

  stroke('#B0764A')

  strokeWeight(4)

  curve(440,150,350,230,360,255,400,200)

​

  //freckles?? 

  fill('#B0764A')

  point(336,227)

  point(325,236)

  point(333,245)

  point(318,247)

  point(311,230)

  point(364,227)

  point(375,236)

  point(367,245)

  point(382,247)

  point(389,230)

  print(mouseX, mouseY)

}