createCanvas(400, 500);

}

​

function draw() {

  // one of my favorite color

  background('rgb(180,62,24)');

  // greetings 

  textSize(70)

  text('Hello!', 220, 100)

  // hair back

  fill('#5C441F')

  square(140,153,120)

​

  // fills and draws the face 

  fill('rgb(242,222,203)')

  ellipse(200,145,115,117) 

  // hair front (on face)

  fill('#927242');

  bezier(200, 85, 245, 80, 280, 143, 257, 160) // left hair

  bezier(200, 85, 135, 80, 120, 140, 135, 160) // right hair

  // ears

  fill('rgb(242,222,203)')

  circle(140,160, 30) // left ear

  fill('rgb(227,164,139)')

  circle(143, 162, 12) // ear shading 

  // earrings

  fill('#B5AEA4')

  circle(134, 155, 7) // cartiage earrings 

  rect(133, 170, 6, 8) // lobe earring

  rect(140, 172, 6, 12) // lobe earring 

  // left eye components 

  fill('#F6F1EA')

  ellipse(175, 135, 25, 25) // white

  fill('#6B5432')

  circle(175, 135, 15) // iris

  fill('#F6F1EA')

  ellipse(178, 132, 5, 5) // highlight

  // right eye components 

  ellipse(225, 135, 25, 25) // white

  fill('#6B5432')

  circle(225, 135, 15) // iris 

  fill('#F6F1EA')

  ellipse(228, 132, 5, 5) // hightlight

  // eyebrows 

  stroke('#927242') 

  strokeWeight(4);

  line(170, 120, 180, 120) // left eyebrow

  line(230, 120, 220, 120) // right eyebrow

  // glasses components 

  fill(140, 140, 140, 128)

  stroke('#61727A') 

  arc(175, 135, 40, 40, 0 - PI/8, PI + PI/8, CHORD); // left frame

  arc(225, 135, 40, 40, 0 - PI/8, PI + PI/8, CHORD); // right frame

  stroke(140, 140, 140) // for the nose bridge 

  strokeWeight(6);

  line(195, 135, 205, 135)

  // mouth

  noStroke()

  fill('#EABDA6')

  arc(190, 170, 34, 20, 0 , PI + PI/6, CHORD);

  // body and shirt 

  fill("rgb(242,222,203)") 

  quad(189, 203, 211, 203, 215, 220, 185, 220) // neck

  fill("rgb(49,46,40)")

  quad(240, 220, 160, 220, 175, 240, 225, 240) // top half of the shirt

  quad(175, 240, 225, 240, 240, 300, 160, 300) // bottom half of the shirt

  /* right arm

    -- translate the center to where the arm would pivot 

    -- push() & pop() so it doesn't affect the rest of the drawing 

    -- let angle which the arm will wave based on the x-position of the mouse 

  */

  fill("rgb(242,222,203)") // filled at the top for the arms 

  push()

  translate(245, 230)

  let angle = map(mouseX, 0, width, PI/ 10 , PI / 4) 

  rotate(angle)

  ellipse(0, -40, 15, 100)   // right arm 

  fill('rgb(233,200,170)')

  circle(0, -113, 20) // right tiny circle hand :3 

  pop()

  /* left arm 

   -- translate is the center of the ellipse, thus rotation and placement of the       ellipse and circle is based off the center of the ellipse.

  */

  push() 

  translate(148,280);

  rotate(PI/8)

  ellipse(0, 0, 15, 100)   // left arm

  fill('rgb(233,200,170)')

  circle(0, 70, 20) // left tiny circle hand :3

  pop()

  // legs and pants 

  fill("rgb(5,94,5)")

  rect(175, 300, 50, 155) // pants 

  stroke("rgb(2,71,2)") 

  strokeWeight(4);

  line(200,  320, 200, 453) 

  noStroke()

  // shoes 

  fill('rgb(217,204,166)')

  arc(223, 460, 40, 40, PI, 0, CHORD); // right shoe 

  arc(177, 460, 40, 40, PI, 0, CHORD); // left shoe

  // KITTTY!!!!!!!

  textSize(100)

  text('🐈', 220, 446)

​

​

}