thlai-Project-01-Face

I constructed my portrait mainly using ellipse shapes. I started by sketching my idea on paper, then bringing it into Illustrator to see tidy up the composition. I couldn’t decide on a background color, so I just made an ever-changing background with some of my favorite colors.

``````// Tiffany Lai
// 15-104 Section A
// thlai@andrew.cmu.edu
// Project-01

function setup() {
createCanvas(600, 600);
frameRate(1.5);
noStroke();
angleMode(DEGREES);
}

function draw() {
background(random(35, 62), random(145,182), random(140, 178));

// WHITE OUTLINE
fill(255);
push();
translate(230, -194);
rotate(40);
ellipse(371, 201, 235, 146); // bangs
pop();

ellipse(386, 671, 383, 432); // body
ellipse(196, 291, 64, 71); // left ear

// HAIR
push();
translate(467, -149);
rotate(58);
fill(82, 69, 64);
stroke(255);
strokeWeight(8);
ellipse(367, 346, 473, 337);
pop();

// BODY
fill(74, 193, 187);
ellipse(386, 671, 366, 417);

// LEFT EAR
fill(220, 172, 138);
ellipse(196, 291, 49, 60);

// FACE
fill(229, 182, 149);
ellipse(317, 302, 240, 310); // face
ellipse(445, 313, 51, 63); // right ear

// MOUTH
fill(82, 69, 64);
ellipse(303, 361, 120, 134); // opening

fill(229, 182, 149);
ellipse(305, 330, 159, 110); // cover

push();
translate(-105, 106);
rotate(-17);
fill(201, 113, 98);
ellipse(317, 412, 45, 20); // tongue
pop();

// EYES
fill(82, 69, 64);
ellipse(235, 310, 54, 54);
fill(229, 182, 149);
ellipse(232, 316, 65, 56); // left

fill(82, 69, 64);
ellipse(365, 325, 56, 56);
fill(229, 182, 149);
ellipse(367, 331, 65, 56); // right

// CHEEKS
fill(226, 169, 150);
ellipse(226, 328, 39, 27); // left

fill(226, 169, 150);
ellipse(387, 342, 39, 27); // right

// NOSE
push();
translate(200, -100);
rotate(30);
fill(196, 148, 116);
ellipse(290, 340, 35, 12);
pop();

// BANGS
push();
translate(230, -194);
rotate(40);
fill(82, 69, 64);
ellipse(371, 201, 222, 131);
pop();

}

``````

amui1 – Project-01-Face

``````//Allison mui
//15-104 Section A
//amui1@andrew.cmu.edu
//Project-01
function setup() {
createCanvas(600,600);
background(255);
}

function draw() {
strokeWeight(0);
fill(255,240,245);
rect(0,0,300,600);
fill(255,228,225)
rect(300,0,300,600);
//hair
fill(0);
arc(300,292,380,380,PI, HALF_PI*3);
fill(0);
rect(110,292,250,250);
arc(300,292,350,350,HALF_PI*3, 0);
rect(350,292,125,250);
//neck
strokeWeight(1);
fill(247,193,155);
rect(260,420,75,80,20);
//ear
fill(247,193,155);
ellipse(170,300,40,40);
ellipse(430,300,40,40);
fill(255,240,245);
ellipse(170,300,20,20);
ellipse(430,300,20,20);
//face
fill(247,193,155);
ellipse(300,300,270,300);
fill(0);
arc(173,150,250,200,0,HALF_PI);
//eyes
line(200,265,206,268);
line(196,272,201,274);
line(193,280,200,283);
line(395,270,402,267);
line(398,278,405,275);
line(401,285,408,283);
fill(255);
strokeWeight(3);
arc(240,290.5,80,77,PI, TWO_PI);
arc(360,290.5,80,77,PI, TWO_PI);
fill(63,42,20);
ellipse(240,272.5,40,33);
ellipse(360,272.5,40,33);
fill(0);
ellipse(240,272,20,20);
ellipse(360,272,20,20);
fill(255);
strokeWeight(0);
ellipse(250,265,10,10);
ellipse(365,265,10,10);
//nose
strokeWeight(2);
arc(310,325,2,25,3*HALF_PI, HALF_PI);
noFill();
arc(300,350,20,10,TWO_PI, PI);
//mouth
fill(255);
strokeWeight(0);
arc(300,380,100,65,TWO_PI, PI);
//laughmark
strokeWeight(2);
line(200,240,260,235);
line(330,235,390,240);
noFill();
strokeWeight(1);
arc(215,395,5,12,3*HALF_PI, HALF_PI);
arc(385,395,5,12,HALF_PI, 3*HALF_PI);
//shirt
fill(135,206,260);
arc(300,630,380,300,PI, TWO_PI)
}
``````

My portrait is made of rectangles, arcs, circles, and curves. My process consisted of a lot of trial and error and looking for help in the p5js reference directory. I first started off with the head shape and then built off of that. I am happy with my product. However, in the future, I would like to learn how to add more details to my face to improve my portrait further.

dnam-project01-face

``````// Doo Won Nam
// 15-104 :: 1 Section B
// dnam@andrew.cmu.edu
// Assignment-portrait

function setup() {
createCanvas(268, 293);
background(248, 173, 133);
noStroke();
fill("black");
rect(0, 0, 268, 111);
fill("black");
rect(245, 111, 12, 70);
fill("black");
rect(2, 121, 86, 22);
fill("black");
rect(134, 121, 88, 22);
fill("black");
ellipse(40, 163, 20, 20);
fill("black");
ellipse(175, 163, 20, 20);
fill(211, 149, 116);
triangle(78, 210, 108, 150, 98, 210);
fill("pink");
triangle(98, 210, 108, 150, 127, 210);
fill(240, 162, 150);
rect(58, 240, 124, 10);
fill(211, 149, 116);
rect(58, 250, 124, 10);
}

function draw() {
if (millis() > 2000) {
osc.stop();
noLoop();
}
}
``````

I wanted to create a pixel head portrait of myself using my limited knowledge of P5JS. I used the color schemes to show shadow and light.

``````function setup() {
createCanvas(500, 500);
background(120, 200, 400);
text("p5.js vers 0.5.12 test.", 10, 15);
noStroke ();

//background
fill (0, 0, 0)
rect (0, 0, 500, 100)
rect (0, 200, 500, 100)
rect (0, 400, 500, 100)

//body
fill (100, 10, 100)
triangle (100, 500, 250, 250, 400, 500)

fill (255, 228, 196)
rect(200, 100, 100, 250);

//eyes
fill (255, 255, 255)
ellipse (200, 200, 50, 50);
ellipse (300, 200, 50, 50);
fill (0, 0, 0);
ellipse (300, 200, 25, 25);
ellipse (200, 200, 25, 25);

//mouth
fill (250, 128, 114)
rect (175, 270, 150, 60)
fill (0, 0, 0)
rect (180, 275, 140, 50);
fill (255, 255, 255)
rect (180, 275, 22, 22)
rect (210, 275, 22, 22)
rect (240, 275, 22, 22)
rect (270, 275, 22, 22)
rect (298, 275, 22, 22)
rect (180, 303, 22, 22)
rect (210, 303, 22, 22)
rect (240, 303, 22, 22)
rect (270, 303, 22, 22)
rect (298, 303, 22, 22)

//hair
fill (139, 69, 19)
rect (195, 75, 20, 50)
rect (225, 75, 20, 50)
rect (255, 75, 20, 50)
rect (285, 75, 20, 50)

//nose
fill (222, 184, 135)
triangle (220, 250, 240, 210, 340, 260);

//eyebrows
fill (80, 50, 50)
rect (175, 145, 50, 25)
rect (275, 145, 50, 25)

}

function draw() {
}
``````

Although it may not look like it, considering the fairly simplistic result, I actually had a difficult time working on this project. My programming experience is extremely minimal, and my grasp of mathematics is limited at best. However, I did enjoy the whole process involved in the creation of this piece. I attempted to use some of the more difficult elements to program, such as utilizing curvature (with lines) and arcs, but my attempts were not so successful. So as a result, I hope to learn how to employ some of the more advanced elements in p5.js over the weekend, so that I can utilize them on the next project. I feel that for this project I wish I could’ve incorporated more exciting and original elements, as opposed to just constructing a piece out of mainly rectangles and simple shapes. Upon viewing some of the other fantastic student pieces, I hope to eventually achieve that level of proficiency with programming, and be able to create a more exciting and ‘innovative’ piece of work that better represents the ideas that I have in my head.

hannajan-Project01-Face

``````//Hanna Jang
//Section B
//hannajan@andrew.cmu.edu
//Assignment-01

function setup() {
createCanvas(600, 600);
background(246, 184, 184);
}

function draw() {
//Background Circles
fill(255, 255, 255);
ellipse(300, 260, 450, 450);
fill(248, 218, 226);
ellipse(300, 260, 410, 410);

//Hair
fill(187, 107, 48);
ellipse(300, 250, 300, 300);
noStroke();
fill(187, 107, 48);
ellipse(300, 300, 300, 300);
triangle(315, 450, 400, 400, 430, 415);
ellipse(320, 330, 200, 200);
triangle(390, 400, 400, 410, 430, 415);

//Face
fill(255, 214, 187);
ellipse(300, 250, 250, 200);
noStroke();

//Left Ear
fill(255, 214, 187);
ellipse(170, 260, 30, 40);
noStroke();

//Right Ear
fill(255, 214, 187);
ellipse(425, 260, 30, 40);
noStroke();

//Blush
fill(255, 176, 146);
ellipse(243, 274, 30, 20);
fill(255, 176, 146);
ellipse(380, 274, 30, 20);

//Eyes
fill(255, 255, 255);
ellipse(253, 250, 37, 37);
fill(0);
ellipse(250, 250, 20, 20);
noStroke();
fill(255, 255, 255);
ellipse(373, 250, 37, 37);
fill(0);
ellipse(370, 250, 20, 20);
noStroke();
fill(255, 255, 255);
ellipse(248, 245, 6, 6);
noStroke();
fill(255, 255, 255);
ellipse(368, 245, 6, 6);
noStroke();

//Left Eyebrow
fill(129, 70, 21);
rect(220, 210, 55, 8);

//Right Eyebrow
fill(129, 70, 21);
rect(350, 210, 55, 8);

//Nose
fill(231, 185, 133);
ellipse(320, 275, 30, 10);

//Mouth
fill(225, 81, 88);
arc(300, 310, 50, 50, 0, PI+QUARTER_PI, OPEN);

}

``````

Upon reading the instructions for this project, I imagined a face kind of similar to Nintendo Wii’s Mii avatars. I was especially inspired by the Mii avatars for the circular shape of the face I drew. I started with and focused a bit more on my hair, since I wanted a very specific shape for it. I sketched out the shape of the hair first on paper before deciding which shapes would best form the hairstyle in javascript. The gaze of the eyes were a bit time consuming and I moved around the different ellipses before I finally liked what I saw.

ClairS self-portrait

``````//clair(sijing) sun
//session C
//sijings@andrew.cmu.edu
//Self-portrait-01

function setup() {
createCanvas(640, 376);
background(0,0,0);
}

function draw() {
scale(0.8);
noStroke();
fill(207,178,158);
ellipse(30, 30, 200, 200);
fill(228,186,162);
ellipse(130, 150, 200, 200);
fill(250,220,180);
ellipse(130, 300, 200, 200);
fill(218,170,136);
ellipse(210, 30, 200, 200);
fill(255,214,187);
ellipse(30, 430, 250, 260);
fill(252,227,197);
ellipse(290.2,152.2,100,100);

// from here, most with transparency
fill(241,213,187,100);
ellipse(100, 100, 180, 180);
fill(245,211,187,100);
ellipse(80, 160, 180, 180);
fill(241,213,187,10);
ellipse(200, 100, 180, 180);
fill(207,178,158);
ellipse(30, 30, 200, 200);
fill(250,219,180,30);
ellipse(70,280,300,300);
fill(255,224,188);
ellipse(240,270,150,150);
fill(255,196,160,50);
ellipse(120,400,160,160);
fill(255,223,204,50);
ellipse(210,420,280,280);
fill(252,225,182,50);
ellipse(350,40,180,180);
fill(255,222,204,50);
ellipse(350,460,120,120);

//left eye
fill(255,223,204,50);
ellipse(345,160,80,80);
fill(248,189,142,50);
ellipse(429.8,150,50,50);
fill(251,206,169,80);
ellipse(400.8,150,50,50);
fill(251,206,169,80);
ellipse(360.4,175.8,50,50);
fill(216,167,126,120);
ellipse(362.4,176.8,20,20);
fill(177,111,57,120);
ellipse(370,186,30,30);
fill(156,83,24,120);
ellipse(390,176,40,40);
fill(189,89,6,120);
ellipse(400,180,20,20);
fill(208,97,5,100);
ellipse(420,185,35,35);
fill(208,97,5,150);
ellipse(440,186,25,25);
fill(187,85,1,120);
ellipse(455,190,25,25);
fill(109,49,0,120);
ellipse(464,188,15,15);
fill(177,111,57,200);
ellipse(438.8,200,15,15);
fill(119,69,28,200);
ellipse(430,200,15,15);

//left eyebrow
fill(170,131,110,30);
ellipse(310.2,140,60,60);
fill(170,131,110,50);
ellipse(352.6,128,40,40);
fill(125,94,84,110);
ellipse(386.8,122,40,40);
fill(194,113,42,110);
ellipse(386.8,122,40,40);
fill(165,89,33,110);
ellipse(414.4,125,60,60);
fill(196,101,8,180);
ellipse(433,127.8,35,35);

//left cheak
fill(236,189,163,20);
ellipse(354,296.4,160,160);
fill(255,219,176,60);
ellipse(364,306.4,160,160);
fill(243,187,152,60);
ellipse(387.6,350.6,130,130);
fill(251,180,95,60);
ellipse(431.4,273.8,100,100);

//nose
fill(118,82,25,60);
ellipse(459.2,326.2,35,35);
fill(118,82,25,100);
ellipse(462,315,25,25);
fill(88,41,7,100);
ellipse(462,345,10,10);
fill(88,41,7,100);
ellipse(468,355,15,15);
fill(88,41,7,100);
ellipse(475,357,15,15);
fill(88,41,7,100);
ellipse(487,357.5,15,15);
fill(88,41,7,100);
ellipse(493,350,15,15);
fill(88,41,7,100);
ellipse(491.5,348,15,15);
fill(88,41,7,100);
ellipse(493.5,346,15,15);
fill(88,41,7,100);
ellipse(497,342,15,15);
fill(88,41,7,100);
ellipse(502,346,20,20);
fill(73,47,1,100);
ellipse(478.8,225,20,20);
fill(73,35,1,100);
ellipse(450,210,20,20);
fill(73,35,1,30);
ellipse(465,225,30,30);

//right blush
fill(136,42,5);
ellipse(680,420,250,250);

//mouth
fill(182,117,103);
ellipse(432.8,425.6,15,15);
fill(182,117,103);
ellipse(443,420,25,25);
fill(223,151,116,30);
ellipse(440,405,35,35);
fill(154,84,69,30);
ellipse(450,415,35,35);
fill(182,117,103);
ellipse(474.6,400,25,25);
fill(154,84,69,30);
ellipse(501,396,30,30);
fill(221,124,76,30);
ellipse(528.8,392,28,28);
fill(182,117,103,30);
ellipse(462.4,438.6,28,28);
fill(182,117,103,30);
ellipse(477.4,434.6,28,28);
fill(203,121,49,30);
ellipse(506.4,444,25,25);
fill(217,145,106,30);
ellipse(499,443,30,30);
fill(220,133,110,30);
ellipse(506.2,438.8,50,50);
fill(220,133,110,60);
ellipse(540,438.8,50,50);

//the blush
fill(130,34,0);
ellipse(380,280,50,50);

//the right eye
fill(89,48,0,100);
ellipse(600,209,30,30);
fill(158,71,32,100);
ellipse(580,211,20,20);
fill(57,13,0,100);
ellipse(605.6,204.4,30,30);
fill(124,78,29,100);
ellipse(604.8,188.6,10,10);
fill(172,112,40,100);
ellipse(616,200,20,20);
fill(211,128,51,100);
ellipse(625,200,15,15);
fill(211,128,51,100);
ellipse(630,205,18,18);
fill(160,94,14,100);
ellipse(642,209.5,18,18);
fill(121,67,2,100);
ellipse(652,212,18,18);
fill(79,43,0,100);
ellipse(662,222,18,18);
fill(58,42,0,100);
ellipse(652,232,18,18);
fill(32,17,0,100);
ellipse(642,242,18,18);
fill(254,207,151,100);
ellipse(630,234,30,30);

//right nose
fill(178,115,40,100);
ellipse(550,234,20,20);
fill(203,141,68,100);
ellipse(540,254,20,20);
fill(203,141,68,100);
ellipse(540,254,20,20);

//bezier shape
noFill();
stroke(255, 102, 0);
stroke(254, 207, 151);//color fill
bezier(600, 200, 520, 220, 510, 320, 510, 320);
noFill();
strokeWeight(1.5);
stroke(255, 102, 0);
stroke(254, 207, 151);//color fill
bezier(415, 130, 470, 140, 417, 400, 500, 360);

//line shape
line(580, 140, 675, 175);

//curveVertex
beginShape();
curveVertex(110,  371);
curveVertex(544,  401);
curveVertex(556,  439);
curveVertex(121,  417);
endShape();

//left eye
fill(254,207,151,220);
ellipse(438,217,30,30);

}``````

For this self-portrait, I approached it in a very abstract way. My concept was to convey the relationship between society and self. Therefore, I was trying to present my face as it was gradually appearing from the left. To pursue this idea, I used many ellipses with transparency to create a bubble-effect. After I first finished my work, I found the face was not obvious enough, so I tried to make it more apparent by creating lines and curves which outline some features on my face.

haewanp – Project 01 – Self Portrait

``````//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.

mjnewman Project-01-Face

``````function setup() {
createCanvas(600,600);
background(199,75,155);
}

function draw() {

//hair
noStroke();
fill(72,52,18);
ellipse(295,286,275,275);
rect(157,278,276,197);
ellipse(297,442,303,169);

//body
noStroke();
fill(91,114,182);
rect(123,479,342,180,60);

//neck
noStroke();
fill(221,212,161);
ellipse(295,477,140,140);
rect(225,430,140,53);

noStroke();
fill(238,232,184);
ellipse(296,292,211,184);
rect(191,280,210,90);
ellipse(296,375,210,210);

//undereye circles
noStroke();
fill(203,190,220);
ellipse(243,317,45,45);
ellipse(343,317,45,45);
fill(238,232,184);
rect(200,289,189,31);

//eyes
noStroke();
fill(48,162,102);
ellipse(250,312,35,35);
ellipse(335,312,35,35);

//mouth
stroke(222,141,187);
strokeWeight(9)
line(254,415,335,415)

//nose
noFill();
stroke(216,208,158);
strokeWeight(5);
arc(294,355,40,40,125,29);

//earrings
noStroke();
fill(229,205,59);
ellipse(186,357,21,21);
ellipse(404,357,21,21);

//hair part
noStroke();
fill(238,232,184);
rect(289,172,12,43);

//eyebrows
stroke(72,52,18);
strokeWeight(10);
line(212,284,268,279);
line(317,270,375,282);
}
``````

In order to prepare for this first project, I made sure to do the Mondrian assignment first to get familiar with the language. I have previously taken an Intro to Web Design, where I learned HTML and CSS, so I was slightly surprised how closely related the three languages are.

My first step was to draw out a rough estimate of my face with primitive shapes that I knew I would be able to recreate in Javascript. I had some trouble designing and then recreating the nose, but I’m not mad at how it turned out. I also thought it would be more fun to do an expression that wasn’t happy because a majority of my day is not spent smiling (but in the best way possible).

ablackbu – Project 01 – face

This was a perfect way to start exploring making art with code. While I was writing the code for shapes I could not help but think about how difficult and time consuming it was to make one rectangle appear on the screen. At the same time though it forced me to slow down and really think about the placement of each object.

``````function setup() {
createCanvas(600, 600);

}

function draw() {
background(146,228,247);

//shirt
strokeWeight(5);
fill(230);
ellipse(300, 600, 400, 300);

//neck
strokeWeight(5);
fill(190, 166, 120)
ellipse(300,480,140,80)

strokeWeight(0);
fill(237, 214, 154);
ellipse(300, 300, 300, 400);

//white left
strokeWeight(0);
fill(255);
ellipse(270, 280, 50, 30);

//white right
strokeWeight(0);
fill(255);
ellipse(370, 280, 50, 30);

//eye left
strokeWeight(0);
fill(15, 97, 170);
ellipse(270, 280, 30, 30);

//eye right
strokeWeight(0);
fill(15, 97, 170);
ellipse(370, 280, 30, 30);

//pupil left
strokeWeight(0);
fill(0);
ellipse(270, 280, 10, 10);

//pupil right
strokeWeight(0);
fill(0);
ellipse(370, 280, 10, 10);

//face cut right
strokeWeight(0);
fill(146,228,247);
triangle(375,476,470,280,530,460)

//face cut left
strokeWeight(0);
fill(146,228,247);
triangle(225,476,130,280,70,460)

//hair
strokeWeight(0);
fill(69,43,29);
rect(150,70,300,100)

//hair cut left
strokeWeight(0);
fill(146,228,247);
triangle(140,60,220,60,140,200)

//hair cut right
strokeWeight(0);
fill(146,228,247);
triangle(320,60,460,60,460,200)

//hair ext.
strokeWeight(0);
fill(69,43,29);
triangle(140,200,150,300,220,70)

//nose
strokeWeight(0);
fill(190, 166, 120);
ellipse(330, 350, 30, 30);

//lip bottom
stroke(186,123,165)
strokeWeight(10);
fill(138,84,121);
arc(330, 410, 80, 50, 0, TWO_PI+PI, OPEN);

//teeth
strokeWeight(0);
fill(225);
arc(330, 410, 76, 45, 0, TWO_PI+PI, OPEN);

//lip top
strokeWeight(5);
line(292, 410, 368, 410)

//brow left
stroke(0,0,0)
strokeWeight(10);
fill(0);
arc(270, 250, 60, 30, PI, TWO_PI);

//brow right
stroke(0,0,0)
strokeWeight(10);
fill(0);
arc(370, 250, 60, 30, PI, TWO_PI);

//red box
strokeWeight(0);
fill(200, 0, 0);
rect(240, 555, 120, 40);

//ear
strokeWeight(0);
fill(190, 166, 120)
ellipse(160,300,50,90)

}``````

mstropka-Project 01-Self Portrait

Here is what I worked on for Project 1. I tried using as few shapes as possible to create an image that captured my likeness. because I only know how to make basic shapes, I had to mask off certain shapes to make more complex shapes. I would be interested in learning a more streamlined way of creating more complex shapes.

``````//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Assignment-02

function setup() {
createCanvas(600, 600);

}
function draw() {
background(225,225,225);

//hair
rectMode(CENTER);
fill(255,255,51);
noStroke();
rect(300,180,350,250);

//body
fill(153,204,250);
noStroke();
ellipse(300,600,350,350);

//neck
fill(225,204,153);
stroke(153,204,200)
ellipse(300,420,150,150);
fill(225,204,153);
noStroke();
ellipse(300,300,350,350);

//left eye
fill(153,204,250);
noStroke();
ellipse(220,250,100,100);

fill(0);
noStroke();
ellipse(240,235,40,40);

//right eye
fill(153,204,250);
noStroke();
ellipse(400,275,75,75);

fill(0);
noStroke();
ellipse(410,260,20,20);

// mouth
fill(0);
noStroke();
ellipse(250,400,80,60);

// hair triangles
fill(225,225,225);
triangle(100,200,50,25,300,10);
triangle(300,100,310,10,400,1);

}
``````