Month: September 2017

eeryan-Project 1 self portrait

sketch

function setup() {
    createCanvas(500, 600);
    background(247,187,31);
}

function draw() {
    //hair
    strokeWeight(0);
    fill(137,60,29);
    ellipse(240,280,300,300)
    strokeWeight(0);
    fill(137,60,29);
    ellipse(185,350,290,310);
    strokeWeight(0);
    fill(137,60,29);
    ellipse(300,360,280,270);
    //face
    strokeWeight(0);
    fill(234,179,125);
    ellipse(250,300,250,260);
    //body
    strokeWeight(0);
    fill(141,214,239);
    ellipse(230,580,355,240);
    //cheeks
    strokeWeight(0);
    fill(250,178,125);
    ellipse(187,305,75,75);
    strokeWeight(0);
    fill(250,178,125);
    ellipse(328,305,75,75);
    //eyes
    strokeWeight(0);
    fill(137,60,29);
    ellipse(220,273,20,15);
    strokeWeight(0);
    fill(137,60,29);
    ellipse(308,273,20,15);
    //nose
    strokeWeight(0);
    fill(244,151,89);
    rect(258,265,23,80);
    //mouth
    stroke(234,125,92);
    strokeWeight(5);
    noFill();
    line(230,370,290,370);
}

Process:

I started by mocking up my self portrait in Illustrator, to figure out the shapes and colors that would work best for this assignment. I found it easier to rough it out in Illustrator and in my sketchbook as opposed to diving in with code without first planning out how I wanted it to look. After I figured out the way I generally wanted it to look in Illustrator, I used the ruler function to find the x and y coordinates for each shape to insert into my code. Once I had coded everything to the exact coordinates that I had in Illustrator, I further tweaked some of the facial elements to get everything the way I wanted. I messed around with adding colored strokes to certain elements, as well as adding a neck, but decided in the end to keep to simple, rounded shapes to unify the composition.

JackieChou-project 01-face

sketch 2

//Jackie Chou
//Section E
//jwchou@andrew.cmu.edu
//Project-01
function setup() {
    createCanvas(600, 585);
    background(251,220,13);
    text("p5.js vers 0.5.12 test.", 10, 15);
}

function draw() {
	

	//neck
	noStroke();
	fill(211,166,161);
	rect(255,400,90,100);

	//head
	fill(224,195,200);
	ellipse(300,300,200,240);

	//hat
	fill(60);
	arc(300,240,170,150,PI,0);
	fill(0);
	ellipse(300,160,20,20);

	//face shape
	fill(251,220,13);
	quad(200,300,250,430,200,400,200,300);
	quad(400,300,350,430,400,400,400,300);

	//ears
	fill(224,195,200);
	ellipse(210,290,50,60);
	ellipse(390,290,50,60);

	//mask
	fill(20);
	rect(210,255,179,65);

	//masksides
	arc(210,287,33,64,HALF_PI,PI+HALF_PI);
	arc(389,287,33,64,PI+HALF_PI,HALF_PI);

	//maskholes
	fill(211,166,161);
	ellipse(263,283,45,35);
	ellipse(343,283,45,35);

	//maskholes
	fill(224,195,200);
	ellipse(258,283,45,35);
	ellipse(338,283,45,35);

	//eyes
	fill(245);
	ellipse(259,281,30,15);
	ellipse(341,281,30,15);
	fill(3);
	ellipse(252,281,10,10);
	ellipse(334,281,10,10);

	//mouth2
	stroke(173,140,137);
	strokeWeight(5);
	line(270,370,330,370);

	//nose
	noStroke();
	fill(211,166,161);
	arc(300,337,30,10,0,PI);


	//nose
    noFill();
	strokeWeight(3);
	stroke(136,104,101);
	noStroke();
	beginShape();
	curveVertex(300,290);
	curveVertex(297,290);
	curveVertex(315,320);
	curveVertex(292,322);
	curveVertex(293,310);
	endShape();
	noStroke();

	//shirt
	fill(50);
	ellipse(300,584,370,270);
	noFill();
	beginShape();
	vertex(70,600);
	vertex(150,515);
	vertex(255,475);
	vertex(345,475);
	vertex(450,515);
	vertex(530,600);
	endShape(CLOSE);

	//shirt-stripes
	fill(210);
	rect(170,500,260,10);
	rect(145,530,300,10);
	rect(135,560,330,10);



}

Robber, 2017
Digital self portrait.
Javascript.

For this project, I went through multiple iterations and phases. The toughest part was learning first how to utilize the different commands to create the shapes I wanted to use. Also, I didn’t learn how to organize my code until late in the process, which made managing my code harder. However, I picked everything up fairly quickly.

I also experimented and iterated how I wanted to represent my nose and my mouth.

I first went from a generic self portrait:

To a robber (I don’t know why, but I felt that it represented me).