Considering this is the first time I code, I’m pretty happy about the result I created.

Here is the self-portrait I drew:

 

http://alpha.editor.p5js.org/embed/ByBkMFx9Z

 

Since the free version WordPress is super crappy won’t let embed alpha.editor and I am super stingy won’t pay for its upgrade services, I am gonna post all the code here….

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

function draw() {
background(255);

//hair
noStroke()
fill(64,51,38);
arc(250,245,270,420, QUARTER_PI+HALF_PI,QUARTER_PI);

 //face
noStroke();
fill(247,221,212);
ellipse(250,200,190,200);

//check
noStroke();
fill(255, 184, 194);
ellipse(200,230,30,20);
ellipse(300,230,30,20);

//bang
noStroke();
fill(64,51,38);
arc(250,130,160,80, Math.PI, 0);
arc(180,120,140,128, 0, 0.75*Math.PI);
arc(320,120,140,128, 0.25*Math.PI, Math.PI);

//eyes
stroke(128, 128, 128);
fill(255);
ellipse(209, 200, 35, 35);
ellipse(291, 200, 35, 35);

//eyeballs
stroke(128, 128, 128);
fill(102,102,51);
ellipse(209, 200, 18, 18);
ellipse(291, 200, 18, 18);

//Nose
noStroke();
fill(247,221,155);
triangle(250, 220, 260, 250, 240, 250);

//Mouth
noStroke();
fill(255, 169, 168);
ellipse(250,270,12,12);

//Shoulders
noStroke();
fill(247,221,212);
rect(165,315,170,132,18);

//TSHIRT
noStroke();
fill(102,21,173);
rect(190,310,120,140,8);

//Neck
noStroke();
fill(247,221,212);
arc(250,310,40,40,0,PI);
rect(230,280,40,30);

//ITP
fill(255, 255, 255);
text(“!TP”,225,350,150,120);
textSize(36)

}

For me, the hardest part of this self-portrait is the hair part. Firstly, I used the arc() to create an dark brown oval as back head hair and I put it on the last layer. Then used two small arc() to create my middle parted fringe.

I checked library about arc() method and got two different ways to define the start/end point of circle: here and here.

So I tried both of them.

//bang
noStroke();
fill(64,51,38);
arc(250,130,160,80, Math.PI, 0);
arc(180,120,140,128, 0, 0.75*Math.PI);
arc(320,120,140,128, 0.25*Math.PI, Math.PI);

and

//hair
noStroke()
fill(64,51,38);
arc(250,245,270,420, QUARTER_PI+HALF_PI,QUARTER_PI);

 

What’s my next try?

MAKE IT MOVE! I will try to turn it to an animation and make it HarryPotter portrait style!

 

 

Week1 quiz

Week1 How Computation Applies on My Work

 

 

textSize() before text()

 

angleMode()

angleMode(DEGREES)

beginShape();

vertex()

vertex()

vertex()

endShape

 

 

Posted in ICM

One thought on “ Homework Week1: Self-portrait ”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s