[icm week 1] Draw a portrait using code

Screenshot 2015-09-09 18.07.42

(TL;DR — See my final drawing here!)

As a person with no experience with either art or programming, our first ICM homework assignment to draw a portrait of our classmate using code felt quite daunting.

But once I jumped in, I had a lot of fun, even though I definitely didn’t go about the process in a particularly efficient way.

I started by doing a (very rough) sketch on paper based on the picture I took of Isabel in class. Then I tried to code her hair using the curve() and curveVertex() functions.

Screenshot 2015-09-06 17.28.18 Screenshot 2015-09-06 18.05.26

This did not go very well. I quickly realized that graphing out my sketch would make it much easier to plot exactly where I needed to place the curves and other shapes.

IMG_9936

Forgetting the existence of graph paper, I drew out a 30 x 20 graph, which multiplies out nicely to my 750 x 500 canvas size. I then redrew my sketch and plotted out coordinates. I made an Excel sheet to quickly multiply my sketched points by 25 to fit my canvas size, which was helpful for both my calculations and for remembering how to use Excel.

Screenshot 2015-09-08 15.28.26 Screenshot 2015-09-08 23.36.03

I’m sure this would have been much easier if I used Photoshop or some other tool to tell me what position each pixel was at, but I went ahead and used the ol’ pencil and paper method anyway. And also a lot of trial and error.

Screenshot 2015-09-09 10.24.12

I still don’t feel like I fully understand how to use curves. More specifically, I don’t fully understand how the “control points” interact with and change the curve. I also still don’t know how to change the angle of a curve in the middle of a long curveVertex() sequence. If you look at my code below, you’ll see that I kind of hacked it by putting a bunch of shapes together in the background.

I also had some trouble with arc() to begin with because in order to get the eyes angled in the way I wanted, I had to remember basic trigonometry. I ended up figuring out that you could multiply the radians in the code, and so the angles of the eyes came out like this:

[javascript]arc(325, 198, 50, 54, PI + ((1/10) * PI), TWO_PI); [/javascript]

And I added some flashing rainbow colors for fun:

[javascript]rainbowColor = color(random(0, 255), random(0, 255), random(0, 255)); [/javascript]

Overall, I enjoyed this exercise a lot and felt like it was a good way to dive in to the basics of programming, and taught me how to look things up and ask questions.

I’m pretty happy with the result!

in (1)

Note: this is a gif version of my sketch so it looks a little weird, but it gives you the idea. See the final sketch here.

The code is below. 

[javascript]var rainbowColor;
var faceColor;
var hairColor;
var bodyColor;
var eyebrowColor;
var lipColor;
var mouthColor;
var teethColor;

function setup() {
createCanvas(750,500);
faceColor = ‘#FFD5A6’
hairColor = 65
eyebrowColor = 45
bodyColor = ‘#FFCD94’
lipColor = ‘#F55187’
mouthColor = ‘#5C283A’
teethColor = ‘#FFF0F5’

}

function draw() {
background(‘#B09292’);
rainbowColor = color(random(0, 255), random(0, 255), random(0, 255));

// Hair
fill(hairColor);
beginShape();
curveVertex(100, 575);
curveVertex(100, 500);
curveVertex(75, 425);
curveVertex(125, 375);
curveVertex(150, 338);
curveVertex(150, 275);
curveVertex(200, 225);
curveVertex(200, 175);
curveVertex(325, 30);
curveVertex(450, 30);
curveVertex(475, 100);
curveVertex(550, 200);
curveVertex(525, 300);
curveVertex(475, 500);
curveVertex(425, 575);
endShape();
curve(325, 75, 450, 30, 475, 100, 400, 175);

//Neck
noStroke();
fill(bodyColor);
beginShape();
curveVertex(300, 300);
curveVertex(325, 345);
curveVertex(275, 400);
curveVertex(475, 400);
curveVertex(425, 345);
curveVertex(450, 300);
endShape();

//Body
noStroke();
rect(275, 400, 200, 400, 0);

//Shirt
fill(0) //shirt base
beginShape();
curveVertex(388, 388);
curveVertex(450, 366);
curveVertex(538, 438);
curveVertex(550, 500);
curveVertex(550, 625);
curveVertex(550, 625);
endShape();
triangle(450, 366, 375, 500, 550, 500);
triangle(375, 500, 300, 400, 200, 500);

strokeWeight(5); //shirt design
stroke(rainbowColor);
line(450, 450, 440, 430);
line(450, 450, 451, 427);
line(450, 400, 470, 396);
line(450, 400, 474, 403);
line(485, 434, 482, 456);
line(485, 434, 490, 462);
line(430, 490, 415, 480);
line(430, 490, 420, 470);
line(530, 448, 504, 445);
line(530, 448, 510, 462);
line(455, 485, 485, 480);
line(455, 485, 485, 508);
line(525, 483, 522, 502);
line(525, 483, 511, 506);
line(334, 480, 312, 476);
line(334, 480, 312, 452);
line(347, 487, 340, 510);
line(347, 487, 354, 510);

//Hair covering body
fill(hairColor);
strokeWeight(1);
stroke(0);
beginShape();
curveVertex(225, 225);
curveVertex(325, 345);
curveVertex(300, 500);
curveVertex(30, 550);
curveVertex(30, 550);
endShape();

//Ears
noStroke(); //left ear
fill(bodyColor);
beginShape();
curveVertex(300, 200);
curveVertex(275, 175);
curveVertex(250, 200);
curveVertex(278, 250);
curveVertex(325, 300);
endShape();
noFill(); //left ear line
stroke(0);
curve(300, 183, 263, 188, 268, 229, 298, 238);

noStroke(); //right ear
fill(bodyColor);
beginShape();
curveVertex(400, 200);
curveVertex(475, 175);
curveVertex(500, 200);
curveVertex(473, 250);
curveVertex(325, 300);
endShape();
noFill(); //right ear line
stroke(0);
curve(300, 183, 480, 188, 485, 229, 498, 238);

//Earrings
noFill(); //left earring
stroke(‘#9C8C81’);
strokeWeight(4);
triangle(268, 230, 250, 268, 273, 275);
fill(rainbowColor);
noStroke();
triangle(253, 250, 263, 278, 274, 253);

noFill(); //right earring
stroke(‘#9C8C81’);
strokeWeight(4);
triangle(485, 229, 487, 270, 460, 253);
fill(rainbowColor);
noStroke();
triangle(487, 245, 470, 267, 472, 240);

//Forehead
noStroke();
fill(faceColor);
beginShape();
curveVertex(325, 225);
curveVertex(275, 150);
curveVertex(325, 75);
curveVertex(425, 75);
curveVertex(475, 150);
curveVertex(425, 225);
endShape();

//Rest of the face
beginShape();
curveVertex(425, 0);
curveVertex(275, 148);
curveVertex(300, 315);
curveVertex(375, 360);
curveVertex(450, 315);
curveVertex(475, 148);
curveVertex(325, 0);
endShape();

//Eyebrows
fill(eyebrowColor);
ellipse(325, 160, 70, 30);
fill(faceColor);
ellipse(325, 170, 70, 20);
fill(eyebrowColor);
ellipse(425, 160, 70, 30);
fill(faceColor);
ellipse(425, 170, 70, 20);

//Eyes
stroke(0);
strokeWeight(1);
fill(0); //eyeliner
arc(325, 198, 50, 54, PI + ((1/10) * PI), TWO_PI);
arc(425, 198, 50, 54, PI, TWO_PI – ((1/10) * PI));

fill(‘#FFF1E8’); //eye shape
arc(325, 200, 50, 50, PI + ((1/10) * PI), TWO_PI, CHORD);
arc(425, 200, 50, 50, PI, TWO_PI – ((1/10) * PI), CHORD);

fill(‘#9E6847’); //eyeballs
ellipse(326, 186, 19, 19);
ellipse(424, 186, 19, 19);

fill(‘#382417’); //pupils
ellipse(326, 186, 10, 10);
ellipse(424, 186, 10, 10);

noFill(); //eyelid
arc(325, 186, 55, 35, PI + ((1/10) * PI), TWO_PI);
arc(425, 186, 55, 35, PI, TWO_PI – ((1/10) * PI));

//Glasses
noFill();
stroke(‘#DB641A’);
strokeWeight(5);
ellipse(325, 200, 80, 82);
ellipse(425, 200, 80, 82);

arc(375, 180, 31, 15, PI, TWO_PI); //bridge
arc(275, 180, 31, 15, PI + ((1/10) * PI), TWO_PI, OPEN); //left
arc(475, 180, 31, 15, PI, TWO_PI – ((1/10) * PI), OPEN); //right

//Nose
noFill();
stroke(0);
strokeWeight(2);
curve(388, 100, 388, 225, 395, 270, 300, 250);
line(366, 270, 376, 270);

stroke(‘#F0B429’); //nose ring
strokeWeight(3);
arc(395, 265, 17, 17, PI+HALF_PI, TWO_PI+HALF_PI+QUARTER_PI, OPEN);

//Mouth
noStroke();
fill(lipColor);
arc(375, 300, 85, 25, PI, TWO_PI);
fill(mouthColor);
arc(375, 308, 80, 25, PI, TWO_PI);
fill(lipColor);
arc(375, 300, 85, 45, TWO_PI, TWO_PI + PI);
fill(mouthColor);
arc(375, 300, 60, 25, TWO_PI, TWO_PI + PI);
strokeWeight(1);
fill(teethColor); //teeth
rect(350, 297, 7, 7, 3, 2, 3, 3);
rect(357, 296, 8, 9, 3, 2, 3, 3);
rect(365, 295, 10, 11, 3, 2, 3, 3);
rect(375, 295, 10, 11, 2, 3, 3, 3);
rect(385, 296, 8, 9, 2, 3, 3, 3);
rect(393, 297, 7, 7, 2, 3, 3, 3);
fill(teethColor);
arc(375, 308, 45, 10, TWO_PI, TWO_PI + PI);

} [/javascript]

 

One thought on “[icm week 1] Draw a portrait using code”

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