Homework 01 – Self-portrait

Concept

My self-portrait is a sort of digital avatar of myself. It is not overly realistic, but not overly abstract either. For example, my head is oval-shaped, and my eyes, eyebrows, nose, and mouth are in the approximately correct positions. However, going with a simplistic style, I opted to make the my torso triangular, and decided to not add ears. Moreover, I did not add my hair, but instead put on my favourite beanie-shaped hat. The colours black and grey are prominent, as they are some of my favourite.

As I was creating the self-portrait, I realised that there was an opportunity to make everything more interesting by making myself a kind of android, with laser eyes. Therefore I made my eyes a red colour which changes intensity over time, and I also added green lasers which follow the user’s mouse. Therefore my portrait can be said to represent the slightly grumpy and almost penetrating stare of someone who really needs their coffee in the morning, or a college student who is in their fourth class of the day.

Code highlight

I am particularly proud of the part of the code that creates the lasers, as well as their fading effect. At the start of each frame, instead of setting the background to a solid black colour, I set it to black with an alpha of 10 (out of total 255). This means that with every frame, the previously drawn lasers are not completely erased, but slowly fade out.

background(0, 0, 0, 10);

To make the code cleaner and more principled, I store the coordinates of my eyes in two arrays, where the first two numbers represent the (x, y) coordinates of the top left corner of the eye, and the next two represent the coordinates of the top right corner of the eye.

const eye1 = [0.38, 0.45, 0.45, 0.5];
const eye2 = [0.56, 0.45, 0.62, 0.5];

Note that, in my code, each coordinate is a number between 0 and 1, and is multiplied by the height or width of the canvas when drawing.

Then, I draw the eye, before finally drawing the lasers. The width of the lasers follows a sine curve that moves between 0 and 2.

strokeWeight(sin(frameCount * 0.01) + 2);

Again, to make the code cleaner and more principled, I define a function that, given the coordinates of an eye, returns its center, but slightly moved in the x and/or y direction, to create a ‘fuzz’ effect. I then use the function to get the center of each eye.

function getEyeCenter(eye) {
  const centerX = (eye[0] + eye[2]) / 2; 
  const centerY = (eye[1] + 2*eye[3]) / 3;
  return [(centerX + random(-LASER_FUZZ, LASER_FUZZ)) * X,
          (centerY + random(-LASER_FUZZ, LASER_FUZZ)) * Y];
}

const eyeCenter1 = getEyeCenter(eye1);
const eyeCenter2 = getEyeCenter(eye2);

Here, LASER_FUZZ is a small number, such as 0.01.

Finally, I draw the lasers. Each laser is a line from an eye to the mouse; however, the mouse coordinates are also slightly shifted in the x and/or y direction, to emphasize the ‘fuzz’ effect.

const laserTargetX = mouseX + X * random(-LASER_FUZZ, LASER_FUZZ);
const laserTargetY = mouseY + Y * random(-LASER_FUZZ, LASER_FUZZ);

line(laserTargetX, laserTargetY, eyeCenter1[0], eyeCenter1[1]);
line(laserTargetX, laserTargetY, eyeCenter2[0], eyeCenter2[1]);

The sketch

Reflection

I am fairly happy with my final sketch. Many more visual details may be added to increase the realism and/or the digital-like effect. For example, if I decided to lean more into the android aesthetic, I could make my skin a metal-like texture instead of just grey, and add robotic details to my hat and/or clothes. In terms of interaction, to emphasize that the person in the sketch is ‘watching’ you, I can make them ‘lean’ towards the mouse as well, in addition to the lasers.