SELF PORTRAIT: So Many Ellipses – Introduction to Interactive Media

For the first weekly production assignment, I worked in Processing to make a not-so-realistic self-portrait. The objective was to work with the basic functions and primitive shapes in Processing. This process, frustrating but fun, got me accustomed to the syntax implementation. Additionally, it was a great way to involve in process of researching and discovering different implementation techniques.

Production Process:

I started the assignment with high hopes, thinking to incorporate many artistic elements unaware of how difficult it would be. I sketched some designs digitally and to make it look more cool and trendy, I tried to sketch some Snapchat filters.

Having no experience with Processing beforehand, I had no idea where to start with and how to implement my sketch. After hours of watching different tutorials and trying different things, I decided to take each element one by one and try to implement the simplistic version. Later, I could work on it more to the best of my ability.

1- Size and Background

To start off, I set the size of the canvas to 350×450, resembling a photo ID dimensions standard. Then I used loops to create a grid and ellipses to create a ripple pattern. While I tried to work with different things to incorporate a gradient, I ended up resorting to a solid color background with white strokes.

//ripple effect looking background by creating not filled ellipses using loop
  while(x<= height){
    stroke(250);
    strokeWeight(0.75);
    noFill();
    ellipse(width/2,height/2,x,y);
    x = x + 30;
    y = y + 40;
  }
  
  //grid background
  for(int z = 10; z <= width; z+= 10){
    noFill();
    stroke(250);
    strokeWeight(0.01);
    line(z,0,z,height);
  }
  
  for(int z = 10; z <= height; z+= 10){
    noFill();
    stroke(250);
    strokeWeight(0.01);
    line(0,z,width,z);
  }

2- Face and Shoulders

I tried to do my best in finding the best color to match my skin tone. While the face doesn’t look realistic any bit, but I worked with different sizes of ellipses to form basic features. To make the shoulders, I used continuous curves and filling in any remaining places using rectangles. The eyes were also made using ellipses. The nose and smile were completed using curves.

3- Hair

The most time-consuming and frustrating part was making hair. As I wanted to sort of incorporate my somewhat wavy and color-treated hair, I spent so much time trying different things. Finally, I ended up making three rectangles with different transparency for the gradient. To make some waves and blend the colors in I made some ellipses and positioned them to give the effect of highlights. That is the part where so many ellipses come into effect. Additionally, for the forehead hair, I used curves, and rather than filling, I just used a thicker stroke. While the code for this part is long, but here is a small snippet:

//hair made using small ellipses and gradient look using rectangles
  fill(52,30,25); //dark brown
  ellipse(width/2, height/2, 190, 220);
  fill(90,42,33,60);   //light brown
  rect(80,204, 188, 150);
  fill(124,30,11,190);  //red
  rect(82,245, 187, 110);
  
  //ellipses to curve hair
  fill(90,42,33,120);
  ellipse(85, 198, 15, 40);
  ellipse(101, 202, 15, 40);
  ellipse(248, 198, 15, 40);
  ellipse(264, 202, 15, 40);
  ellipse(84, 233, 15, 60);

//forehead hair by using continuous curves
  stroke(52,30,25);
  strokeWeight(35);
  beginShape();
  curveVertex(76, 202); // the first control point
  curveVertex(110, 188); // is also the start point of curve
  curveVertex(175, 133); //last point
  curveVertex(184, 115); //last control point
  endShape();

4- Dress

To make the portrait look sort of cute, I used rectangles to make a dress top. For the same reason, I chose a lighter shade of pink and polka dot effect. Nothing fancy, just some rectangles, circles, and cute colors.

5- Accessories

To jazz it up a little more, I wanted to include my everyday accessories at least. So, there you see my most emotionally valuable necklace and my classic nerdy glasses. For the necklace, it was two lines and a circle. The glasses were a couple of rectangles and lines.

//glasses
  stroke(20);
  strokeWeight(2.75);
  rect(126,227,40,20);
  rect(185,227,40,20);
  line(126,227,105,223);
  line(224,227,244, 222);
  line(167,232,184, 232);

//necklace
  strokeWeight(1.2);
  stroke(240,198,31);
  line(148,350,174,398);
  line(174,398, 203, 349);
  noStroke();
  fill(252,20,102);
  circle(175,396,8);

Also here is a short look at the production process:

And there you have the final self-portrait. Although I am kinda disappointed that I was unable to make it look like what I originally intended, I am proud that I got to learn something new and put that in effect. One of the weaknesses of the code is surely the hard-coded position coordinates, which I am in no way proud to do. My takeaway from this production is to practice more and try to be more creative in the implementation. Hopefully, with each production, I would learn more and find ways to enhance my code.

Cheers to a great semester ahead!

Leave a Reply Cancel reply