Week 1: Self-Portrait

For this assignment, we were to use p5js online editor to create a self portrait. It did seem like a daunting task, given my incompetence in art and drawings. However, as I played around with the code and different shapes, I put together my face and some of its traits to the best of my ability.

Creating Me

Starting with a blank canvas, I divided the project into various parts to compartmentalise my work. This allowed me to focus on one aspect of the project at time. I created functions to draw different parts of my portrait, which would provide a modular structure to the code as well as help me slowly develop my portrait.

function draw() {
  background(color("#0977f6"));
  
  drawEars();
  drawBody();
  drawNeck();
  drawFace();
  drawStrawHat();
  drawBlush();
  drawSpecs();
}

Note: The drawFace() function draws every element in my face.

I started with the outline of my face. Since, my face is oval-shaped, I opted to using an ellipse to achieve this. The parameters I used to make the outline of my face (ellipse) would later be used in every other shapes and objects. In order to achieve this, I made the parameters for the ellipse global variables by declaring them at the top of the code outside any function. I initialised their values inside the setup() function since it would only be run once. I use this global variables as such:

let f_x, f_y;

function setup() {
  createCanvas(500, 500);
  f_x = width/2;
  f_y = height/2 - 40;
  
  textSize(30);
  textAlign(CENTER, CENTER);
}

f_x and f_y refer to face x-coordinate and face y-coordinate respectively. All the shapes in the portrait is drawn with respect to these variables. In other words, the shapes are drawn with positions corresponding to some manipulation of the aforementioned global variables. Here is an example:

// Eyes
  stroke(10);
  fill("#eeeeee");
  ellipse(f_x - 25, f_y + 10, 20, 7);
  ellipse(f_x + 25, f_y + 10, 20, 7);

The above code snippet creates the two eyes. Notice that the positions of the ellipses uses f_x and f_y. Basing all the shapes in my portrait, I created a digital image of myself.

Notable Traits:
  1. Straw Hat: The hat is inspired by one of my favourite fictional characters, Monkey D. Luffy.
  2. Rosy Cheeks: I have perpetually red cheeks. Although its shape is not exactly an ellipse, making it an ellipse was the only way it did not look off.
  3. Shadows: The shadow of my head on the neck was made by duplicating the head ellipse and translating it down. The width of the ellipse was then adjusted.

Future Improvements

While I was making my portrait, I noticed that making it dynamic was a challenge. The creation and implementation of global variables, f_x and f_y, did make it sort of dynamic as the portrait would still be intact even if we change the size of the canvas, it would be more dynamic if the shapes would also change size with respect to the canvas. This is something that I could work on to improve the customisability of the portrait.

Leave a Reply