Assignment 1: Self Portrait

Two lectures. One assignment.

During the first lecture, we learned how p5.js work and the ways to create (seemingly) simple shapes. Second lecture, we dipped tip of our toes on making simple animations. And now we have an assignment: making a self-portrait. Although I do not have an artistic background, I did not want to create an ugly object and call it a portrait of myself. So, I discarded the difficult details. Instead of filling the entire canvas with my face, I decided to make it small. Still, I was pretty sure that I am not good at creating faces, so I turned the head sideway.

Initial Design

Better. But now, it became hard to say that it is my portrait. It looks as it a random person sitting. So, I started to lay out what characteristics I can give to this random person so that it somehow resembles myself. So, I took a picture of myself doing this assignment. Then I extracted some visible characteristics: pose, skin tone, color of clothes, and so on. After some time of planning, I started to think about how I should build this image of myself. So, I went to the p5.js reference page and skimmed through it. For pose, I could use rotate(). For color of clothes, fill(). Using circles and rounded rectangles seemed a good way to create less stiff image. At one point, I thought to myself that it is enough of planning, so I started to work on p5.js.

Difficulties

I knew I would have to go though a ton of trials and errors just to create something that may resemble what I planned. But there was one thing that kept annoyed me: rotate(). I now know better about it, but at the time, I could do nothing but to see my arms fly out of my body and disappear from my sight. After a lot of trials and errors, I could somehow bring back my arms and put it on my body. The outcome somewhat resembled myself, but I was not satisfied. I learned and know how to create animate objects in p5.js, and I wanted to somehow use it. So, I tried to change my arm’s angle of rotation to make it look as if I am typing something. And I saw my arms fly again. It is time for trials and errors.

// this is a pseudo code
rotate(radians(30));
rect(100, 100, 4, 95, 2);

Luckily, soon enough, I realized that there was a way to have a control over the axis of rotation: use translate() and then create objects at relative coordinate of 0, 0. This way, I get to move my arms while my arms still attached to my body.

let rArmAngle = 168;
let v1 = -0.2;

function animateRightArm() {
  fill(250,240,230);
  translate(width/2,height/2);
  translate(95,47);
  rArmAngle += v1;
  if (rArmAngle >= 168 || rArmAngle <= 161) {v1=-v1;}
  rotate(radians(rArmAngle));
  rect(0, 0, 100, 28, 20);
  resetMatrix();
}

And here is my final result: me making my self-portrait.

Maybe I should have figured out how to use rotation() properly before using it right away and manually fix problems. But for next time, now that I figured out how to fix an axis of rotation, I will work on figuring out how to move multiple axis of rotation to create joints, before I start typing codes.