Janet Peng Project 01 – Face

jjpeng assignment 1

var verCenter = 300

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

function draw() {
	// background
	// bush
	fill(86, 137, 124);
	stroke(86, 137, 124);
	ellipse(280, 390, 380, 250)
	ellipse(80, 390, 200, 150)
	ellipse(450, 400, 200, 200)

	// ground
	fill(73, 104, 96);
	stroke(73, 104, 96);
	rect(0, 400, 500, 100);

	// hair (behind)
	fill(51, 119, 135);
	stroke(51, 119, 135);
	ellipse(253, 230, 70, 90);

	// legs
	fill(51, 119, 135);
	stroke(51, 119, 135);
	quad(190, 340, 250, 340, 240, 430, 185, 430);
	quad(245, 340, 310, 340, 315, 430, 260, 430);

	// arms
	push();
	fill(174, 214, 175);
	stroke(174, 214, 175);
	translate(300, 290);
	rotate(radians(-32));
	ellipse(0, 0, 40, 90);
	pop();

	push();
	fill(174, 214, 175);
	stroke(174, 214, 175);
	translate(200, 290);
	rotate(radians(32));
	ellipse(0, 0, 40, 90);
	pop();

	// body
	fill(86, 178, 156);
	stroke(86, 178, 156);
	arc(250, 330, 120, 175, PI, 0);

	push();
	fill(86, 178, 156);
	stroke(86, 178, 156);
	translate(220, 330)
	rotate(radians(20))
	ellipse(0, 0, 60, 70);
	pop();

	push();
	fill(86, 178, 156);
	stroke(86, 178, 156);
	translate(278, 330)
	rotate(radians(-5))
	ellipse(0, 0, 65, 75);
	pop();

	push();
	fill(86, 178, 156);
	stroke(86, 178, 156);
	translate(250, 345)
	rotate(radians(15))
	ellipse(0, 0, 40, 20);
	pop();

	// head
	fill(174, 214, 175);
	stroke(174, 214, 175);
	ellipse(250, 200, 80, 90);
	ellipse(250, 240, 30, 30);

	// hair (top)
	push();
	fill(51, 119, 135);
	stroke(51, 119, 135);
	translate(227, 170)
	rotate(radians(-45))
	ellipse(0, 0, 50, 25);
	pop();

	push();
	fill(51, 119, 135);
	stroke(51, 119, 135);
	translate(268, 175)
	rotate(radians(50))
	ellipse(0, 0, 55, 35);
	pop();

	fill(51, 119, 135);
	stroke(51, 119, 135);
	ellipse(248, 158, 45, 20);

	fill(51, 119, 135);
	stroke(51, 119, 135);
	ellipse(282, 198, 20, 45);

	// glasses
	fill(174, 214, 175);
	stroke(65);
	rect(212, 198, 20, 15);
	rect(248, 198, 20, 15);
	line(232, 203, 248, 203);

	// eyes
	fill(65);
	stroke(65);
	ellipse(218, 205, 5, 5);
	ellipse(255, 205, 5, 5);

	// eyebrows
	fill(65);
	stroke(65);
	triangle(220, 200, 215, 201, 223, 201);
	triangle(257, 200, 252, 201, 260, 201);

	// mouth
	fill(174, 214, 175);
	stroke(65);
	arc(240, 220, 10, 5, 0, 2, OPEN);
}

Ammar Hassonjee – Project 01 – Face

ammars-portrait

// Ammar Hassonjee
// Section C
// ahassonj@andrew.cmu.edu
// Project-01

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

function draw() {
  //Drawing my shirt
    stroke('navy');
    fill('navy');
    if (mouseX < width / 2) {
        fill('black');
    }
    arc(300, 600, 500, 275, PI, 0);

    //Making the neck
    stroke('rgb(205, 161, 132)');
    fill('rgb(205, 161, 132)');
    quad(217, 470, 244, 400, 348, 400, 374, 470);
    ellipse(295, 470, 155, 60);

    //Forming the head
    stroke('rgb(215, 165, 132)');
    fill('rgb(215, 165, 132)');
    ellipse(300, 280, 250, 300);

    //Creating the Hair
    stroke('black');
    fill('black');
    beginShape()
    vertex(186, 215);
    vertex(198, 153);
    vertex(201, 161);
    vertex(242, 107);
    vertex(242, 127);
    vertex(313, 90);
    vertex(303, 111);
    vertex(377, 100);
    vertex(351, 117);
    vertex(427, 118);
    vertex(406, 140);
    vertex(452, 126);
    vertex(439, 157);
    vertex(461, 156);
    vertex(444, 185);
    vertex(454, 187);
    vertex(414, 215);
    endShape();

    //forming the ears
    stroke('rgb(215, 165, 132)');
    fill('rgb(215, 165, 132)');
    beginShape();
    vertex(180, 258);
    vertex(161, 260);
    vertex(151, 267);
    vertex(165, 326);
    vertex(180, 326);
    endShape();

    beginShape();
    vertex(419, 258);
    vertex(437, 260);
    vertex(447, 267);
    vertex(433, 326);
    vertex(326, 326);
    endShape();

    //creating the eyes
    noStroke();
    fill('white');
    ellipse(256, 266, 40, 30);
    ellipse(346, 266, 40, 30);

    noStroke();
    fill('rgb(132, 100, 80)');
    if (mouseIsPressed) {
      fill('rgb(220, 5, 5)');
    }
    ellipse(256, 266, 20, 20);
    ellipse(346, 266, 20, 20);

    noStroke();
    fill('white')
    ellipse(250, 263, 5, 5);
    ellipse(340, 263, 5, 5);

    //shaping the mouth
    stroke('rgb(229, 229, 229)');
    fill('rgb(229, 229, 229)');
    triangle(263, 377, 300, 388, 338, 377);

    // forming the nose
    stroke(132, 100, 80);
    strokeWeight(2);
    line(300, 281, 314, 338);
    line(314, 338, 318, 345);
    line(318, 345, 304, 350);

    //eyebrows
    noStroke();
    fill('black');
    triangle(226, 239, 277, 241, 278, 235);
    triangle(324, 242, 324, 236, 375, 238);
}

My process for completing this portrait began with experimenting with the different functions of ps.j5 and learning how the variables controlled shapes like ellipses and curves. I then began to digitally sketch the kind of drawing I wanted and then used the same coordinates in other softwares to code accurate shapes.