Assignment 1: Self Portrait – Introduction to Interactive Media

Concept

My p5.js self-portrait is more than simply a picture of my face; it’s a story that illuminates my path to enroll in the “Introduction to Interactive Media” course. The artistic representation of that voyage is this portrait. My conversation with my friends regarding me not being able to enroll in this course until senior spring revolved around how I might be in the hall of fame for not being able to complete my minor because of an introductory course.

The goal of my portrait is to elevate the accomplishment by placing my face on a pedestal and using a lighted stage as the background. It acts as a metaphor for the significant problems I faced since freshmen fall to enroll in this course to complete my minor. Pedestals are typically used to display objects of significant worth or significance. I also thought of adding an interactive element (by clicking the mouse button) that allows me to change the emotions on my face. The face changes from a smile to a laughing face which serves as a cathartic release for the difficulties during the journey.

Sketch

Code

The code that I am proud of is how I was able to illustrate two different expressions with an easy mouse-click interactive technique. Initially, the value of isLaughing is set to false and when the mouse clicks the value changes to true.

function mouseClicked() {
  // Toggle the laughing state
  isLaughing = !isLaughing; 
}

The drawFace function is the core code for making this sketch possible. This code uses the mouse-toggled laughing boolean variable to show different expressions. The portrait has a lot of facial details that resemble me in real life. The addition of stud-adorned ears, a neck, and a cap enhances the portrait’s authenticity and individuality.

function drawFace(laughing) {
  
  
  // Ears
  fill(skinColor);
  // Left ear   
  ellipse(135, 156, 30, 40);
  // Right ear   
  ellipse(265, 156, 30, 40); 
  
  // Making studs on both ears   
  fill(255,255,255); 
  // stud on left ear   
  ellipse(131, 167, 8, 8);
  fill(255,255,255); 
  // stud on right ear 
  ellipse(269, 167, 8, 8);
  
  // Drawing the neck
  fill(skinColor); 
  rect(175, 206, 50, 60); 
  
  // Drawing the head
  fill(skinColor);
  ellipse(200, 156, 125, 170);
  
  
  // Cap
  fill(0);
  arc(200, 120, 115, 125, PI, TWO_PI, OPEN);
  strokeWeight(10);
  line(150,115,110,115)
  strokeWeight(1);

  if (laughing) {
    // Laughing face
    // Eyes closed
    fill(0);
    // left eye closed    
    ellipse(170, 136, 30, 10); 
    // right eye closed    
    ellipse(230, 136, 30, 10); 

    // Tears
    fill(0, 191, 255);
    // tears from left eye    
    ellipse(165, 151, 10, 25); 
    // tears from right eye
    ellipse(235, 151, 10, 25); 

    // Open mouth - laughing state
    fill(255);
    arc(200, 206, 60, 40, 0, PI, CHORD);

  } else {
    // Smiling Face
    // Eyes
    fill(255);
    // left eye
    ellipse(170, 140, 35, 25); 
    // left eye
    ellipse(230, 140, 35, 25); 
    
    // Pupil     
    fill(0);
    // left eye - pupil  
    ellipse(170, 145, 15, 15); 
    // right eye - pupil 
    ellipse(230, 145, 15, 15); 

    // Mouth
    noFill();
    arc(200, 206, 60, 15, 0, PI); 
  }

  // Nose (same for both faces)
  line(200, 165, 200, 190);
}

Lastly, the concept was achieved by using the pedestal in the center of the room with spotlights showing a significant person.

// Background image of pedestal
function preload(){
  bgImage = loadImage("https://st2.depositphotos.com/1051355/6256/i/450/depositphotos_62569733-stock-photo-illuminated-empty-stage-podiums-for.jpg")
}

Challenges

There were a few challenges that I faced while doing this assignment. Initially, I planned on giving hair to my portrait, however, I was not able to achieve that. So I had to improvise and I made a cap instead.

Another challenge was to determine the x and y coordinates. To solve this issue I printed the cursor’s x and y values in the console using the draw function.

function draw() {
  // finding the value of x and y
  print(mouseX, mouseY)
}

Reflection and Improvements

All the IM courses that I have taken have encouraged me to find meaning behind what I am doing or to show a story. I am happy with the portrait that I have made, it is close to what I look like in real life and also can show the story behind making it.

There is always room for improvement. For example, the portrait may show various emotions depending on which keyboard keys are pressed. Also, the portrait does not have eyebrows, so the eyebrows can follow the mouse when hovering over the portrait.

References

I took a reference from schemecolor.com to use the exact skin color for my portrait.
Another reference was the background image of the pedestal.

Leave a Reply Cancel reply