Month: August 2017

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