Assignment 1: Self Portrait – Introduction to Interactive Media

Here is my final self-portrait:

Concept:

For this project, I created a self-portrait using only 2D primitives. My goal was to make the portrait have many traits of me while still keeping the forms simple, using what we learned in class about 2D primitives and the p5 reference website. I used the same hijab color I wear most often, gold jewelry that is similar to what I wear every day, and burgundy for the shirt since it is my favorite color.

How this was made:

The portrait was created using basic 2D primitives such as the ellipse, rect, arc, line, and quad. It was really hard positioning the shapes, especially when creating the lashes and the bent right arm. It was a constant trial-and-error process, which helped me better understand how each value in the shape controls the position and form.

For the face, I was not sure what exactly to do, especially because my knowledge of the platform and scope was limited. But I kept the features minimal by just using simple shapes, like an ellipse for the eyes, a small half-triangle nose made with lines, and an arc for the mouth. I was initially unsure how to create the hijab, but by experimenting with a large black ellipse and putting it behind and around my face, I was able to create a framing effect that resembles a hijab without making it too difficult.

After making the portrait of myself, I decided to experiment with some motion and interactivity, even though we have not covered it yet in class. I started looking at some examples, and I saw many people make the pupils of the eye follow the mouse. So I did this by slightly adding mouseX and mouseY values to their original positions and then limiting the movement by multiplying by 0.008 so the pupils stayed inside the eye. I learned this by reviewing the slides to get an understanding of the variables and watching some tutorials from “The Coding Train” to get a better idea of it.

Code highlight:

One part of the code that I am particularly proud of is the thought bubble interaction. When you click on the portrait, two thought bubbles appear with random words generated inside them to represent my thoughts.

let showThoughts = false;//to make the thoughts hidden at first

let thoughts = [
  "THINKING",
  "IDK",
  "SCHOOL",
  "FUTURE",
  "TIME",
  "WHY",
  "WHAT IF",
  "PRESSURE",
  "OK",
  "TIRED"
]; //words I want to have in the background

function setup() {
  createCanvas(400,400);
  }

function mousePressed() {
  showThoughts = !showThoughts;
}//so if you click the thoughts the thoughts appear and if you click again the thoughts disappear.

function draw() {
background('#D2D1C7');//to set the background
print(mouseX, mouseY)
 
//Thought words (the background layer)
//fill(0,80); //making the words black and low opacity
//stroke(0,80);//so the stroke is the same color as the fill
//strokeWeight (3); //to make the text bold
//textSize(20);//to make the text bigger
//text(random(thoughts), random(width), random(height));//to draw a random word at a random position.

  
  
//Only draw thoughts if clicked
if (showThoughts) {
//Thought bubbles
noStroke();
fill(255, 230);//soft white and slightly transparent
ellipse(110, 90, 200, 140);//left bubble shape
ellipse(297, 85, 200, 140);//right bubble shape

//Thought words
fill(0);//black
stroke(0);
strokeWeight(2);
textSize(20);

//Left bubble text
text(random(thoughts),random(110 - 60, 110 + 50),random(90 - 40, 90 + 40))//picks one word randomly, then I put padding so it does not go outside the circle 
//Right bubble text
text(random(thoughts),random(277 - 60, 277 + 50),random(85 - 40, 85 + 40));//same thing here just with different placements (I put a smaller number, 277 instead of 297 because some of the text still went outside the bubble for some reason)
  }

This section was quite challenging because I had to control where the text appeared so it stayed inside the bubbles.

Reflection/future work:

I did not want the background to be left empty. At first, I wanted random words to fill the entire background, but I figured it was too visually messy, and I did not like the result of the background just being black. So I decided to scratch that and just make a thought bubble using white ellipses and have my thoughts scatter in them, where they only appear when you click on the portrait.

I liked this idea because it allows the viewer to first see my appearance, then reveal what is happening internally, making my self-portrait a bit more personal. At first, you only see me holding up a peace sign, but when you click on the portrait, you get a deeper look into my mind. So I’m particularly proud of this part of the code because it took some time learning how to do it by searching questions and the keyword functions like the function mousepressed and random, and what I needed to equal them with for the function to work, on Google, and watching multiple tutorials, especially from “The Coding Train” like these:

https://youtu.be/POn4cZ0jL-o?si=yuoXE6cM294Seczd

https://www.youtube.com/watch?v=Bn_B3T_Vbxs

At one point, I was confused about why words were still appearing in the background. I later realized this was because I left the background in the setup function instead of the draw function, which caused text from previous frames to accumulate on the canvas rather than being cleared each frame.

For future work, I would like to be more accurate with the positioning of things, add smoother animations, and create more interactive elements to further express more emotion and movement.

Leave a Reply Cancel reply