Week 1 Self-portrait

The Concept:

I am ambivert by nature. What does this mean? I am the reserved, quiet person who listens to everyone in a room full of strangers. Yet, when you ask my friends and family, they will tell you I am the most energetic and outgoing person they know. I wanted to capture this concept for my self-portrait.

The idea was to create a character that looks like a normal person (aka the introverted self) at first, but once you get to know her, or rather take the time to get to know her, you discover another version. I thought a lot about what could create a stark difference between the introverted and outgoing self. The answer? My ‘Spiderman’ addiction. So, I made (or at least tried to recreate) a version of ‘SpiderGwen’ that is revealed underneath the normal person graphic as you hover the cursor around. I love the fact that the picture is revealed pixel by pixel since that represents “the effort” of getting to know me. To be honest, I am very proud of going for the idea itself (which some might say was very daring for someone who has never coded before.)

Embedded Sketch:

Implementation:

First, I played around with the different shapes and colors. In this process, the p5js website was really useful because it had visual examples alongside the code. One of my biggest achievements was discovering how to use “bezier()”. Along the way, I was inspired and learnt from the codes of several students who already had their self-portraits published.

For the sake of representing two selves, I had to create two different graphics so I could layer one on top of the other. Once my graphics were ready, I used the p5js website to write this part of code, which I am really proud of:

  //Drawing each version into the buffer
  drawNormalPerson(topImg);
  drawSuperhero(bottomImg);

  ///The interaction
  cursor(brush,0,0);

  // Load the top image
  image(topImg, 0, 0);
}

function mouseDragged() {
  copy(bottomImg, mouseX, mouseY, 20, 20, mouseX, mouseY, 20, 20);
}

Here, I used two global variables to load two different images into the buffer so they can be called when I want them to. The mouseDragged() is a special p5 function that automatically runs every time the mouse moves while a button is held down.

I am also proud of my lips and middle part because I took much time figuring out how to make them look good enough. Here is an extract for the middle part:

//middle part - hair
  img.fill('#2b1203');
  img.bezier(120,200,170,170,190,190,200,119.5);
  img.bezier(120,200.5,122,147,147,122,200,120);
  
  img.bezier(280,200,230,170,200,200,200,119.5);
  img.bezier(280,200.5,280,150,250,120,200,120);

Reflection:

For this assignment, time was my biggest enemy. I wanted to incorporate more things like building in the background of the introverted self and a sky with clouds for when the SpiderGwen appears. What I also tried doing was to replace the normal cursor with a spider (I think that would have been really cool). After countless trial, I could not do it. (I even asked Claude to help me figure this part out, but I still could not do it.) Nonetheless, I am very proud of my work and enjoyed every bit of the creative process I had behind the project. I hope my work inspires someone or reminds them of themselves (to my ambiverts out there!) and makes them smile.