jooheek_Portrait-01-face

jooheek_portrait

//Joo Hee Kim
//Section E
//jooheek@andrew.cmu.edu
//Project-01

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

function draw() {

	background(49, 45, 142);

	strokeWeight(0);

	//HAIR
	fill(202, 165, 145);
	ellipse(280, 250, 350, 300);

	fill(202, 165, 145);
	arc(150, 325, 115, 320, 900, 100);

	fill(202, 165, 145);
	quad(93, 290, 130, 325, 200, 475, 60, 475);

	fill(49, 45, 142);
	arc(24, 275, 140, 450, 10, 90);

	fill(202, 165, 145);
	arc(160, 473, 200, 100, 0, 130);

	fill(202, 165, 145);
	ellipse(440, 250, 50, 100);

	fill(202, 165, 145);
	quad(400, 250, 465, 245, 505, 475, 380, 475);

	fill(49, 45, 142);
	arc(515, 250, 100, 450, 70, 80);

	fill(202, 165, 145);
	arc(405, 473, 200, 100, 350, 130);

	//EARS
	fill(250, 220, 200);
	ellipse(145, 340, 20, 50);

	fill(250, 220, 200);
	ellipse(455, 340, 20, 50);

	fill(239, 207, 186);
	ellipse(145, 340, 10, 30);

	fill(239, 207, 186);
	ellipse(455, 340, 10, 30);

	//FACE
	strokeWeight(0);
	fill(250, 220, 200);
	ellipse(300, 300, 310, 330);

	fill(250, 220, 200);
	rect(145, 300, 310, 40);

	fill(250, 220, 200);
	ellipse(300, 370, 320, 280);

	fill(244, 212, 191);
	ellipse(200, 400, 100, 100);

	fill(244, 212, 191);
	ellipse(395, 400, 100, 100);

	fill(249, 235, 228);
	ellipse(200, 380, 50, 40);

	fill(249, 235, 228);
	ellipse(395, 380, 50, 40);

	fill(249, 235, 228);
	ellipse(370, 200, 50, 40);

	//EYEBROWS
	fill(144, 119, 105)
	rect(200, 280, 70, 20);

	fill(144 ,119, 105);
	triangle(200, 280, 220, 300, 170, 300);

	fill(144, 119, 105);
	rect(325, 280, 70, 20);

	fill(144, 119, 105);
	triangle(395, 280, 420, 300, 385, 300);

	//NOSE
	fill(249, 235, 228);
	rect(270, 280, 55, 20);

	fill(249, 235, 228);
	triangle(270, 300, 325, 300, 300, 330);

	fill(239, 207, 186);
	rect(280, 380, 40, 30);

	fill(249, 235, 228);
	rect(288, 320, 20, 70);

	fill(249, 235, 228);
	rect(280, 370, 40, 20);

	fill(250, 220, 200);
	ellipse(272, 350, 40, 100);

	fill(250, 220, 200);
	ellipse(325, 350, 40, 100);



	//LIPS
	fill(255, 100, 100);
	ellipse(300, 430, 60, 40);

	fill(250, 220, 200);
	rect(270, 400, 60, 30);

	fill(220, 100, 100);
	triangle(290, 415, 310, 430, 270, 430);

	fill(220, 100, 100);
	triangle(310, 415, 330, 430, 290, 430);


	//EYES
	fill(50, 50, 50);
	ellipse(225, 327, 60, 10);

	fill(255, 255, 255);
	ellipse(225, 330, 60, 10);

	fill(0, 0, 0);
	ellipse(225, 330, 10, 10);

	fill(50, 50, 50);
	ellipse(370, 327, 60, 10);

	fill(255, 255, 255);
	ellipse(370, 330, 60, 10);

	fill(0, 0, 0);
	ellipse(370, 330, 10, 10);






	






}

While I wanted to make my portrait simple, I wanted to give emphasis to the features that are the most unique and prominent on my face. I sketched the way that I wanted to make if first then made my code as similar to it as possible.

adev—Project 01—face

self_portrait_aisha

//Aisha Dev
//Project 1
//Self-portrait

function setup() {
  createCanvas(600,600);
    background(211,156,110);
    
}

function draw() {
    
   //face
    fill(15,0,68);
    noStroke();
    triangle(0,0,0,300,100,0);
    
    quad(0,400,110,400,170,600,0,600);
    
    triangle (600,470,600,600,550,600);
    
    //hair
    noFill();
   stroke(255,6,255);
    strokeWeight(15);
    bezier(400 - 90,0,500 -70,40 +50,450 -50,120 +100,600,180 +80);
    bezier(400 - 50,0,500 -50,40 +20,450 -30,120 +50,600,180 +40);
   bezier(400,0,500,40,450,120,600,180);
   bezier(400 + 50,0,500 +40,40 -20,450 +30,120 -50,600,180 -40);
    bezier(400 + 100,0,500 +60,40 -25,450 +60,120 -100,600,180 -80);
     bezier(400 + 150,0,500 +80,40,450 +130,120 -150,600,180 -120);
    
    //nose
    stroke(190,130,90);
    strokeWeight(15);
    line(110,0,5,310);
    line(0,395,130,395);
    
    fill(190,130,90);
    noStroke();
    ellipse(100,370,60,60);
     ellipse(30,380,40,40);
    
    //lips
    fill(234,42,42);
    noStroke();
    arc(160,515,100,70,PI,0,CHORD);
    arc(225,515,100,70,PI,0,CHORD);
    fill(209,90,90);
    noStroke();
    arc(193,515,160,90,0,PI,CHORD);
    
    
     //earring
    noFill();
    stroke(250,230,0);
    strokeWeight(5);
    ellipse(580,380,60,60);
    fill(250,230,0);
    noStroke();
    ellipse(580,420,20,20);
    ellipse(561,415,20-3,20-3);
    ellipse(599,415,20-3,20-3);
    
    //eye1 
    fill(0);
    noStroke();
    ellipse(200,223,130,70);
    fill(255);
    noStroke();
    ellipse(200,230,130,70);
    
    fill(0);
    stroke(61,31,31);
    strokeWeight(15);
    ellipse(200,230,40,40);
    
     //eye2
    fill(0);
    noStroke();
    ellipse(400,223,130,70);
    fill(255);
    noStroke();
    ellipse(400,230,130,70);
    
    fill(0);
    stroke(61,31,31);
    strokeWeight(15);
    ellipse(400,230,40,40);
    
    //eyebrows
    noStroke();
    quad(270,150,267,170,150,160,150,90+50);
    quad(270+80,150,267+80,170,170+300,160,170+300,90+50);
    

}

I wanted to create something simple and bold, while playing with fun elements like colour. I didn’t want it to be a literal portrait, but a more abstract graphic illustration. I wanted each of the elements to be quite distinct so I could have fun playing with them later next week.

heeseoc-Project-01-Face

heeseoc-portrait

//Steph Chun
//15-104 section #A
//heeseoc@andrew.cmu.edu
//Project-01


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

function draw() {

	//background//
	background(255,255,255);
	fill(191,205,219);
	noStroke();
	ellipse(260,252,420,420);

	//hair//
	fill(0);
	ellipse(200, 200, 100, 70);
	ellipse(158, 230, 80, 50);
	ellipse(160, 290, 70, 50);
	ellipse(125, 265, 50, 50);
	ellipse(285, 200, 130, 100);
	ellipse(350, 210, 70, 50);
	ellipse(355, 235, 100, 45);
	ellipse(360, 270, 100, 60);
	ellipse(345, 305, 70, 40);

	//ear//
	fill(220,190,195);
	ellipse(340,270,40,30);
	fill(80,57,57);
	ellipse(344,268,15,13);
	fill(220,190,195);
	ellipse(342,272,15,13);

	//face shadow//
	fill(236,209,209);
	noStroke();
	ellipse(250,270,180,150);

	//earring//
	noFill();
	stroke(150,150,150);
	strokeWeight(2);
	arc(360, 272, 10, 10, QUARTER_PI*6, PI);

	//face//
	fill(255,233,233);
	noStroke();
	ellipse(240,263,165,145);

	//more hair//
	fill(0);
	ellipse(205,200,60,40);
	ellipse(260,190,60,40);
	ellipse(185,225,50,50);

	//blush//
	fill(249,211,211);
	ellipse(300,280,40,25);
	ellipse(182,280,40,25);

	//eyebrows//
	fill(0);
	rect(181,240,40,8);
	rect(260,240,40,8);
	triangle(310,248,300,240,270,248);

	//eyes//
	fill(255,255,255);
	ellipse(280,265,40,25);
	ellipse(202,265,40,25);

	//pupils//
	fill(175,205,225);
	ellipse(280,265,20,20);
	fill(0);
	ellipse(280,265,10,10);
	fill(175,205,225);
	ellipse(202,265,20,20);
	fill(0);
	ellipse(202,265,10,10);

	//eyelid//
	fill(179,110,110);
	arc(280, 265, 40, 25, HALF_PI*6, PI);
	arc(202, 265, 40, 25, HALF_PI*6, PI);

	//eyeliner//
	fill(80,57,57);
	triangle(260,265,300,265,310,260);
	triangle(222,265,182,265,172,260);

	//hair covering eye//
	fill(0);
	ellipse(170,260,60,60);

	//nose//
	fill(236,200,200);
	triangle(230,287,225,295,245,295);

	//mole//
	fill(80,57,57);
	ellipse(290,235,3,3);

	//lips//
	fill(185,80,80);
	arc(232, 311, 20, 13, PI, 0, OPEN);
	arc(247, 311, 25, 13, PI, 0, OPEN);
	fill(205,84,84);	
	arc(244.5, 311, 30, 20, 0, PI, OPEN);

	//mouse input//
	fill(255,251,97);
	rect(mouseX, mouseY, 20, 1);
	rect(mouseX+9.5, mouseY-14, 1, 30);
	rect(mouseX-4, mouseY+12, 10, 1);
	rect(mouseX+0.5, mouseY+6, 1, 16);	
	rect(mouseX-10, mouseY-12, 14, 1);
	rect(mouseX-4, mouseY-20, 1, 20);	

}

I started off with trying to capture my personal attributes that makes my portrait unique. Then, I sketched out my idea on a piece of paper, and I went right on to coding my piece. While I was coding, because approximating the coordinates was super tedious, I thought I should have planned out the coordinates on my computer in advance. I added a mouse input to give it a little more character and life to my piece.

keuchuka-project01-portrait

// Fon Euchukanonchai
// keuchuka@andrew.cmu.edu
// 15-104
// 09/01/2017

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

function draw() {

//circle
	strokeWeight(0);
	fill(254, 230, 0);
	ellipse(380, 380, 600, 600);

//face	
	strokeWeight(0);
	fill(154, 154, 114);
	rect(400, 390, 290, 310);

	fill(118, 119,111);
	ellipse(410, 400, 380, 390);

	fill(132, 130, 91);
	ellipse(400, 400, 360, 380);

	fill(254, 245, 249);
	rect(390, 490, 150, 140);

	fill(254, 245, 249);
	ellipse(390, 410, 340, 370);

	fill(253, 253, 241);
	ellipse(380, 415, 310, 340);

//bangs
	push();
	fill(132, 130, 91);
	rotate(PI*0.2);
	ellipse(500, -50, 130, 20);
	pop();

	push();
	fill(132, 130, 91);
	rotate(PI*0.8);
	ellipse(-130, -410, 110, 20);
	pop();

//eyes
	fill(254, 230, 0);
	ellipse(240, 365, 110, 44);
	ellipse(400, 365, 110, 44);
	fill(222);
	ellipse(240, 365, 12, 35);
	ellipse(400, 365, 12, 35);

//mouth
	strokeWeight(3);
	stroke(254, 230, 0);
	line(200, 520, 370, 520);
	strokeWeight(0);
	fill(254, 230, 0);
	ellipse(280, 517, 70, 12);
	ellipse(337, 517, 70, 12);

//blush
	fill(253, 233, 241);
	ellipse(285, 410, 80, 20);
	ellipse(420, 410, 80, 20);

// dimple
	ellipse(400, 520, 20, 20);

//eyebrows
	push();
	fill(254, 230, 0);
	rotate(PI*0.04);
	rect(260, 280, 70, 10, 10);
	pop();

	push();
	fill(254, 230, 0);
	rotate(-PI*0.04);
	rect(300, 360, 80, 10, 10);
	pop();

	push();
	fill(254, 230, 0);
	rotate(PI*0.08);
	rect(480, 195, 50, 10, 10);
	pop();

//ears
	fill(254, 245, 249);
	ellipse(560, 400, 50, 100);
	fill(253, 253, 241);
	ellipse(550, 400, 40, 60);

//big hair
	fill(254, 230, 0);
	ellipse(938, 515, 700, 700);

//eyelashes
	noFill();
	strokeWeight(3.5);
	stroke(118, 119, 111);
	arc(238, 363, 110, 44, 3.3, 6.2);
	arc(402, 363, 110, 44, 3.3, 6.2);
	line(185, 350, 182, 345);
	line(200, 345, 198, 340);
	line(214, 343, 214, 338);
	line(457, 357, 463, 352);
	line(445, 348, 450, 342);
	line(431, 344, 433, 339);

//earrring
	fill(154, 154, 114);
	ellipse(562, 440, 5, 5);

	}

I created a portrait of myself using mainly ellipses, beginning with a sketch on illustrator.

nahyunk1-Project – 01 – Face

nahyunsarah-selfportrait

function setup() {
    createCanvas(300, 300);
    background(29, 5, 5);
    fill(255, 230, 187);
    noStroke();
    ellipse(150, 130, 250, 265);
    fill(219, 112, 147);
    rect(100, 263, 101, 60);
    fill(255, 230, 187);
    rect(125, 260, 50, 100);
    triangle(150, 260, 0, 300, 300, 300);
    fill(29, 5, 5);
    triangle(300, 0, 150, 0, 300, 150);
    triangle(0, 0, 150, 0, 0, 150);
    fill(255, 255, 255);
    ellipse(100, 120, 50, 30);
    ellipse(200, 120, 50, 30);
    fill("black");
    ellipse(100, 120, 30, 30);
    ellipse(200, 120, 30, 30);
    fill(29, 5, 5);
    rect(70, 90, 60, 10);
    rect(170, 90, 60, 10);
    fill("255, 221, 201");
    triangle(150, 120, 130, 170, 150, 170);
    fill(119, 68, 38);
    ellipse(100, 120, 25, 25);
    ellipse(200, 120, 25, 25);
    fill("black")
    ellipse(100, 120, 20, 20);
    ellipse(200, 120, 20, 20);
    fill("red")
    arc(150, 205, 50, 50, 0, PI, CHORD);
    fill("blue");
    triangle(0, 300, 120, 268, 140, 300);
    triangle(300, 300, 180, 268, 190, 300);
    fill("white")
    triangle(0, 300, 110, 266, 120, 300);
    triangle(300, 300, 190, 268, 200, 300);
    fill("pink");
    triangle(0, 300, 100, 263, 100, 300);
    triangle(300, 300, 198, 263, 210, 300);
}

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

ssharada-project01-selfportrait

shariwa-self-portrait.js

//Shariwa Sharada
//Section A
//ssharada@andrew.cmu.edu
//Assignment-01

function setup() {
    
}

function draw() {

	createCanvas(600, 800);
    background(241, 242, 247);

    fill(100);
    noStroke();
    triangle(0, 0, 0, 700, 400, 0);

    fill(211, 221, 230);
    noStroke();
    triangle(0, 300, 600, 400, 600, 750);

    fill(193, 196, 203);
    noStroke();
    triangle(100, 800, 600, 0, 600, 300);

//nose
	noFill();
	stroke(136, 66, 66);
	strokeWeight(3);
	curve(200, 100, 500, 240, 510, 325, 200, 200);

//face
	fill(227, 201, 203);
	noStroke();
	arc(350, 310, 330, 330, PI/0.8, PI/3.0, CHORD);

//eye big
	fill(205, 162, 164);
	ellipse(450, 210, 110, 40);

//eye medium
	fill(193, 196, 203);
	ellipse(450, 210, 40, 40);

//eye small
	fill(77, 43, 50);
	ellipse(440, 210, 20, 15);

//dimple
	push();
	fill(207, 174, 176);
	noStroke();
	rotate(PI/0.1675);
	translate(-10, 50);
	ellipse(430, 325, 5, 30);
	pop();

//upper lip
	fill(170, 87, 91);
	noStroke();
	triangle(mouseX, mouseY, 530, 370, 520, 340);

//lower lip
	fill(194, 93, 97);
	triangle(mouseX, mouseY, 530, 375, 520, 390);

//rotated and scaled hair
	push()
	scale(0.75, 0.75);
	translate(700, 900);
	rotate(PI*3.0);
	noFill();
	stroke(159, 104, 107);
	strokeWeight(3);
	arc(350, 310, 450, 450, PI, PI/0.6);
	arc(350, 310, 325, 325, PI/1.5, PI/0.625);

	strokeWeight(6);
	arc(350, 310, 400, 400, PI/1.5, PI/0.9);

	strokeWeight(1.75);
	arc(350, 310, 350, 350, PI/1.4, PI/0.595);

	strokeWeight(2);
	arc(350, 310, 175, 175, PI/1.3, PI/0.7);

	strokeWeight(3.5);
	arc(350, 310, 200, 200, PI/1.7, PI/0.85);

	strokeWeight(2.5);
	arc(350, 310, 230, 230, PI/1.9, PI/0.95);

	strokeWeight(4);
	arc(350, 310, 250, 250, PI/1.5, PI/0.7);

	strokeWeight(2);
	arc(350, 310, 275, 275, PI/1.4, PI/0.65);

	stroke(214, 176, 178);
	strokeWeight(2.25);
	arc(350, 310, 375, 375, PI/1.35, PI/0.58);

	strokeWeight(3);
	arc(350, 310, 400, 400, PI/0.8, PI/0.6);

	strokeWeight(1);
	arc(350, 310, 150, 150, PI/1.7, PI/0.8);

	strokeWeight(3.5);
	arc(350, 310, 300, 300, PI/2, PI/0.675);

	strokeWeight(5);
	arc(350, 310, 420, 420, PI/0.9, PI/0.6);

	pop();

//smaller rotated and scaled hair
	push()
	scale(0.55, 0.55);
	translate(150, 875);
	noFill();
	stroke(193, 154, 157);
	strokeWeight(3);
	arc(350, 310, 450, 450, PI, PI/0.6);
	arc(350, 310, 325, 325, PI/1.5, PI/0.625);

	strokeWeight(6);
	arc(350, 310, 400, 400, PI/1.5, PI/0.9);

	strokeWeight(1.75);
	arc(350, 310, 350, 350, PI/1.4, PI/0.595);

	strokeWeight(2);
	arc(350, 310, 175, 175, PI/1.3, PI/0.7);

	strokeWeight(3.5);
	arc(350, 310, 200, 200, PI/1.7, PI/0.85);

	strokeWeight(2.5);
	arc(350, 310, 230, 230, PI/1.9, PI/0.95);

	strokeWeight(4);
	arc(350, 310, 250, 250, PI/1.5, PI/0.7);

	strokeWeight(2);
	arc(350, 310, 275, 275, PI/1.4, PI/0.65);

	stroke(227, 197, 198);
	strokeWeight(2.25);
	arc(350, 310, 375, 375, PI/1.35, PI/0.58);

	strokeWeight(3);
	arc(350, 310, 400, 400, PI/0.8, PI/0.6);

	strokeWeight(1);
	arc(350, 310, 150, 150, PI/1.7, PI/0.8);

	strokeWeight(3.5);
	arc(350, 310, 300, 300, PI/2, PI/0.675);

	strokeWeight(5);
	arc(350, 310, 420, 420, PI/0.9, PI/0.6);

	pop();

//even smaller rotated and scaled hair
	push()
	scale(0.5, 0.5);
	translate(825, 1750);
	rotate(PI*3.0);
	noFill();
	stroke(229, 198, 200);
	strokeWeight(3);
	arc(350, 310, 450, 450, PI, PI/0.6);
	arc(350, 310, 325, 325, PI/1.5, PI/0.625);

	strokeWeight(6);
	arc(350, 310, 400, 400, PI/1.5, PI/0.9);

	strokeWeight(1.75);
	arc(350, 310, 350, 350, PI/1.4, PI/0.595);

	strokeWeight(2);
	arc(350, 310, 175, 175, PI/1.3, PI/0.7);

	strokeWeight(3.5);
	arc(350, 310, 200, 200, PI/1.7, PI/0.85);

	strokeWeight(2.5);
	arc(350, 310, 230, 230, PI/1.9, PI/0.95);

	strokeWeight(4);
	arc(350, 310, 250, 250, PI/1.5, PI/0.7);

	strokeWeight(2);
	arc(350, 310, 275, 275, PI/1.4, PI/0.65);

	stroke(240, 222, 223);
	strokeWeight(2.25);
	arc(350, 310, 375, 375, PI/1.35, PI/0.58);

	strokeWeight(3);
	arc(350, 310, 400, 400, PI/0.8, PI/0.6);

	strokeWeight(1);
	arc(350, 310, 150, 150, PI/1.7, PI/0.8);

	strokeWeight(3.5);
	arc(350, 310, 300, 300, PI/2, PI/0.675);

	strokeWeight(5);
	arc(350, 310, 420, 420, PI/0.9, PI/0.6);

	pop();

//ear outside 
	fill(244, 225, 220);
	ellipse(310, 325, 30, 130);

//ear3
	fill(231, 211, 207);
	stroke(193, 196, 203);
	strokeWeight(1);
	arc(310, 325, 25, 90, PI*.4, PI*1.45, CHORD);

//ear2
	fill(214, 192, 186);
	stroke(156, 163, 179);
	strokeWeight(1);
	arc(310, 325, 20, 80, PI/3.0, PI, CHORD);

//hair
	noFill();
	stroke(127, 65, 68);
	strokeWeight(3.5);
	arc(350, 310, 200, 200, PI/1.7, PI/0.85);

	strokeWeight(2.5);
	arc(350, 310, 230, 230, PI/1.9, PI/0.95);

	strokeWeight(4);
	arc(350, 310, 250, 250, PI/1.5, PI/0.7);

	strokeWeight(2);
	arc(350, 310, 275, 275, PI/1.4, PI/0.65);

//earhole2
	fill(231, 204, 197 );
	noStroke();
	ellipse(310, 377, 7.5, 12.5);

//earhole1
	fill(218, 185, 177);
	noStroke();
	ellipse(310, 377, 2.5, 2.5);

//eyebrow1
	fill(137, 131, 131);
	noStroke();
	quad(450, 160, 440, 170, 490, 190, 500, 180)

//eyebrow2
	fill(137, 131, 131);
	noStroke();
	triangle(450, 160, 455, 170, 375, 190)

//hair
	noFill();
	stroke(127, 65, 68);
	strokeWeight(3);
	arc(350, 310, 450, 450, PI, PI/0.6);
	arc(350, 310, 325, 325, PI/1.5, PI/0.625);

	strokeWeight(6);
	arc(350, 310, 400, 400, PI/1.5, PI/0.9);

	strokeWeight(1.75);
	arc(350, 310, 350, 350, PI/1.4, PI/0.595);

	strokeWeight(2);
	arc(350, 310, 175, 175, PI/1.3, PI/0.7);

	stroke(187, 136, 138);
	strokeWeight(2.25);
	arc(350, 310, 375, 375, PI/1.35, PI/0.58);

	strokeWeight(3);
	arc(350, 310, 400, 400, PI/0.8, PI/0.6);

	strokeWeight(1);
	arc(350, 310, 150, 150, PI/1.7, PI/0.8);

	strokeWeight(3.5);
	arc(350, 310, 300, 300, PI/2, PI/0.675);

	strokeWeight(5);
	arc(350, 310, 420, 420, PI/0.9, PI/0.6);

//earring bottom
	fill(189, 138, 50);
	noStroke();
	ellipse(310, 420, 40, 40);

//earring top
	noFill();
	stroke(226, 171, 75);
	strokeWeight(1.5);
	ellipse(310, 390, 25, 25);

//lip mark 
	fill(226, 171, 75);
	ellipse(500, 330, 2.5, 2.5);


}


 

My self-portrait is a side view of my face. I used the arcs to make my hair which is long. I made the mouth interactive as my mouth is one of my most telling features.

ctv-project01-face

ctv-project-01-Face


function setup() {
    createCanvas(500, 500);
    background(255,211,155); //Burlywood 2
}


function draw() {
   
    //eyesCornea and iris
    fill(198,132,60);
    stroke(255);
    strokeWeight(30);
    fill(130,130,60);
    ellipse(334,166,100,100);
    ellipse(166,334,100,100);
    //eyesPupils
    fill(0);
    noStroke();
    ellipse(334,166,10,10);
    ellipse(166,334,10,10);
    
    //eyelids
     noFill();
    stroke(255,211,155);
    strokeWeight(75);
    //bezier(50, 400, 125, 125, 250, 320, 250, 250);
    //bezier(250, 250, 320, 250, 125, 125, 400, 50);
    
    //mouth
    noStroke();
    fill(255,0,0)
    triangle(400,500,450,500,450,450)
    fill(100,0,0);
    triangle(390,525,440,525,440,475)
    //hair
    fill(218,152,80); //use this RGB as highlights & darker for fill
    strokeWeight(0);
    triangle(0,0,0,290,290,0);
    //hairLines
    strokeWeight(2);
    stroke(198,132,60);
    line(0,250,25,275);
    line(0,200,50,250);
    line(0,150,75,225);
    line(0,100,100,200);
    line(0,50,125,175);
    line(0,0,150,150);
    line(0,250,175,125);
    line(0,200,200,100);
    line(0,150,225,75);
    line(0,100,250,50);
    line(0,50,275,25);
    line(0,0,300,0);


    
    
    
    noFill();
    stroke(0, 0, 0);
    strokeWeight(25);
    bezier(350, 450, 450, 350, 90, 90, 15, 80);
    

    
}

This face started with quick sketches in my sketchbook. I used the grid on the page to approximate the points I would use in the program. Once I had access to a computer, I was able to quickly write the code!

rmanagad-project01-face

robert-face

//Robert Managad
//Section E
//rmanagad@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(625, 625);
    background(255);
    noStroke();
    fill(255, 206, 109);
    ellipse(314, 306, 515, 515);
    angleMode(DEGREES);
}

function draw() {
//lower layer of cloud. I used both full shapes and shapes-as-masks to construct this.
    var a = color(179,188,206);
	noStroke();
	fill(a);
		ellipse(435, 411.35, 94.26, 94.26);
	noStroke();
	fill(a);
		ellipse(228.92, 332.11, 123.5, 103.96);
	noStroke();
	fill(a);
		rect(163.86, 342.85, 236.38, 104.88);
	noStroke();
	fill(a);
		ellipse(168.93, 389.92, 115.62, 115.62);
	noStroke();
	fill(199, 208, 229);
		ellipse(306.5, 244.75, 259.14, 259.14);
//middle layers with cloud covering shirt.
push()
	translate(75, 75)
	rotate(30.8);
	noStroke();
	fill(122, 123, 131);
		rect(405, 51, 102.73, 118.65); //rotation was confusing to implement -- I attempted rectMode (CENTER) and translate commands to modify the pivot point so that it would rotate around the center, but I wasn't able to do that successfully. The rectangle did not rotate about its center.
pop()
	rotate(0);
	translate(0, 0);
	noStroke();
	fill(a);
		ellipse(362.94, 453.78, 121.21, 77.13);
	noStroke();
	fill(255, 206, 109);
		rect(295.69, 458.81, 163.93, 33.54);
//start of face creation
	noStroke();
	fill(226, 231, 244);
		ellipse(436.42, 264.79, 171.31, 144.54); //head
	noStroke();
	fill(0);
		ellipse(485.83, 259.56, 9.35, 16.90); //pupil
	noStroke();
	fill(255, 210, 63);
		ellipse(473.97, 290.75, 18.71, 18.71); //cheek blush
	noStroke();
	fill(226, 231, 244);
		triangle(493.36, 278.08, 510.58, 244.54, 527.8, 278.08); //nose
	noStroke();
	fill(156, 161, 175);
		ellipse(345.88, 218.31, 59.89, 66.74);//hairbun
	noStroke();
	fill(0);
		rect(500.84, 300.10, 9.11, 1.77);//lips	
//headphones	
	noStroke();
	fill(255);
		ellipse(420.11, 268.63, 48.13, 48.13);
	noStroke();
	fill(255, 210, 63);
		ellipse(420.11, 267.57, 32.48, 32.57);
	noStroke();
	fill(227, 188, 57);
		rect(412.85, 201.81, 14.52, 62.11);
	noStroke();
	fill(227, 188, 57);
		ellipse(420.11, 267.87, 19.70, 19.75);
	noStroke();
	fill(227, 188, 57);
		ellipse(418, 195.66, 27.61, 23.94);
//top layer of cloud
	noStroke();
	fill(a);
		rect(249.83, 440.95, 68.83, 18.18);
	noStroke();
	fill(255, 206, 109);
		ellipse(249.83, 463.26, 31.06, 31.06);
	noStroke();
	fill(a);
		ellipse(325.52, 453.45, 123.5, 69.75);
	noStroke();
	fill(a);
		ellipse(354.88, 405.06, 46.62, 46.62);
}
		

 

In developing my self-portrait, I started with exploring simplifications of face parts (sketch — top left) and media themes (bottom-left). I found myself listening to tracks on SoundCloud while doing this which formed the basis of my portrait (“clouds and music”, sketch — bottom right). Before working in p5js, I created a version of my sketch on illustrator to finalize the coordinates and sizes of my elements, then tracked the layering of elements to make sure I could follow it sequentially when I would write the code as seen below.

I’m satisfied with the composition and color arrangement of my portrait, however I would like to be able to make forms that use less elements — I ran over the 10-graphic-element guideline in developing masks and curves for objects in the portrait.

 

Project-01-Face

swarstad_face

function setup(){
    createCanvas(495,495);
    background(255,224,189);
    fill(255);
    rect(33,99,165,165);
    rect(297,99,165,165);
    noStroke();
    fill(66,33,11);
    rect(66,132,99,99);
    rect(330,132,99,99);
    fill(0);
    rect(33,33,165,33);
    rect(297,33,165,33);
    rect(99,165,33,33);
    rect(363,165,33,33);
    rect(231,264,33,33);
    rect(198,297,99,33);
    fill(255,0,0);
    rect(99,396,297,33);
    

}

function draw() {

}








I wanted to create an extremely simplified, pixelated self portrait. I created it first in illustrator and then placed into photoshop to easily see the placement of each shape.

BrandonHyun-Project-01-Face

project-01-face

//Brandon Hyun
//15104 section #1
//bhyun1@andrew.cmu.edu
//Project-01-Face

function setup() {
    createCanvas(600, 600);
    rect(0,0,600,600);
    background(26,90,143);
    noStroke();
//rectangularface
    fill(248, 173, 133);
    rect (100,100,400,400);
//hair
fill(99,67,57);
rect(100,100,400,100);
//whitetriangle on the left
fill(99,67,57);
    beginShape();
vertex(100,100);
vertex(50,100);
vertex(100,200);
endShape(CLOSE);
//blacktriangle on the right
fill(26,90,143)
  beginShape();
vertex(450,100);
vertex(500,100);
vertex(550,200);
endShape(CLOSE);
//black triangle on the bottomleft
fill(26,90,143)
  beginShape();
vertex(100,450);
vertex(100,500);
vertex(200,550);
endShape(CLOSE);
//backhair
fill(99,67,57);
beginShape();
vertex(500,200);
vertex(450,200);
vertex(500,300);
endShape(CLOSE);
//glasses
fill(99,67,57);
ellipse(200,300,100,100);
fill(99,67,57);
ellipse(350,300,100,100);
//whitecirclesin glasses
fill(255,255,255);
ellipse(200,300,75,75);
fill(255,255,255);
ellipse(350,300,75,75);
//connectingbridge for glass
fill(99,67,57);
rect(240,280,65,15);
//eyes
fill(0,0,0);
ellipse(200,300,20,20);
ellipse(350,300,20,20);
//mouth
rect(250,400,75,15);
}

function draw() {
}

I really enjoyed making this portrait out of a software that I was never familiar with. It was quite challenging and confusing in the beginning but as I got further with it, I felt I was doing something that was really cool. I am very happy with what I have done and I hope I can do something greater with this.