Category: Project-01-Face

Susie Lee – Project 01 – Face

susiel_face_project01

/* 
Susie Lee
Section E
susiel@andrew.cmu.edu
Project-01
*/

function setup() {
    createCanvas(600, 650);
    background(255);
}

function draw() {
	//background circle
	strokeWeight(0);
	fill(52,41,19);
	ellipse (300, 270, 415, 415);
	// face circle
	fill(233,206,167);
	ellipse (290, 400, 151, 151);
	//ears 
	noStroke();
	fill(233,206,167);
	ellipse (368, 406, 18, 18);
	ellipse (214, 406, 18, 18);
	//earrings 
	noStroke();
	fill(177,148,48);
	rect(367, 412, 2.25, 5.3, 20);
	rect (370, 412, 2.25, 5.3, 20);
	rect (209, 411, 2.25, 5.3, 20);
	rect (212, 413, 2.25, 5.3, 20);
	triangle(369,403,368,405,371, 405);
	//hair
	strokeWeight(0);
	fill(52,41,19);
	ellipse (246, 334, 156, 113);
	ellipse (358, 341, 91, 113);

	strokeWeight(1);
	stroke (255);
	line (398,354, 398, 452);
	line (391, 400, 391, 452);
	line(382, 394, 382, 447);
	line(200,361,200, 440);
	line(207, 420, 207, 472);

	stroke(255);
	strokeWeight(1);
	noFill();
	ellipse (261, 334, 99, 63);
	ellipse(364, 341, 63, 79);
	strokeWeight(0);
	fill(52,41,19);
	rect(194, 265, 136, 65);
	rect(206, 236, 29, 136);
	rect(330, 289,87,59);
	rect(365, 302, 31, 87);
	//face
	stroke(255);
	strokeWeight(3);
	noFill();
	ellipse (256, 420, 30, 30);
	ellipse (319, 420, 30, 30);

	noStroke();
	fill(233,206,167);
	rect(256,402,20,35);
	rect(238,421,37,17);
	rect(320,402,20,35);
	rect(300,421,37,17);

	stroke(52,41,19);
	strokeWeight(1);
	noFill();
	ellipse (257, 425, 20, 20);
	ellipse (320, 425, 20, 20);
	noStroke();
	fill(233,206,167);
	rect(244,413,24,13);
	rect(307,413,24,13);

	stroke(52,41,19);
	strokeWeight(2);
	noFill();
	ellipse (288, 431, 22, 22);
	noStroke();
	fill(233,206,167);
	rect(272,430,32,19);

	stroke(52,41,19);
	strokeWeight(2);
	noFill();
	ellipse (318, 421, 42, 42);
	ellipse (258, 421, 42, 42);
	
	noStroke();
	fill(139,24,26);
	ellipse (288, 445, 21, 14);
	noStroke();
	fill(206,176,137);
	triangle (288, 423, 283, 434, 293,434);

	noStroke();
	fill(52,41,19);
	rect(319,435,0.86,3.7);
	rect(256,435,0.86,3.7);
	stroke(52,41,19);
	strokeWeight(0.86);
	line(260,435,261,438);
	line(253,434,252,437);
	line(316,434,315,438);
	line(323,435,324,438);
	//jank mask
	stroke(255);
	strokeWeight(40);
	noFill();
	ellipse (300, 270, 415, 415);
	//zzz
	stroke(255);
	strokeWeight(7);
	line(249, 284, 285, 284);
	line(249, 313, 284, 285);
	line(249, 313, 284, 313);
	strokeWeight(10);
	line(320,239,385,239);
	line(320,290,385,239);
	line(320, 292,391, 292);
	strokeWeight(15);
	line(368,115,487,115);
	line(374,201,487,115);
	line(374,203,505,203);
	//arms
	stroke(233,206,167);
	strokeWeight(30);
	line(365,438,385,520);
	line(385,520,355,590);
	line(212,438,190,500);
	line(190,500,220,580);
	//fingers
	//stroke(12,43,33);
	strokeWeight(5);
	line(332, 590, 355, 585);
	line(342,611,355,590);
	line(338,605,350,590);
	line(348, 615, 360,590);
	line(358, 613, 364, 590);

	line(220,580,230,600);
	line(218,560,240, 590);
	line(210, 560, 205, 600);
	line(214, 560, 215, 605);
	line(214, 560, 215, 605);
	line(205, 555, 240, 570);

	
}

It was interesting to first create the illustration through Adobe Illustrator and then have to translate the graphics into a code-based product. It was frustrating to not have the full freedom I get with a vector-based program, but it was interesting to have to think in terms of shapes on shapes.

Tanvi Harkare – Project-01 – Face

tanviharkare_portrait

//Tanvi Harkare
//Section B
//tharkare@andrew.cmu.edu
//Project-01-Face

function setup() { 
    createCanvas(500,600);
    background(0, 180, 180);
}

function draw() {
    scale(0.8);
	//hair
	fill(0);
	rect(160, 120, 280, 500, 150);
	//ears
	fill(215, 159, 102);
	ellipse(185, 310, 40, 70);
	ellipse(415, 310, 40, 70);
	fill(215, 151, 85)
	ellipse(185, 310, 20, 48);
	ellipse(415, 310, 20, 48);
	//head
	fill(215, 159, 102);
	ellipse(300, 300, 220, 300);
	//hair part 2
	fill(0);
	ellipse(325, 180, 150, 75);
	ellipse(250, 185, 90, 65);
	strokeWeight(15);
	stroke(0);
	line(380, 190, 414, 270);
	line(210, 190, 185, 270);
	//earrings
	noStroke();
	fill(255);
	ellipse(187, 339, 6, 6);
	ellipse(413, 339, 6, 6);
	//eyebrows
	fill(0);
	beginShape();
	vertex(325, 250);
	vertex(370, 240);
	vertex(385, 255);
	vertex(370, 250);
	vertex(325, 260)
	endShape();
	beginShape()
	vertex(275, 250);
	vertex(225, 240);
	vertex(210, 255);
	vertex(225, 250);
	vertex(275, 260);
	endShape();
	//glasses
	var x1 = 345; 
	var x2 = 255;
	var y = 275;
	rectMode(RADIUS);
	noFill();
	stroke(0, 0, 139);
	strokeWeight(5);
	rect(x1, y, 35, 25, 5);
	rect(x2, y, 35, 25, 5);
	line(290, 275, 310, 275);
	rectMode(CORNER);
	noStroke();
	//eyes
	fill(255);
	ellipse(x1, y, 40, 22);
	ellipse(x2, y, 40, 22);
	fill(65, 43, 21);
	ellipse(x1, y, 20, 20);
	ellipse(x2, y, 20, 20);
	fill(0);
	ellipse(x1, y, 10, 10);
	ellipse(x2, y, 10, 10);	
	fill(255);
	ellipse(x1 + 2, y - 2, 3, 3);
	ellipse(x2 + 2, y - 2, 3, 3);
	//mouth
    fill(255);
    strokeWeight(4);
    stroke(227, 93, 106);
    arc(300, 380, 80, 50, 0, PI, CHORD);
	//nose
    noFill();
	stroke(65, 43, 21);
	strokeWeight(2);
	ellipse(300, 340, 25, 20);
	fill(215, 159, 102);
	noStroke();
	rect(280, 320, 40, 20);
}

For the self portrait, I wanted to create a portrait that was made from simple shapes. My process started by taking a photo of myself and simplifying geometries into simple shapes, especially ellipses and rectangles. I also used the photo to help determine where shapes should be placed on the face. The only shapes that were created using a series of points are the eyebrows. For the final touch, I added glasses that I sometimes wear and a set of earrings.

self portrait

sketch.js

function setup() {
    createCanvas(350, 350);
    background(0);
}

function draw() {

	fill (45,34,30);//hair
	stroke(45,34,30);
	ellipse (200,230,310,400);


	fill (255,205,148); //face
	ellipse(200,200,230,300);

	stroke (255,205,148); //neck
	rect(148,290,98,90);
	
	stroke(255,205,148) //ear
	ellipse(80,200,60,80);

	ellipse(315,200,60,80); //ear

	fill (253,180,115);
	ellipse (320,200,30,60);//inner ear
	ellipse(70,200,30,60)

	noFill();
	stroke (209,119,0);//earrings
	ellipse (320,265,35,60);
	ellipse (80,265,35,60);
	strokeWeight(4);

	/*fill (139,0,0);//lips
	stroke (139,0,0);
	triangle(230,300,150,250,150,300);
	fill (255,20,147);//inside
	stroke (139,0,0);
	triangle(230,300,150,250,150,300);*/

	if (mouseIsPressed) {
		fill (139,0,0);
		stroke (139,0,0);
		ellipse (200,290,80,80);
		fill (255,20,147);
		ellipse (200,290,79,79);
	} else {fill (139,0,0);//lips
		stroke (139,0,0);
		triangle(230,300,150,250,150,300);
		fill (255,20,147);//inside
		stroke (139,0,0);
		triangle(230,300,150,250,150,300);
	}


	stroke(253,180,115); //hairpart
	line (200, 29, 200, 53);

//nose
	fill(253,180,115);
	ellipse (200,230,30,30);
	ellipse (212,230,20,20);
	ellipse (188,230,20,20);

	rect(190,150,20,80);

	stroke(255,205,148);
	line (195,230,195,60);


	//eyebrows
	stroke(253,180,115);
	rect (220,150,70,5);
	rect (110,150,70,5);


	//Eyes
	fill(255,255,255);
	rect (220,170,70,7);
	rect (110,170,70,7);

	fill (0,0,0);
	stroke(0,0,0);
	rect (222,172,3,3);
	rect (112,172,3,3);

	console.log("dsklhflasdh");




}

I had fun doing this assignment and seeing what I can create visually with code. I gave myself some attitude with a side eye look and I added an if mouse is pressed variable to show me talking.

Helen Reynolds – Project 01 – Self Portrait

To create this self portrait, I experimented with simple shapes in Illustrator and then entered them into p5.js. Because I was able to move things around quickly in Illustrator first, I found this process more accessible and effective than just going to p5.js right off the bat. I had a lot of fun with considering what aspects of my appearance and personality I wanted to portray and how I could create them using the little coding knowledge I have.
hreynold-face 

/* Helen Reynolds
Section E
hreynold@andrew.cmu.edu
hreynold-01
*/

function setup() {
    createCanvas(400, 400);
    background(140, 110, 114);
    angleMode(DEGREES);
 }

function draw() {
	noStroke();

	//hair rect
	rectMode (CENTER);
	fill(36, 31, 23);
	rect(195, 204, 283, 191); //(x, y, w, h, radius of every corner)

	//hair circle
	ellipseMode (CENTER);
	fill(36, 31, 23);
	ellipse(193, 103, 185, 185);

	//shirt rect
	fill(173, 152, 157);
	rect(194, 335, 269, 71);

	//shirt circle
	fill(173, 152, 157);
	ellipse(194, 303, 269, 121);

	//neck circle
	fill(229, 203, 190);
	ellipse(194, 245, 77, 52);

	//hair cover rect left
	fill(140, 110, 114);
	rect(55, 150, 90, 135);

	//hair cover circle left
	fill(140, 110, 114);
	ellipse(52, 213, 97, 97);

	//hair cover rect right
	fill(140, 110, 114);
	rect(330, 150, 90, 135);

	//hair cover circle right
	fill(140, 110, 114);
	ellipse(334, 214, 97, 97);

	//neck rect
	fill(229, 203, 190);
	rect(194, 223, 78, 53);

	//shadow ellipse
	fill(201, 177, 167);
	ellipse(194, 204, 78, 52);

	//face rounded rect
	fill(229, 203, 190);
	rect(193, 125, 147, 176, 73);

	//bubblegum ellipse
	fill(234, 143, 188);
	ellipse(194, 193, 53, 53);	

	//bubblegum sparkle
	fill(255);
	ellipse(204, 178, 7, 7);

	//left eyebrow black ellipse
	noStroke ();
	fill(36, 31, 23);
	ellipse(165, 112, 33, 20);

	//left eyebrow beige ellipse
	fill(229, 203, 190);
	ellipse(165, 117, 36, 20);

	//left eyebrow beige rect
	fill(229, 203, 190);
	rect(180, 113, 14, 23);	

	//right eyebrow black ellipse
	noStroke ();
	fill(36, 31, 23);
	ellipse(221, 111, 33, 20);

	//right eyebrow beige ellipse
	fill(229, 203, 190);
	ellipse(222, 115, 36, 20);

	//right eyebrow beige rect
	fill(229, 203, 190);
	rect(205, 111, 14, 23);	

	//left eye
	fill(36, 31, 23);
	ellipse(163, 132, 17, 17);

	//left eye sparkle
	fill(255);
	ellipse(167, 129.5, 7, 7);

	//left eye top eyelash
	stroke (0);
	strokeWeight (2);
	line(157, 118, 160, 125);

	//left eye middle eyelash
	stroke (0);
	strokeWeight (2);
	line(153, 122, 157, 126);

	//left eye bottom eyelash
	stroke (0);
	strokeWeight (2);
	line(150, 127, 156, 129);

	//right eye
	noStroke ();
	fill(36, 31, 23);
	ellipse(220, 131, 17, 17);

	//right eye sparkle
	fill(255);
	ellipse(223, 129, 7, 7);

	//right eye top eyelash
	stroke (0);
	strokeWeight (2);
	line(226, 118, 224, 124);

	//right eye middle eyelash
	line(231, 122, 226, 126);

	//right eye bottom eyelash
	line(234, 126, 228, 128);

	//nose shadow rect
	noStroke ();
	fill(201, 177, 167);
	rect(192, 144, 18, 40, 9);

	//nose top rect
	fill(229, 203, 190);
	rect(189, 141, 18, 40, 9);

	//freckle 1, left to right
	stroke (195, 147, 121)
	strokeWeight (2);
	point(150, 145);

	//freckle 2
	stroke (195, 147, 121)
	strokeWeight (2);
	point(154, 150);

	//freckle 3
	stroke (195, 147, 121)
	strokeWeight (2);
	point(156, 154);

	//freckle 4
	stroke (195, 147, 121)
	strokeWeight (2);
	point(159, 148);

	//freckle 5
	stroke (195, 147, 121)
	strokeWeight (2);
	point(161, 153);

	//freckle 6
	stroke (195, 147, 121)
	strokeWeight (2);
	point(165, 157);

	//freckle 7
	stroke (195, 147, 121)
	strokeWeight (2);
	point(164, 149);

	//freckle 8
	stroke (195, 147, 121)
	strokeWeight (2);
	point(168, 152);

	//freckle 9
	stroke (195, 147, 121)
	strokeWeight (2);
	point(173, 148);

	//freckle 10
	stroke (195, 147, 121)
	strokeWeight (2);
	point(212, 148);

	//freckle 11
	stroke (195, 147, 121)
	strokeWeight (2);
	point(216, 151);

	//freckle 12
	stroke (195, 147, 121)
	strokeWeight (2);
	point(220, 156);

	//freckle 13
	stroke (195, 147, 121)
	strokeWeight (2);
	point(220, 148);

	//freckle 14
	stroke (195, 147, 121)
	strokeWeight (2);
	point(222, 152);

	//freckle 15
	stroke (195, 147, 121)
	strokeWeight (2);
	point(226, 148);

	//freckle 16
	stroke (195, 147, 121)
	strokeWeight (2);
	point(228, 154);

	//freckle 17
	stroke (195, 147, 121)
	strokeWeight (2);
	point(230, 150);

	//freckle 18
	stroke (195, 147, 121)
	strokeWeight (2);
	point(233, 144);

	//hair left ellipse
	noStroke();
	push();
	translate(167, 60);
	rotate(-25.5);
	fill(36, 31, 23);
	ellipse(0, 0, 121, 63);
	pop();

	//hair right ellipse
	noStroke();
	push();
	translate(245, 70);
	rotate(320);
	fill(36, 31, 23);
	ellipse(0, 0, 36, 75);
	pop();

}

Ean Grady-Project-01-Face

sketch

function setup() {
    createCanvas(500, 500)
    background(0, 0, 0)
    noStroke ();

    //background
    fill (120, 200, 400)
    rect(25, 25, 450, 450)
    fill (100, 100, 200)
    rect(50, 50, 400, 400)
    fill (120, 120, 200)
    rect (75, 75, 350, 350)
    fill (10, 200, 140)
    rect (100, 100, 300, 300)
    fill (20, 120, 240)
    rect (125, 125, 250, 250)

    //hair pt.1
    fill (0, 0, 0)
    ellipse (250, 170, 200, 200)

    //legs
    fill (80, 10, 100)
    ellipse (180, 400, 100, 250)
    ellipse (320, 400, 100, 250)

    //body
    fill (100, 10, 100)
    ellipse (250, 300, 250, 250)
    fill (150, 20, 50)
    ellipse (250, 300, 200, 200)
    fill (50, 50, 100)
    ellipse (250, 300, 150, 150)
    fill (0, 0, 0)
    ellipse (250, 300, 100, 100)

    //head
    fill (255, 228, 196)
    ellipse(250, 200, 200, 200)

    //eyes
    fill (255, 255, 255)
    ellipse (200, 200, 60, 50)
    ellipse (300, 200, 60, 50)
    fill (250, 128, 114)
    ellipse (200, 200, 40, 40)
    ellipse (300, 200, 40, 40)
    fill (0, 0, 0)
    ellipse (300, 200, 25, 25)
    ellipse (200, 200, 25, 25)

    //hair
    arc(260, 100, 50, 60, 0, HALF_PI);
    arc(240, 100, 50, 60, 0, HALF_PI);
    arc(220, 100, 50, 60, 0, HALF_PI);
    arc(200, 100, 50, 60, 0, HALF_PI);
    arc(180, 100, 50, 60, 0, HALF_PI);

    //mouth
    fill (250, 128, 114)
    ellipse (200, 280, 80, 60)
    fill (0, 0, 0)
    ellipse (200, 280, 70, 40)

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

    //eyebrows
    fill (0, 0, 0)
    rect (175, 150, 50, 20)
    rect (275, 150, 50, 20)
}

function draw() {
}

For this project, my main goal was to make a visually ‘popping’ piece by experimenting with colour and shape placement. I really enjoyed coding the piece because it was both an interesting creative exercise and very beneficial in helping me become more comfortable with p5.js.

Miranda Luong Project-01-Face

sketch

/*Miranda Luong
Section E
mluong
Project-01-Face
*/

function setup() {
    createCanvas(500, 525);
    background(9,0,255);
}

function draw() {
	//hair
	fill(20);
	noStroke();
	ellipse(250, 250, 380, 430);
	//body
	fill(60);
	noStroke();
	ellipse(250,500,420,500)
	//head
	fill(220);
	noStroke();
	ellipse(250, 250, 300, 320);
	//ears
	noStroke();
	fill(220);
	rect(370,230,50,60,30);
	noStroke();
	rect(80,230,50,60,30);
	//left eye
	fill(51);
	noStroke();
	ellipse(190, 245, 30, 30);
	//right eye
	fill(51);
	noStroke();
	ellipse(310, 245, 30, 30);
	//nose
	fill(51);
	noStroke();
	ellipse(250,280,40,40);
	fill(220);
	noStroke();
	ellipse(250,280,20,20);
	fill(220)
	noStroke();
	rect(230,260,40,22)
	//mouth
	fill(51);
	ellipse(250,350,40,40);
	//mouse
	fill(120);
	noStroke;
	ellipse(150,490,100,100)
	//left hand
	fill(220);
	noStroke();
	rect(100,450,20,20,30);
	rect(120,430,20,30,30);
	rect(140,430,20,30,30);
	rect(160,430,20,30,30);
	ellipse(200,470,20,20);
	//keyboard
	fill(120)
	rect(280,463,20,12)
	rect(310,470,20,5)
	rect(340,463,20,12)
	rect(370,463,20,12)
	rect(400,463,20,12)
	rect(270,480,160,15)
	//right hand
	fill(220);
	noStroke();
	rect(370,430,20,20,30);
	rect(350,420,20,30,30);
	rect(330,420,20,30,30);
	rect(310,440,20,30,30);
	ellipse(290,440,20,20);
	//desk
	fill(220)
	rect(0,495,500,30);
}

I thought it would be funny to create a self-portrait of myself hunched over a computer coding and clicking away on a keyboard and mouse. It was supposed to be very meta-I’m happy with the way it turned out.

Kyle Leve-Project-01-Face

sketch

//Kyle Leve
//Section A
//kleve@andrew.cmu.edu
//Project-01


function setup() {
    createCanvas(600, 600);
    background('skyblue');
}

function draw() {
	//face
	noStroke();
	fill('tan');
	ellipse(300,300,300,350);

	//eyes
	fill('white');
	ellipse(230,250,70,50);

	fill('white');
	ellipse(370,250,70,50);

	fill(77,47,23);
	ellipse(240,255,30,30);

	fill(77,47,23);
	ellipse(380,255,30,30);

	fill('black');
	ellipse(240,255,15,15);

	fill('black');
	ellipse(380,255,15,15);

	fill('white');
	ellipse(245,250,10,10);

	fill('white');
	ellipse(385,250,10,10);

	//hair
	fill(77,47,23);
	ellipse(300,150,225,125);

	fill('tan');
	ellipse(295,180,200,100);

	//Glasses
	fill('black');
	rect(280,250,35,5);

	fill('black');
	rect(280,210,8,80);

	fill('black');
	rect(180,210,100,8);

	fill('black');
	rect(180,285,108,8);

	fill('black');
	rect(180,210,8,75);

	fill('black');
	rect(155,247,30,8);

	fill('black');
	rect(315,210,8,80);

	fill('black');
	rect(315,210,100,8);

	fill('black');
	rect(315,285,108,8);

	fill('black');
	rect(415,210,8,75);

	fill('black');
	rect(415,247,28,8);

	//Eyebrows
	fill(77,47,23);
	ellipse(240,190,100,20);

	fill('tan');
	ellipse(240,200,100,20);

	fill(77,47,23);
	ellipse(365,190,100,20);

	fill('tan');
	ellipse(365,200,100,20);

	//Mouth
	fill('black');
	ellipse(300,400,150,60);

	fill('tan');
	ellipse(300,390,150,60);

	//Nose
	fill('black');
	rect(310,310,6,50);

	fill('black');
	rect(276,360,40,6);

}

This was my first successful attempt at coding and I really enjoyed it! I liked the process of getting to make something unique through trial-and-error, and was surprised at how easy it was to write and edit the code in Sublime.

Austin Treu-Project-01-Face

atreu-face

//Austin Treu
//Section C
//atreu@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(600, 600);
    background(0,255,255);

    //head
    fill(255, 208, 169);
    noStroke();
    ellipse(width/2, height/2, width/2+width/10, height/2+height/4);

    //eyes
        //whites l r
        fill(255);
        ellipse(width/2-width/8, height/2-height/10,width/10, height/15);
        ellipse(width/2+width/8, height/2-height/10,width/10, height/15);
        //iris l r
        fill(160, 177, 110);
        ellipse(width/2-width/8, height/2-height/10, width/15, height/15);
        ellipse(width/2+width/8, height/2-height/10,width/15, height/15);
        //pupils lr
        fill(0);
        ellipse(width/2-width/8, height/2-height/10, width/20, height/20);
        ellipse(width/2+width/8, height/2-height/10,width/20, height/20);

    //nose
    stroke(205, 158, 119);
    line(width/2,height/2-height/15, width/2+width/10, height/2+height/10);
    line(width/2,height/2+height/9,width/2+width/10, height/2+height/10);

    //ears lr
    noStroke();
    fill(255, 208, 169);
    ellipse(width/4-width/18, height/2, width/10, height/5);
    ellipse(3*width/4+width/18, height/2, width/10, height/5);

    //mouth
    fill(254);
    arc(width/2, height/2+height/5, width/5, height/7,0, PI, CHORD);

    //eyebrows lr
    fill(255,220,135);
    quad(width/2-width/5.5, height/2-height/6,
        width/2-width/5.5, height/2-height/7, 
        width/2-width/13, height/2-height/6, 
        width/2-width/13, height/2-height/5);
    quad(width/2+width/5.5, height/2-height/6,
        width/2+width/5.5, height/2-height/7, 
        width/2+width/13, height/2-height/6, 
        width/2+width/13, height/2-height/5);


    //hair
    fill(255,75,0);
        //sideburns lr
        triangle(width/4-width/25,height/2, 
            width/4-width/40, height/4, 
            width/4+width/20, height/4);
        triangle(3*width/4+width/25,height/2, 
            3*width/4+width/40, height/4, 
            3*width/4-width/20, height/4);
        //top
        arc(width/2,height/4, width/2+width/20, height/3, PI, 0, PI);
}

This was an interesting project to work on, as it required simplifying real life down to just rudimentary shapes. The coding wasn’t too difficult, although finding the exact points to place each shape required a decent amount of work.

Alexandra Kaplan-Project-01-Face

aekaplan-selfportrait

function setup() {
    createCanvas(600, 600);
    background(186,173,218);
}

function draw() {
 
    //hair
    strokeWeight(0);
    fill(60,40,30);
	//left side
	ellipse(130,400,90,100);
	ellipse(130,340,100,150);
	ellipse(140,280,100,150);
	ellipse(155,240,90,220);
	//back
	ellipse(170,400,100,100);
	ellipse(220,400,100,100);
	ellipse(260,400,100,100);
	ellipse(300,400,100,100);
	ellipse(340,400,100,100);
	ellipse(380,400,100,100);
	ellipse(420,400,100,100);
	ellipse(470,400,100,100);
	//right side
	ellipse(480,400,90,100);
	ellipse(470,340,100,150);
	ellipse(460,280,100,150);
	ellipse(450,220,80,150);

	//body
    fill(100,100,60);
    strokeWeight(0);
    ellipse(300,600,425,240);

    //neck
    fill(245,210,190);
    ellipse(300,513,160,80);
    rect(240,440,125,90);
    fill(235,200,180);
    ellipse(300,440,130,52);

    //head
    fill(255,220,200);
    rect(163,130,275,200);
    ellipse(300,300,280,330);

    //eyebrows
    strokeWeight(7);
    ellipse(240,260,80,40);
    strokeWeight(0);
    ellipse(240,265,90,40);
    strokeWeight(7);
    ellipse(360,260,80,40);
    strokeWeight(0);
    ellipse(360,265,90,40);

    //eyes
	//back
	fill(205,170,150);
	ellipse(240,275,70,40);
	ellipse(360,275,70,40);
	//front
	fill(255)
	ellipse(240,277,60,35);
	ellipse(360,277,60,35);
	//color
	fill(70,50,40);
	ellipse(240,275,30,30);
	ellipse(360,275,30,30);
	//pupil
	fill(0);
	ellipse(240,275,20,20);
	ellipse(360,275,20,20);
	
    //ears
    fill(255,220,200);
    ellipse(155,275,30,60);
    ellipse(445,275,30,60);

    //lips
    fill(200,138,120);
    ellipse(300,400,90,20);
    ellipse(280,395,60,20);
    ellipse(320,395,60,20);
    strokeWeight(2);
    line(255,395,345,395);
    line(245,390,255,395);
    line(355,390,345,395);

    //nose
    fill(255,220,200);
    arc(300,330,40,30,0,PI, PI + QUARTER_PI);

    //bangs
    strokeWeight(0);
    fill(60,40,30);
    ellipse(200,160,140,90);
    ellipse(160,200,70,125);
    ellipse(450,200,60,120);
    rotate(radians(10));
    ellipse(360,90,270,125);

}

I really enjoyed the freedom this project gave me to explore the basics of programming. As this is my first experience with coding, I really enjoyed seeing how I could make something appear just by writing a short line of code.

My process started with a quick napkin sketch of the general shapes I wanted and where they would be. I then mainly worked on guess and check with the exact placement of the shapes. In future projects, I want to be more careful in my planning and tracking of where different things are located to make the process a bit more streamlined.

Jisoo Geum-Project 01-Face

sketchindex

function setup() {
    createCanvas(600,600);
    background(227,232,150);
}
function draw() {
	s = color(230,190,142)
	o = color(190,100,59)
	g = color(83,114,58)
	b = color(95,50,30)


    
    noStroke();
    fill(80,68,58);
    rect(84.3,269.865,443.011,214.291); //hair
    fill(g);
    quad(161.13,381.64,446.34,381.64,515.21,600,92.26,600); //clothes
    fill(228,183,136);
    ellipseMode(CORNER);
    ellipse(66.264,259.789,57.425,76.955);//Lears
    ellipse(486.497,259.789,57.425,76.955);//Rears
    fill(80,68,58);
    ellipse(84.3,34.471,443.011,376.798);//hair
    fill(s);
    ellipse(88.032,110.559,433.574,308.849);//Face
    fill(s);
    ellipse(244.556,94.708,62.73,62.73);//Lhairline
    ellipse(297.675,94.708,62.73,62.73);//Rhairline

    fill(o);
    ellipse(158.722,266.315,66.652,49.215);//LdsO
    fill(s);
    ellipse(156.37,259.5,67.225,52.039);//LdsS
    rect(154.474,287.076,24.856,23.121);
    rect(212.768,273.794,25.21,23.451);

    fill(o);
    ellipse(389.706,259.369,66.652,49.215);//RdsO
    fill(s);
    ellipse(391.485,252.555,67.225,52.039);//RdsS
    rect(435.749,280.131,24.856,23.121);
    rect(377.101,266.849,25.21,23.451);

    fill(b);
    ellipse(151.955,257.672,76.806,46.701);//LeyeB
    fill(255);
    ellipse(161.126,263.49,62.961,38.293);//LeyeW
    fill(o);
    ellipse(182.175,273.554,40.264,23.451);//LeyeO
    fill(g);
    ellipse(192.048,276.586,26.822,17.867);//LeyeG

    fill(b);
    ellipse(385.107,252.773,76.806,42.311);//ReyeB
    fill(255);
    ellipse(389.62,256.56,67.781,34.736);//ReyeW
    fill(o);
    ellipse(395.84,263.844,42.245,24.466);//ReyeO
    fill(g);
    ellipse(400.753,269.865,25.388,14.703);//ReyeG

    fill(o);
    ellipse(278.441,299.638,50.599,42.754);//noseO
    fill(s);
    ellipse(275.921,305.33,51.035,45.208);
    rect(273.223,313.966,10.436,11.109);
    rect(321.737,323.486,10.436,11.109);




    


   
    

    
}

I used to draw an animated version of my alter ego, which is a 5 year old girl who is addicted to internet. When I received this project, I knew I wanted to code a portrait of my alter ego. The process was enjoyable since I was learning something completely new.