ICM Homework 1 (Sudo-Portrait)

The first Computational Media assignment began with the decision to attempt to draw a portrait of a classmate. My expose to programming is expansive but coming from a background based around firmware and more low level programming I knew that flexing my creative coding muscles was going to be tedious. Along with that drawing abilities are minimal at best so I knew that sketching out the portrait by hand first wouldn’t be the best way to go about the process. Instead I used illustrator to attempt to make a trace for the portrait to get an idea of the shapes to use in p5. Unfortunately I had difficulty getting the trace work fully as well (My Illustrator skills could use a tune up).

Attempted Image Trace for Portrait

Attempted Image Trace for Portrait

After the initial sketch and tracing portion I decided that it would be best to dive into the p5 drawing. I used coolors to decide what color scheme would be best for my vision. I also realized midway through that I liked a less realistic portrait and then go for my own interpretation of the subject.

Sudo-Portrait of a Classmate

Sudo-Portrait of a Classmate

This assignment ended up being a great refresher on basic spacial functions. Many of the mistakes I made while going through the drawing process could have been avoidable if I had done more planning and sketching before just diving into the coding. Overall, though, I am happy with the way the project turned out.

Below you can find my code for the assignment:

function setup() {
 createCanvas(600, 600);
 background(32,178,170);
}
function draw() {
 //shirt and body
smooth();
stroke(123,45,38);
fill(123,45,38);
triangle(270,270,300,320,240,300);
triangle(300,320,360,290,380,340);
//shoulders and arms
quad(250,250,160,290, 120, 470, 210,470,240,300);
//line(420,260, 505, 320); ,380,320
quad(210,470,320,470,380,340,240,300); //cuts off part of collar
//fixed part of shirt
strokeJoin(MITER);
 quad(315, 350,370,260,420,290);
triangle(420,290, 450,308, 315,350);
quad(452,312, 460,470, 320,470);
 quad(452,312, 320,330, 320,455,400,460);
triangle(297,320,370,261,370,305);
rect(325,450,10,15);
stroke(194,197,198);
fill(194,197,198);
triangle(320,300,360,320,370,261); //left shirt collar
 triangle(270,270,240,300,255,250); // right shirt collar
//shirt details
stroke(0,0,0);
strokeWeight(2.5);
line(295,317, 290,470);
 line(310,317, 305,470);
//buttons
ellipse(302, 330, 5,5);
 ellipse(301, 360, 5,5);
 ellipse(300, 390, 5,5);
 ellipse(299, 420, 5,5);
 ellipse(298, 450, 5,5);
//face
stroke(234,199,169);
fill(234,199,169);
triangle(255,249,368,260,300,320);
quad(255,249,368,260,340,210,280,210);
 ellipse(310,160, 110, 170,60);
//Hair(beard)
fill(183,72,42);
stroke(183,72,42);
quad(250,170,250,190,280,250,315,250,300,190);
quad(370,170,370,190,340,250,305,250,330,190);
triangle(250,169,370,169,305,250);
//Hair(top of head)
ellipse(310,83,40,20);
triangle(290,80, 260,110,290,100);
 triangle(300,75, 260,100,320,100);
 triangle(335,75, 290,110,350,100);
//Face details
stroke(234,199,169);
fill(234,199,169);
quad(265,160,260,185,265,195,340,195);
quad(350,160,355,185,350,195,265,160);
triangle(265,195, 300,195,280,215);
triangle(320,195,350,195,335,215);
rect(320,175, 30,20);
fill(249,158,144);
ellipse(310,220,25,5);
//freckles
fill(249,101,14);
stroke(249,101,14);
ellipse(275,195,1,1);
ellipse(285,195,1,1);
ellipse(280,185,1,1);
ellipse(330,195,1,1);
ellipse(340,195,1,1);
ellipse(335,185,1,1);
//ears
fill(234,199,169);
stroke(249,158,144);
arc(250,160,20,37,-90,PI,CHORD);
arc(370,160,20,37,-90,PI,CHORD);
fill(109,111,112);
stroke(109,111,112);
ellipse(252,164,8,12);
ellipse(369,164,8,12);
//eyes and nose
 fill(255);
stroke(255);
rect(275, 155, 20, 10, 50,50,0,0);
rect(320, 155, 20, 10, 50,50,0,0);
fill(11,122,117);
stroke(11,122,117);
ellipse(280,160,7,7);
stroke(194,197,198);
fill(194,197,198);
ellipse(280,160,2,2);
 stroke(11,122,117);
 ellipse(325,160,7,7);
 stroke(194,197,198);
 fill(194,197,198);
 ellipse(325,160,2,2);
fill(25,83,95);
stroke(249,158,144);
strokeWeight(2.5);
line(303,170,302,190);
line(314,170,315,190);
strokeWeight(4);
line(295,255,285,290);
line(315,255,320,275);
//glasses
strokeWeight(2.5);
noFill();
stroke(0);
ellipse(285,160,33,28);
ellipse(331,160,33,28);
line(269,160,250,140);
line(347,160,365,140);
line(300,160,315,160);
//eyebrows
fill(183,72,42);
stroke(183,72,42);
rect(271, 138, 25, 5, 20,20,20,20);
rect(320, 138, 25, 5, 20,20,20,20);
}