Week 1: Self-Portrait

Description:

For the first assignment, the prompt was to create a self-portrait in Processing using only basic shapes (ellipses, lines, rectangles, arcs…), which might seem easy at first but gets slowly but surely harder.

Size:

I opted for a basic 1280×720 size (16:9 aspect ratio), also known as the standard HD.

size(1280,720);
size(1280,720);

Background:

For the background, I decided to go for a “blocky” left-to-right gradient to match the rest of the portrait, instead of switching between colors gradually. The five shades of purple (for NYUAD) I used were: #9b5bee, #ac78f1, #bd94f3, #ccaff5, #dccaf5 (darker to lighter).

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Background
noStroke();
fill(#9b5bee);
rect(0,0,256,720);
fill(#ac78f1);
rect(256,0,512,720);
fill(#bd94f3);
rect(512,0,768,720);
fill(#ccaff5);
rect(768,0,1024,720);
fill(#dccaf5);
rect(1024,0,1280,720);
// Background noStroke(); fill(#9b5bee); rect(0,0,256,720); fill(#ac78f1); rect(256,0,512,720); fill(#bd94f3); rect(512,0,768,720); fill(#ccaff5); rect(768,0,1024,720); fill(#dccaf5); rect(1024,0,1280,720);
// Background
noStroke();
fill(#9b5bee);
rect(0,0,256,720);
fill(#ac78f1);
rect(256,0,512,720);
fill(#bd94f3);
rect(512,0,768,720);
fill(#ccaff5);
rect(768,0,1024,720);
fill(#dccaf5);
rect(1024,0,1280,720);
Hat:

In order to draw the Beanie, I mainly used ellipses, arcs, rectangles, and a set of diagonal lines. The color used to fill the hat is platinum (a light shade of yellowish-gray). Its hex code is #e5e4e2. For the diagonal lines, I used a for loop to avoid unnecessary repetition.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Hat
fill(#e5e4e2);
ellipse(width/2,height/2-225,25,25);
arc(width/2, height/2-90, 280, 260, PI, 2*PI);
rect(width/2-160,height/2-100,320,50,6,6,6,6);
for(int i=0; i<=300; i+=26){
line(width/2-136+i,height/2-100,width/2-156+i,height/2-50);
}
// Hat fill(#e5e4e2); ellipse(width/2,height/2-225,25,25); arc(width/2, height/2-90, 280, 260, PI, 2*PI); rect(width/2-160,height/2-100,320,50,6,6,6,6); for(int i=0; i<=300; i+=26){ line(width/2-136+i,height/2-100,width/2-156+i,height/2-50); }
// Hat
fill(#e5e4e2);
ellipse(width/2,height/2-225,25,25);
arc(width/2, height/2-90, 280, 260, PI, 2*PI);
rect(width/2-160,height/2-100,320,50,6,6,6,6);
for(int i=0; i<=300; i+=26){
line(width/2-136+i,height/2-100,width/2-156+i,height/2-50);
}
Face & Eyes: 

To match my skin tone, I have used the color with the hex code #ffdbac, then #6e4318 for brown eyes. In terms of shapes, ellipses were sufficient to do the iris and the pupils. I used “width/2” and “height/2” variables to center the portrait in the display window.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Face
fill(#ffdbac);
ellipse(width/2, height/2, 300, 340);
//Eyes
fill(255);
ellipse(width/2-65, height/2-20, 60, 45);
ellipse(width/2+65, height/2-20, 60, 45);
fill(#6e4318);
ellipse(width/2-65, height/2-20, 30, 35);
ellipse(width/2+65, height/2-20, 30, 35);
fill(0);
ellipse(width/2-65, height/2-20, 20, 25);
ellipse(width/2+65, height/2-20, 20, 25);
fill(255);
ellipse(width/2-65+11, height/2-15, 10, 10);
ellipse(width/2+65+11, height/2-15, 10, 10);
noFill();
// Face fill(#ffdbac); ellipse(width/2, height/2, 300, 340); //Eyes fill(255); ellipse(width/2-65, height/2-20, 60, 45); ellipse(width/2+65, height/2-20, 60, 45); fill(#6e4318); ellipse(width/2-65, height/2-20, 30, 35); ellipse(width/2+65, height/2-20, 30, 35); fill(0); ellipse(width/2-65, height/2-20, 20, 25); ellipse(width/2+65, height/2-20, 20, 25); fill(255); ellipse(width/2-65+11, height/2-15, 10, 10); ellipse(width/2+65+11, height/2-15, 10, 10); noFill();
// Face
fill(#ffdbac);
ellipse(width/2, height/2, 300, 340);

//Eyes
fill(255);
ellipse(width/2-65, height/2-20, 60, 45);
ellipse(width/2+65, height/2-20, 60, 45);
fill(#6e4318);
ellipse(width/2-65, height/2-20, 30, 35);
ellipse(width/2+65, height/2-20, 30, 35);
fill(0);
ellipse(width/2-65, height/2-20, 20, 25);
ellipse(width/2+65, height/2-20, 20, 25);
fill(255);
ellipse(width/2-65+11, height/2-15, 10, 10);
ellipse(width/2+65+11, height/2-15, 10, 10);
noFill();
Glasses:

I have set the transparency (alpha) to half (127) to get realistic glass color. The color used is #f6feff. I have used two ellipses, 2 diagonal lines, and one straight line.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Glasses:
fill(#f6feff,127);
stroke(1);
ellipse(width/2-65, height/2-20, 80, 80);
ellipse(width/2+65, height/2-20, 80, 80);
line(width/2-65+40,height/2-20,width/2+65-40,height/2-20);
line(width/2-65-40,height/2-20,width/2-65-83,height/2-30);
line(width/2+65+40,height/2-20,width/2+65+83,height/2-30);
// Glasses: fill(#f6feff,127); stroke(1); ellipse(width/2-65, height/2-20, 80, 80); ellipse(width/2+65, height/2-20, 80, 80); line(width/2-65+40,height/2-20,width/2+65-40,height/2-20); line(width/2-65-40,height/2-20,width/2-65-83,height/2-30); line(width/2+65+40,height/2-20,width/2+65+83,height/2-30);
// Glasses:
fill(#f6feff,127);
stroke(1);
ellipse(width/2-65, height/2-20, 80, 80);
ellipse(width/2+65, height/2-20, 80, 80);
line(width/2-65+40,height/2-20,width/2+65-40,height/2-20);
line(width/2-65-40,height/2-20,width/2-65-83,height/2-30);
line(width/2+65+40,height/2-20,width/2+65+83,height/2-30);
Nose & Mouth:

To draw a clear nose and mouth, I have increased the stroke weight to 2, then used an arc as well as lines to draw them. The color used for the mouth is #ebb5b8.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
//Nose
noFill();
strokeWeight(2);
stroke(10);
arc(width/2, height/2+30, 25, 12, 2+PI, 2*PI);
// Mouth
fill(#EBB5B8);
arc(width/2, height/2+80, 80, 50, 0, 3.14);
line(width/2-40, height/2+80, width/2+40, height/2+80);
//Nose noFill(); strokeWeight(2); stroke(10); arc(width/2, height/2+30, 25, 12, 2+PI, 2*PI); // Mouth fill(#EBB5B8); arc(width/2, height/2+80, 80, 50, 0, 3.14); line(width/2-40, height/2+80, width/2+40, height/2+80);
//Nose
noFill();
strokeWeight(2);
stroke(10);
arc(width/2, height/2+30, 25, 12, 2+PI, 2*PI);

// Mouth
fill(#EBB5B8);
arc(width/2, height/2+80, 80, 50, 0, 3.14);
line(width/2-40, height/2+80, width/2+40, height/2+80);
Neck: 

A single rectangle was enough!

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Neck
fill(#ffdbac);
noStroke();
rect(width/2-40,height/2+150,80,80);
// Neck fill(#ffdbac); noStroke(); rect(width/2-40,height/2+150,80,80);
// Neck
fill(#ffdbac);
noStroke();
rect(width/2-40,height/2+150,80,80);
Shoulders & Shirt:

I have used a couple of ellipses, an arc, and a rectangle with rounded edges. The colors used were: #a0b2c6 for the shirt, and #e4e6eb for the buttons.

 

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
// Shoulders
fill(#a0b2c6);
rect(width/2-200,height/2+220,400,180,28,28,28,28);
fill(#ffdbac);
arc(width/2, height/2+220, 80, 50, 0, PI);
// Shirt
fill(#e4e6eb);
ellipse(width/2, height/2+270, 20, 20);
ellipse(width/2, height/2+320, 20, 20);
stroke(#e4e6eb);
strokeWeight(5);
line(width/2-120, height/2+320,width/2-120,height);
line(width/2+120, height/2+320,width/2+120,height);
// Shoulders fill(#a0b2c6); rect(width/2-200,height/2+220,400,180,28,28,28,28); fill(#ffdbac); arc(width/2, height/2+220, 80, 50, 0, PI); // Shirt fill(#e4e6eb); ellipse(width/2, height/2+270, 20, 20); ellipse(width/2, height/2+320, 20, 20); stroke(#e4e6eb); strokeWeight(5); line(width/2-120, height/2+320,width/2-120,height); line(width/2+120, height/2+320,width/2+120,height);
// Shoulders
fill(#a0b2c6);
rect(width/2-200,height/2+220,400,180,28,28,28,28);
fill(#ffdbac);
arc(width/2, height/2+220, 80, 50, 0, PI);

// Shirt
fill(#e4e6eb);
ellipse(width/2, height/2+270, 20, 20);
ellipse(width/2, height/2+320, 20, 20);
stroke(#e4e6eb);
strokeWeight(5);
line(width/2-120, height/2+320,width/2-120,height);
line(width/2+120, height/2+320,width/2+120,height);

Leave a Reply