Category: Project Week 1

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.

thlai-portrait

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

amui1-project01-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);
    //head
    //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

sketch

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

egrady – project1 – face

sketch

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)   

    //head
    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

 

sketch.js

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

haewanp_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

sketch

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);

	//head
	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).

Initial Sketch made on Illustrator

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.

 

sketch

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)

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

sketch

//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);
//head
  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);


}