//Hae Wan Park
//15104-A
//haewanp@andrew.cmu.edu
//Assignment-01
function setup() {
createCanvas (600, 550);
}
function draw() {
background (95, 197, 191);
stroke (92, 52, 103);
strokeWeight (2.5);
//Ear
fill (255, 239, 201);
ellipse (200, 280, 50, 50);
ellipse (400, 280, 50, 50);
//Face
ellipse (300, 280, 206, 250);
//Eyebrows
line (278, 235, 237, 225);
line (316, 235, 359, 225);
//Eyes
fill (255);
ellipse (255, 270, 40, 20);
ellipse (345, 270, 40, 20);
fill (92, 52, 103);
ellipse (255, 270, 12, 12);
ellipse (345, 270, 12, 12);
//Eyelash
line (260, 260, 264, 249);
line (250, 260, 245, 249);
line (350, 260, 354, 249);
line (340, 260, 335, 249);
//Nose
noFill ();
beginShape ();
vertex (299, 288);
vertex (295, 308);
vertex (281, 315);
vertex (298, 322);
endShape ();
//Mouth
fill (239, 65, 54);
strokeJoin (ROUND);
beginShape ();
vertex (280, 358);
vertex (288, 344);
vertex (295, 354);
vertex (300, 347);
vertex (313, 358);
vertex (297, 374);
vertex (280, 358);
vertex (313, 358);
endShape ();
//Hair
fill (255, 231, 102);
beginShape ();
vertex (295, 115);
bezierVertex (340, 140, 300, 205, 250, 200);
bezierVertex (220, 200, 210, 240, 210, 260);
bezierVertex (210, 300, 160, 290, 140, 270);
bezierVertex (170, 280, 160, 260, 155, 240);
bezierVertex (140, 160, 200, 140, 220, 150);
bezierVertex (210, 130, 255, 90, 295, 115);
endShape ();
beginShape ();
vertex (315, 130);
bezierVertex (280, 170, 320, 205, 350, 200);
bezierVertex (380, 200, 390, 240, 390, 260);
bezierVertex (390, 300, 440, 290, 450, 270);
bezierVertex (420, 280, 425, 260, 430, 240);
bezierVertex (450, 160, 400, 170, 390, 160);
bezierVertex (390, 160, 385, 160, 375, 140);
bezierVertex (370, 130, 345, 100, 315, 130);
endShape ();
//cheek
fill (250, 188, 150);
noStroke ();
ellipse (245, 310, 40, 40);
ellipse (355, 310, 40, 40);
//glasses
noFill ();
stroke (92, 52, 103);
strokeWeight (6);
ellipse (255, 270, 70, 66);
ellipse (345, 270, 70, 66);
line (290, 270, 310, 270);
//body
strokeWeight (2.5);
fill (236, 0, 240);
beginShape ();
vertex (171, height);
vertex (178, 500);
bezierVertex (179, 500, 180, 450, 235, 450);
vertex (380, 450);
bezierVertex (380, 450, 415, 450, 420, 490);
vertex (425, height);
endShape ();
fill (255, 239, 201);
beginShape ();
vertex (295 ,490);
vertex (260, 450)
vertex (275, 450);
vertex (285, 405);
vertex (310, 405);
vertex (315, 450);
vertex (335, 450);
vertex (295 ,490);
endShape();
}
It was fun to explore various methods in drawing shape with p5.js. Certain shapes were more difficult to control. Those shapes has more complicated rules than other simpler ones. Also, in the process, I had to understand and utilize geometry to place graphic elements to the exact spot that I want.