Tag: self-portrait

Assignment 1: Self Portrait

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

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

Assignment 1: Self Portrait

I learned the basic concepts of p5.js, such as circles, ellipses, and colors, through online tutorials, practice coding, and experimentation. I started out by learning how to create basic shapes using the ellipse and circle functions and then moved on to manipulating more complex shapes such as hair and eyes. I then experimented with different colors to create a more life–like image. After mastering the basics, I began to understand how to use conditionals to create an animation. I then began to experiment with different speeds and directions to create a more dynamic animation. With each new concept I learned, I was able to create a more realistic self–portrait that accurately captures my personality.

This p5.js code is a moving self–portrait of me. It is a creative piece of code that uses mathematical concepts such as conditionals, variables, and geometry to create an animation. The code is comprised of a setup and draw function and uses variables for the coordinates, directions, and speed of the animation. The setup function creates a canvas of 400x400 pixels and sets the starting positions and speeds of the animation. The draw function uses the variables to draw the self-portrait, which consists of a head with eyes, hair, a nose, and a tongue. The head will move from side to side and bounce up and down when it hits the boundaries. This code captures my playful and creative spirit, as it animates me in a unique and amusing way.

The part of the code that I am most proud of is the part of moving and boundary detection. I was able to connect all pieces of the face into one variable so that all of them move simultaneously. Also, the ternary operator is my way of showing my CS skills(jk).

Reflecting on this project, I am proud of my progress and the creative outcome of the code. I am now confident in my ability to use the fundamental concepts of p5.js to create engaging visuals. However, I am also aware that there is still room for improvement and further exploration. I plan to add user interaction to the animation, for example, allowing users to move the portrait with their mouse. Additionally, I would like to incorporate video sensors to create a more life–like animation. This could be achieved by tracking a user’s facial movements and incorporating them into the animation. As I continue to explore the limitless possibilities of p5.js, I look forward to creating increasingly complex animations and engaging interactive experiences.