Category: Project Week 1

sketch
It was a good and fun exercise to simply use basic shapes to build an interpretation of myself

function setup() {
    createCanvas(600,600);
    var backgrd = color(153,25,120)
    background(backgrd);
}

function draw() {
	var x_mid = 200;
	var y_mid = 200;
	var skin_c = color(255,201,167);
	var white = color(255,255,255);
	var black = color(0,0,0);
	var gold = color(212,175,55);
	var pink = color(242,120,130);
	var red = color(248,23,17);
	var maroon = color(181,3,0);
	stroke(0);
	strokeWeight(0);
	fill(black);
	rect(140,80,320,120,0,30,0,0);
	rect(140,30,120,50,50,0,0,0);
	triangle(260,30,260,90,455,90);
	strokeWeight(8);
	fill(red);
	rect(110,450,380,300,50,50,0,0);
	noStroke();
	fill(maroon);
	rect(300,453,187,300,0,50,0,0);
	stroke(0);
	//arc(300,235, 350,350, PI, 0, OPEN);
	fill(skin_c);
	ellipse(300,300,370,400);
	noFill();
	fill(white);
	ellipse(230,250,80,40);
	ellipse(370,250,80,40);
	noFill();
	ellipse(230,250,100,100);
	ellipse(370,250,100,100);
	fill(black);
	ellipse(210,255,10,10);
	ellipse(345,256,10,10);
	rect(280,250,40,3);
	noFill();
	arc(300,320, 40, 40, 0, PI+QUARTER_PI, OPEN);
	fill(pink);
	rect(230,370,140,90,0,0,40,80);
	fill(black);
	quad(180, 210, 185, 190, 250, 160, 258, 180);
	quad(350, 180, 358, 160, 420, 190, 425, 210);
	noStroke();
	triangle(250,100,350,100,300,140);
	rect(300,100,120,40);
	noFill();
	/*strokeWeight(12);
	rect(160,200,130,100, 0, 0, 18,18);
	rect(310,200,130,100, 0, 0, 18,18);
	stroke(gold);
	strokeWeight(10);
	arc(300,220,25,25,-2.4,-0.8);*/

}

selfportrait

function setup() {
    createCanvas(600,600);
    background(122,231,199);
}

function draw() {
    fill(207,152,147);//hair
    noStroke();
    ellipse(300,160,100);
    ellipse(300,290,250,250);
    fill(248,229,238);//face + neck
    noStroke();
    rect(275,435,50,60);
    ellipse(300, 300,240,250);
    fill(255,107,107);//glasses
    rect(330,270,60,50,10,10,10,10);
    rect(220,270,60,50,10,10,10,10);
    rect(170,290,260,10); 
    fill(248,229,238);
    rect(334,274,52,42,10,10,10,10);
    rect(224,274,52,42,10,10,10,10);
    fill(39,45,51);//eyeballs
    ellipse(360,300,25);
    ellipse(250,300,25);
    rect(270,370,60,5);//mouth
    fill(255,107,107);//tongue
    rect(290,375,20,30);
    ellipse(300,402,20);
    fill(39,45,51);
    rect(298,375,5,22);
    fill(78,205,196);//nose
    triangle(300,340,305,300,310,340);
    fill(207,152,147);//eyebrows
    rect(328,250,60,10);
    rect(218,250,60,10);
    fill(254,254,254);//glasses shine
    triangle(375,270,380,255,385,270);
    triangle(375,270,380,285,385,270);
    fill(58,190,255);//shirt
    noStroke();
    rect(245,505,110,10);
    rect(235,520,130,10);
    rect(225,535,150,10);
    rect(215,550,170,10);
    rect(205,565,190,10);
    rect(195,580,210,10);
    rect(185,595,230,10);
}

This project ended up taking a lot longer than I thought it would, primarily because I had to think in coordinates and simple shapes, rather than just drawing like I’m used to. I enjoyed it though, and I’m pretty pleased with the product. It forced me to draw in a simple, yet crisp, style that I’d never bothered to try. I might use this piece as an icon in the future.

sketch

//Serina Liu
//Section C
//serinal@andrew.cmu.edu
//Project-01
function setup() {
    createCanvas(600, 700);
    background(165, 203, 250);
    }

function draw() {

    strokeWeight(0)
    fill(107, 156, 185)
    rect (0, 605, 600, 80);

    strokeWeight(0)
    fill(107, 156, 185)
    rect (0, 500, 600, 80);

    strokeWeight(0)
    fill(107, 156, 185)
    rect (0, 390, 600, 80);

    strokeWeight(0)
    fill(107, 156, 185)
    rect (0, 280, 600, 80);
   
    strokeWeight (0) //hair upper
    fill (0 , 0 , 0)
    ellipse (300, 300, 420, 420);

    strokeWeight (0) //hair lower
    fill (0, 0, 0)
    rect (91, 300, 419, 290);

    strokeWeight (0) //head
    fill (255, 195, 170)
    ellipse (300, 300, 360, 360);

    strokeWeight (0) //nose
    fill (197, 151, 131)
    rect (290, 270, 10, 85);

    strokeWeight (0) //eye1
    fill (0, 0, 0)
    ellipse (220, 300, 30, 30);

    strokeWeight (0) //eye2
    fill (0, 0, 0)
    ellipse (370, 300, 30, 30);

    strokeWeight (0) //smile
    fill (256, 256, 256)
    arc (297, 389 , 80, 80, 0, PI, CHORD);

    strokeWeight (0) //smile interior mouth
    fill (0, 0, 0)
    arc (297, 395 , 80, 70, 0, PI, CHORD);

    strokeWeight (4) //glasses1
    fill (256, 256, 0, 20)
    ellipse (370, 300, 100, 100);

    strokeWeight (4) //glasses2
    fill (256, 256, 0, 20)
    ellipse (220, 300, 100, 100);

    strokeWeight (0)
    fill (0, 0, 0)
    rect (420, 300, 90, 10);

    strokeWeight (0)
    fill (0, 0, 0)
    rect (110, 300, 60, 10);

    strokeWeight (0)
    fill (0, 0, 0)
    rect (269, 300, 50, 10);

    strokeWeight (0)
    fill (255, 195, 170)
    rect (260, 470, 80, 60);

    strokeWeight (0)
    fill (255, 195, 170)
    ellipse (300, 670, 300, 300);

    strokeWeight (0)
    fill (153, 16, 21)
    ellipse (300, 690, 350, 350);

    strokeWeight (0)
    fill (255, 195, 170)
    arc (300, 514, 80, 80, 0, PI, CHORD);

    strokeWeight (0)
    fill (256, 256, 256)
    ellipse (375, 300, 20, 20);

    strokeWeight (0)
    fill (256, 256, 256)
    ellipse (225, 300, 20, 20);

    strokeWeight (5)
    noFill();
    arc(220, 315, 60, 60, HALF_PI+HALF_PI, PI);

    strokeWeight (5)
    noFill();
    arc(370, 315, 60, 60, HALF_PI+HALF_PI, PI);

    strokeWeight (0)
    fill (0, 0, 0)
    rect (187, 314, 65, 5);

    strokeWeight (0)
    fill (0, 0, 0)
    rect (338, 314, 65, 5);

    strokeWeight (0)
    fill (197, 151, 131) 
    triangle(276, 360, 295, 310, 313, 360);

    stroke(0,0,0)
    strokeWeight(3);
    fill(0);
    arc(220, 246, 60, 15, PI, TWO_PI);

    stroke(0,0,0)
    strokeWeight(3);
    fill(0);
    arc(372, 246, 60, 15, PI, TWO_PI);
    }

I have never coded before this class, so it took my some getting use to. The practice with the Mondrian definitely helped and made me a lot more comfortable with working with rectangular shapes. The arcs and the triangles took me a little time to figure out, but after Wednesday’s class, there was a nice guideline on the p5js site that ended up proving to be really really helpful. I think it turned out pretty well for a first attempt and I am looking forward to learning more ways to manipulate it/make it more detailed.

sketch

//Sun Min (Chloe) Kim 
//Section E
//sunmink@andrew.cmu.edu
//Project-01

function setup() {
    createCanvas(500, 500);
    background(217, 212, 235);
    angleMode(DEGREES);
    smooth(); 
}

function draw() {

    //background strip 
    noStroke();
    fill(210, 200, 300);
    rect(0, 100, 500, 100);
    rect(0, 300, 500, 100);

    //hair(back)
    noStroke();
    fill(64, 60, 58); 
    ellipse(300, 200, 200, 220);
    rect(200, 200, 200, 220); 

    //face 
    fill(247, 193, 155); 
    stroke(205, 149, 111);
    strokeWeight(3);
    ellipse(300, 210, 150, 160);

    //eye 
    noStroke(); 
    fill(255,255,255); 
    ellipse(270, 200, 30, 20);
    ellipse(330, 200, 30, 20);

    //nose
    noStroke(); 
    fill(211, 153, 114);
    triangle(300, 200, 315, 235, 300, 230);

    //mouth
    fill(2250, 210, 195);
    stroke(220, 130, 130);
    strokeWeight(3);
    arc(300, 245, 60, 40, 0, 180, CHORD);

    //eyebrow
    stroke(64, 60, 58);
    strokeWeight(5);
    line(250, 180, 285, 180);
    line(310, 180, 345, 180);

    //pupil
    fill(64, 60, 58); 
    ellipse(270, 200, 12, 12);
    ellipse(330, 200, 12, 12);

    //neck
    fill(247, 193, 155);
    noStroke();
    rect(280, 280, 40, 30);

    //shoulder 
    noStroke(); 
    fill(75, 70, 175);
    ellipse(300, 385, 160, 160);
    rect(220, 380, 160, 220);

    //hair(front)
    fill(64, 60, 58); 
    arc(250, 140, 90, 100, -50, 130, CHORD);


}



    

After completing Mondrian assignment, I became more familiar with p5js. Since I don’t have any experience in coding, it took me a while getting used to its language. Mondrian assignment helped me to get comfortable with rectangular shapes, but when I tried to create arcs and triangles for self-portrait it took me longer than I thought to create the codes. However, p5js guidelines helped me to learn ways to build various shapes, and I would like to find out more about adding advanced codes into my sketch.

When first given the assignment to code a self portrait, my immediate thought was to create a portrait that was as realistic as possible. However, given my very little knowledge of coding, I soon found that that wouldn’t be possible. So I then turned to a more graphic, animated concept. Instead of creating a foreground and background portrait, I decided to use the entire canvas to illustrate my face. Once figuring out the placement of my face and hair, it was quick and easy to place and “draw” the rest of my facial features.

sketch

function setup() {
    createCanvas(600, 500);
    background(54, 37, 29);

  }

function draw() {
	noStroke();
	
	//face
	fill(250, 209, 178);
	rectMode(CENTER);
	rect(300, 450, 400, 600, 100);

	//hair
	fill(54, 37, 29);
	ellipseMode(CENTER);
	ellipse(500, 70, 600, 500);
	ellipse(100, 10, 300, 600);

	//eyes
	stroke(255);
	strokeWeight(3);
	fill(65, 56, 23);
	ellipseMode(CENTER);
	ellipse(200, 350, 40, 40);
	ellipse(400, 350, 40, 40);
	noStroke();
	fill(255);
	ellipse(190, 340, 10, 10);
	ellipse(390, 340, 10, 10);

	//mouth
	fill(0);
	arc(300, 425, 150, 100, 0, PI);
	fill(255);
	ellipseMode(CENTER);
	ellipse(300, 425, 150, 25);
	fill(250, 209, 178);
	rect(300, 400, 200, 50);

	//nose
	fill(233, 194, 164);
	arc(300, 395, 45, 20, 0, PI);

}

merlebac Project-01

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-01

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

    fill(1);
    quad(110, 320, 160, 160, 300, 110, 300, 350);
    // Left hair quad (1)

    fill(1);
    quad(490, 320, 440, 160, 300, 110, 300, 350);
    // Right hair quad (2)

    fill(200, 140, 45);
    triangle(160, 275, 160, 350, 100, 260);
    // Triangle left ear (3)

    fill(200, 140, 45);
    triangle(440, 275, 440, 350, 500, 260);
    // Triangle right ear (4)

    fill(255, 130, 65);
    ellipse(300, 300, 300, 300);
    // Face ellipse (5)

    fill(256);
    ellipse(235, 235, 50, 50);
    // Left eye ellipse (6)

    fill(256);
    ellipse(365, 235, 50, 50);
    // Right eye ellipse (7)

    fill(190, 130, 45);
    ellipse(235, 235, 25, 25);
    // Left pupil ellipse (8)

    fill(190, 130, 45);
    ellipse(365, 235, 25, 25);
    // Right pupil ellipse (9)

    noStroke();
    fill(255, 0, 0);
    rect(225, 375, 150, 20);
    // Lip rect (10)

    fill(200, 140, 45);
    triangle(275, 325, 300, 275, 325, 325);
    // Triangle nose (11)


}

I feel that I did a decent job at making primitives resemble a face. I tried to make everything overlap in order to make it look more organic. I also attempted to use different colors in order to give the image some variety.

This process presented a great combination of practicing code and also distilling my conception of myself down into units basic enough for me to code. Product-wise, I am happy with the elements I chose to focus on: my eyes, my thoughts about my place in the world, my thoughts about other forces in the world (move your mouse around to play with that). But I know a greater facility with how to determine coordinates, especially in service of making triangles and quads, would have given me more precision with final my choices.

Rachel Karp Self-Portrait

function setup() {
    createCanvas(400, 400);
    background(125);
}

function draw() {

    //face
    fill(227,255,207);
    noStroke();
    ellipse(320, 270, 190, 300);

    //left eye
    fill(0, 178, 255);
    stroke(125);
    ellipse(270, 253, 50, 34);

    //right eye
    fill(0, 178, 255);
    stroke(255);
    ellipse(350, 250, 50, 40);

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

    //right pupil
    fill(0);
    ellipse(360, 262, 10, 10);

    //eyebrow
    stroke(0);
    line(300, 220, 250, 210);

    //nose
    fill(125);
    stroke(255);
    triangle(290, 320, 310, 260, 330, 310);

    //mouth
    fill(125);
    rect(290, 340, 40, 20);

    //mouth partition
    stroke(0);
    line(280, 352, 344, 352);

    //the Other
    fill(227,255,207);
    noStroke();
    quad(0, 31, 200, 150, mouseX, mouseY, 0, 76);

}

sketch

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

function draw() {
    background(255);
 //hair   
    fill(0, 0, 0);
    ellipse(300, 400, 450, 700);
//face
    fill(237,221,105);
    ellipse(300, 350, 300, 400);

//eyes
    fill(0, 0, 0);
    ellipse(245, 300, 60, 40);
//eyes
    fill(0, 0, 0);
    ellipse(355, 300, 60, 40);
//eye rectangle
    strokeWeight(0)
    fill (237,221,105)
    rect(210,300, 70, 40);
//eye rectangle
    fill (237,221,105)
    rect(320, 300, 70, 40);
//mouth
    fill(226,43,42);
    ellipse(300, 450, 120, 120);
//mouthtongue
    fill(250, 80, 80);
    ellipse(300, 450, 100, 50);

//mouth rectangle
    strokeWeight(0)
    fill (237,221,105)
    rect(240,390, 125, 50);

//nose
    fill(0, 0, 0);
    ellipse(300, 350, 60, 40); 

    noLoop();
}

 

I went through a couple of sketches before ending up with my final draft. Originally I had only black and white shapes to create the foundation and finally added some color. I also enjoyed using more than one shape to create a single shape (i.e. the mouth and eyes are actually combinations of rectangles and ellipses and circles).