let nose = {

  x: 10,

  y: 50,

  w: 75,

  h: 35,

  r: 210,

  g: 210,

  b: 210

};

​

let eyes = {

  x: 10,

  y: 50 +50,

  w: 75,

  h: 35,

  r: 255,

  g: 255,

  b: 255

};

let mouth = {

  x: 10,

  y: 50+100,

  w: 75,

  h: 35,

  r: 255,

  g: 255,

  b: 255

};

let tongue = {

  x: 10,

  y: 50+150,

  w: 75,

  h: 35,

  r: 255,

  g: 255,

  b: 255

};

let leftEar = {

  x: 10,

  y: 50+200,

  w: 75,

  h: 35,

  r: 255,

  g: 255,

  b: 255

};

let rightEar = {

  x: 10,

  y: 50+250,

  w: 75,

  h: 35,

  r: 255,

  g: 255,

  b: 255

};

let start = {

  x: 10,

  y: 50+300,

  w: 75,

  h: 35,

  r: 255,

  g: 0,

  b: 0

};

​

let mono;

let overEyes = false;

let overNose = false;

let overMouth = false;

let overTongue = false;

let overStart = false;

let overLEar = false;

let overREar = false;

​

​

let lineStroke= 3;

let xmouth = 150;

let ymouth = 220;

let xrEar = 0;

let yrEar = 0;

let xlEar = 0;

let ylEar = 0;

let a = 0;

let b = 0;

let c = 0;

let e = 0;

let f = 0;

let g = 1;

let h = 0;

let j = 1;

let k = 0;

​

function preload(){

      mono = loadFont('robotoMono.ttf')

​

}

function setup() {

  createCanvas(600, 600);

  angleMode(DEGREES);

  background(255);

​

​

}

function mousePressed(){

  if (overNose){

      nose.r = 0;

      nose.g = 0;

      nose.b = 0;

      eyes.r = 210;

      eyes.g = 210;

      eyes.b = 210;

  } 

  if (overEyes){

      eyes.r = 0;

      eyes.g = 0;

      eyes.b = 0;

      mouth.r = 210;

      mouth.g = 210;

      mouth.b = 210;

  }

​

  if (overMouth){

      mouth.r = 0;

      mouth.g = 0;

      mouth.b = 0;

      tongue.r = 210;

      tongue.g = 210;

      tongue.b = 210;

  }

  if (overTongue){

      tongue.r = 0;

      tongue.g = 0;

      tongue.b = 0;

      leftEar.r = 210;

      leftEar.g = 210;

      leftEar.b = 210;

  }

  if (overLEar){

      leftEar.r = 0;

      leftEar.g = 0;

      leftEar.b = 0;

      rightEar.r = 210;

      rightEar.g = 210;

      rightEar.b = 210;

  }

  if (overREar){

      rightEar.r = 0;

      rightEar.g = 0;

      rightEar.b = 0;

  }

}

​

​

function draw() {

  textFont(mono);

  noStroke();

  fill(0);

  textSize(25);

        text('How to draw a dog!',75,35);

  stroke(0);

  strokeWeight(2);

  line(50,10,50,40);

    line(40,30,50,40);

  line(60,30,50,40);

​

  textSize(15);

​

  noStroke();

​

​

  // ////grid

  // for(let i = 0;i<width; i=i+50){

  //   stroke(120,120,255);

  //   strokeWeight(1);

  //   line(i,0,i,height);

  //   noStroke();

  //   fill(120,120,255);

  //   text(i,i,10);

  // }

  // for(let j = 0;j<height; j=j+50){

  //   stroke(120,120,255);

  //   strokeWeight(1);

  //   line(0,j,width,j);

  //   noStroke();

  //   fill(120,120,255);

  //   text(j,0,j);

  // }

 ///////////////// //nose click///////////////////////////////

    if (mouseX>nose.x && mouseX<(nose.x + nose.w) && mouseY>nose.y && mouseY<(nose.y +nose.h)){

      overNose = true;

    }

  else {

     overNose = false;    

    }

  //initiate function drawNose

   if(nose.g==0){

    drawNose(12,200, 200,height/2);

  }

  /////////////////// eyes click/////////////////////////////

  if (mouseX>eyes.x && mouseX<(eyes.x + eyes.w) && mouseY>eyes.y && mouseY<(eyes.y +eyes.h)){

      overEyes = true;

    }

    else {

     overEyes = false;

    }

    //initiate function drawEyes

​

  if (eyes.g==0){

    drawEyes(200,165);

  }

  // //////////////////mouth click/////////////////////////////

  if (mouseX>mouth.x && mouseX<(mouth.x + mouth.w) && mouseY>mouth.y && mouseY<(mouth.y +mouth.h)){

      overMouth = true;

    }

  else {

     overMouth = false;    

    }

      //initiate function drawMouth

​

  if (mouth.g==0){

    drawMouth(150);

  }

​

  // //////////////////tongue click/////////////////////////////

  if (mouseX>tongue.x && mouseX<(tongue.x + tongue.w) && mouseY>tongue.y && mouseY<(tongue.y +tongue.h)){

      overTongue = true;

    }

    else {

     overTongue = false;    

    }

      //initiate function drawTongue

  if (tongue.g==0){

    drawTongue(20,200,240);

  }

  // //////////////////left Ear click/////////////////////////////

  if (mouseX>leftEar.x && mouseX<(leftEar.x + leftEar.w) && mouseY>leftEar.y && mouseY<(leftEar.y +leftEar.h)){

      overLEar = true;

    }

    else {

     overLEar = false;    

    }

      //initiate function left ear

  if (leftEar.g==0){

  drawLEar(25,160,125);

  }

  // //////////////////right Ear click/////////////////////////////

  if (mouseX>rightEar.x && mouseX<(rightEar.x + rightEar.w) && mouseY>rightEar.y && mouseY<(rightEar.y +rightEar.h)){

      overREar = true;

    }

    else {

     overREar = false;    

    }

      //initiate function right ear

  if (rightEar.g==0){

  drawREar(25,240,125);

  }

 // //////////////////start click/////////////////////////////

  if (mouseIsPressed && mouseX>start.x && mouseX<(start.x + start.w) && mouseY>start.y && mouseY<(start.y +start.h)){

      nose.r = 210;

      nose.g = 210;

      nose.b = 210;

      eyes.r = 255;

      eyes.g = 255;

      eyes.b = 255;

      mouth.r = 255;

      mouth.g = 255;

      mouth.b = 255;

      tongue.r = 255;

      tongue.g = 255;

      tongue.b = 255;

      rightEar.r = 255;

      rightEar.g = 255;

      rightEar.b = 255;

      leftEar.r = 255;

      leftEar.g = 255;

      leftEar.b = 255;

      start.r = 0;

      start.g = 0;

      start.b = 0;

​

xmouth = 150;

ymouth = 220;

rEar = 0;

xlEar = 0;

ylEar = 0;

a = 0;

b = 0;

c = 0;

e = 0;

f = 0;

g = 1;

h = 0;

j = 1;

k = 0;

​

    eraser();

  }

​

  else{

    start.r = 255;

      start.g = 0;

      start.b = 0;

​

  }

  //////////////////////buttons////////////////

  fill(nose.r,nose.g,nose.b);

  rect(nose.x,nose.y,nose.w,nose.h);

  fill(255);

  text("Nose",nose.x+10,nose.y+20 );

  fill(eyes.r,eyes.g,eyes.b);

  rect(eyes.x,eyes.y,eyes.w,eyes.h);

    fill(255);

​

    text("Eyes",eyes.x+10,eyes.y+20 );

​

  fill(mouth.r, mouth.g, mouth.b);

  rect(mouth.x, mouth.y, mouth.w, mouth.h);

    fill(255);

​

    text("Mouth", mouth.x+10, mouth.y+20 );

  fill(tongue.r, tongue.g, tongue.b);

  rect(tongue.x, tongue.y, tongue.w, tongue.h);

    fill(255);

​

    text("Tongue",tongue.x+10, tongue.y+20 );

 fill(rightEar.r, rightEar.g, rightEar.b);

  rect(rightEar.x, rightEar.y, rightEar.w, rightEar.h);

    fill(255);

​

    text("R Ear",rightEar.x+10, rightEar.y+20 );

  fill(leftEar.r, leftEar.g, leftEar.b);

  rect(leftEar.x, leftEar.y, leftEar.w, leftEar.h);

    fill(255);

​

    text("L Ear",leftEar.x+10, leftEar.y+20 );

   fill(start.r, start.g, start.b);

  rect(start.x, start.y, start.w, start.h);

    fill(255);

​

    text("Reset",start.x+10,start.y+20);

​

​

}

​

function drawNose(d,posx,posy){

  noStroke();

  fill(0);

  b = b+4;

  let x=(sin(b)*d) + posx;

  let y=(cos(b)*d) + posy;

  circle(x,y,lineStroke);

}

​

function drawEyes(posx,posy){

    noStroke();

​

  fill(0);

  circle(posx-25,posy, lineStroke*3);

  circle(posx+25,posy, lineStroke*3);

​

​

}

function drawMouth(posx){

noStroke();

  fill(0);

  a+=3.6;

  circle(xmouth,ymouth,lineStroke);

  xmouth+=1;

  ymouth=(sin(a)*18) + 220;

  if (xmouth>=posx+100){

    xmouth=posx;

    a=0;

  }

 if (a>180){

    a=0;

 }  

}

​

function drawTongue(d,posx,posy){

  noStroke();

  fill(0);

  c = c+3;

  let x=(-cos(c)*d) + posx;

  let y=(sin(c)*d*2) + posy;

  circle(x,y,lineStroke);

  if (y<posy){

    c=0;

  }

​

}

function drawREar(d,posx,posy){

  noStroke();

  fill(0);

  h=h+1;

  xrEar+=g;

  yrEar+=g/2;

  let x=width;

  let y=height;

  if (xrEar>2*d){

    g=-1;

  } else if (xrEar<0){

    g=1;

  }

  if (h>2*d){

  e+=1;

    x=(cos(e)*d);

    y=(sin(e)*d*3);

  }

  circle(xrEar+posx,yrEar+posy,lineStroke);

  circle(x+posx+(2*d)-d,y+posy+d,lineStroke);

if (y<0){

    e=0;

  }

​

​

​

}

​

function drawLEar(d,posx,posy){

 noStroke();

  fill(0);

  k=k+1;

  xlEar-=j;

  ylEar+=j/2;

  let x=width;

  let y=height;

  if (xlEar<-(2*d)){

    j=-1;

  } else if (xlEar>0){

    j=1;

  }

  if (k>(2*d)){

  f+=1;

    x=(-cos(f)*d);

    y=(sin(f)*d*3);

  }

  circle(xlEar+posx,ylEar+posy,lineStroke);

  circle(x+posx-(2*d)+d,y+posy+d,lineStroke);

if (y<0){

    f=0;

  }

​

}

function eraser(){

​

  fill(255);

  circle(width/2,height/2,width);

}

​