Self Portrait – With a Twist!

Concept:

Since it was the first project for the class, I wanted to make my self portrait as realistic as possible. For this reason, the first thing I did was dive into the documentation, and find a way to load images onto the canvas – so I could use a photo of mine as reference.

Following this, while I was using simple shapes to make my image, I discovered the vertex() function and the begin/endShape() function which I proceeded to use to create the more complex shapes in my portrait such as the hair and face.

Beyond these, I tried to keep my portrait as simple as possible, except the twist at the end:

If you click on the canvas, a table tennis racket spawns. I wanted my self portrait to go beyond simply showing a photo of me and be more expressive about who I was – thus I added a bit of myself through the table tennis rackets, a passion of mine.

Highlights:

I believe the highlight of my project was adding the spawning table tennis rackets. This code while still remaining relatively simple, involved the usage of a class and a custom function beyond the simple draw and setup functions.

One question I answered while implementing this was regarding the orientation of the rackets. I initially had them oriented vertically, but I realized that this was getting monotonous. So I used the random() function to get a randomized orientation for each racket that is created!

  for (let racket of rackets) {
    drawR(racket.x, racket.y, racket.angle);
  }
  
  print(mouseX +","+mouseY);
}

function mousePressed() {
  rackets.push({
    x: mouseX,
    y: mouseY,
    angle: random(0,2*PI)
  });
}

function drawR(x, y, angle) {
  push(); 
  translate(x, y);
  rotate(angle);
  
  // Racket handle
  fill(120, 70, 40); 
  rect(-5, 0, 10, 30);

  // Rubber
  fill(200, 0, 0);  
  ellipse(0, -15, 40, 40);  
  pop(); 
}

 

Reflections:

I believe my portrait ended up looking well, given the limited nature of the time I had to work on it. However, there are several things I would change about it if I continued to work on it. Firstly, I would improve how the racket looked, and create a mechanism to remove all rackets from the screen given the press of a button. Second, I would smoothen out my character’s outfit and possibly add more details to the face to make it look more realistic!

Overall, I really enjoyed working on this project and look forward to the rest of the class!