Homework 2- Animated self portrait – catch up

Hi everyone, my name is Batool Al tameemi, I joined this class on Sunday so I am trying to catch up the work

Overview:

This dynamic self-portrait, crafted using the expressive capabilities of p5.js, offers an intriguing blend of artistic finesse and interactive elements. It breathes life into the digital canvas with a symphony of visual animations and engaging features.

Enchanting Cloud Animation: The canvas adorns itself with ethereal clouds that gracefully drift across the sky, bestowing an atmospheric and immersive aura upon the portrait. These celestial wanderers move with a fluid elegance, enhancing the overall visual allure.

Meticulous Facial Representation: The self-portrait meticulously captures the quintessence of a visage, with a particular focus on its defining characteristics – the eyes, nose, lips, and cheeks. These features are intricately designed, resulting in a lifelike and evocative portrayal.

Dynamic Blinking Eyes: This project introduces a captivating blink animation for the eyes, infusing the portrait with an element of realism and endearing quirkiness. The eyes gracefully transition between open and closed states, establishing a captivating connection with the observer.

Embedded sketch

A Highlight of a code I am proud of:

One of the code segments that truly stands out in this self-portrait project is the implementation of interactive eye movement. This feature elevates the portrait’s interactivity and brings it to life in a captivating manner.

Within the code, the calculation of the new positions for the pupils based on the mouse cursor’s movement is a testament to both creativity and technical finesse. The snippet carefully calculates the angle between the mouse cursor’s position and the position of each eye. It then determines the new coordinates for the pupils, resulting in the illusion of the eyes tracking the viewer’s actions.

  // Calculate the angle between the mouse and each eye
  let leftEyeAngle = atan2(mouseY - leftPupilY, mouseX - leftPupilX);
  let rightEyeAngle = atan2(mouseY - rightPupilY, mouseX - rightPupilX);

  // Calculate the new positions for the pupils based on the angle
  let pupilRadius = 15; // Adjust the pupil size as needed
  leftPupilX = 170 + cos(leftEyeAngle) * pupilRadius;
  leftPupilY = 175 + sin(leftEyeAngle) * pupilRadius;
  rightPupilX = 230 + cos(rightEyeAngle) * pupilRadius;
  rightPupilY = 175 + sin(rightEyeAngle) * pupilRadius;

  fill(139, 69, 19);
  ellipse(leftPupilX, leftPupilY, 20, 20);
  ellipse(rightPupilX, rightPupilY, 20, 20);
}

Reflection:

Creating this self-portrait project in p5.js was an exciting journey that allowed for a fusion of artistic expression and interactive coding.

Future Improvements:

1. Enhanced Realism: To push the boundaries of realism further, I plan to explore the incorporation of even more intricate facial details. Elements such as eyelashes, wrinkles, or variations in skin texture can elevate authenticity and immerse the viewer deeper into the self-portrait.
2. Background Storytelling: To enrich the viewer’s experience, I intend to delve into the addition of a meaningful background or narrative context. Crafting a compelling backdrop can provide insights into the subject’s personality, convey specific moods, or tell a captivating story.
3. Gesture and Pose: I look forward to experimenting with different facial expressions, poses, or gestures in future self-portrait projects. This exploration will enable me to convey various emotions or themes through the artwork, adding diversity to my portfolio.

Code:

//Batool Al Tameemi , Intro to IM 
//Homework 1 
function setup() {
  createCanvas(400, 400); // Creates a canvas with a size of 400x400 pixels
  background(0, 0, 250); // Sets the background color to blue
}

function draw() {
  let centerX = width / 2; // Calculate the x-coordinate of the center of the canvas
  let centerY = height / 2; // Calculate the y-coordinate of the center of the canvas

  let skinColor = color(255, 204, 153); // Define a custom skin color using RGB values

  // Draw the face background
  fill(87); // Set the fill color to a shade of gray
  noStroke(); // Disable outline (stroke)
  ellipse(200, 420, 250, 200); // Draw an ellipse as the face's background
  fill(0); // Set the fill color to black
  noStroke(); // Disable outline (stroke)
  ellipse(centerX, centerY, 230, 250); // Draw an ellipse as the face
  rect(225, 200, 90, 230); // Draw a rectangular shape as the neck
  ellipse(200, 330, 90, 50); // Draw an ellipse as the mouth area
  fill(skinColor); // Set the fill color to the custom skin color
  ellipse(centerX, centerY, 170, 200); // Draw an ellipse as the skin
  
  fill(0, 0, 0, 100); // Translucent black
  stroke(255);
  ellipse(170, 100, 50, 40); 
  ellipse(230, 100, 50, 40);
  line(195, 100, 205, 100);

  // Draw eye whites
  fill(255); // Set the fill color to white
  noStroke(); // Disable outline (stroke)
  ellipse(170, 175, 40, 30); // Draw the left eye white
  ellipse(230, 175, 40, 30); // Draw the right eye white

  // Draw eye pupils
  fill(139, 69, 19); // Set the fill color to brown
  ellipse(170, 176, 20, 20); // Draw the left eye pupil
  ellipse(230, 176, 20, 20); // Draw the right eye pupil

  // Draw the cheeks
  fill(255, 182, 193); // Set the fill color to pink
  ellipse(144, 240, 40, 40); // Draw the left cheek
  ellipse(256, 240, 40, 40); // Draw the right cheek

  // Draw the nose
  fill('#C4A484'); // Set the fill color to a light brown
  ellipse(200, 210, 20, 30); // Draw the nose

  // Draw light eyebrows
  fill(0); // Set the fill color to black
  noStroke(); // Disable outline (stroke)
  ellipse(170, 145, 30, 8); // Draw the left eyebrow
  ellipse(230, 145, 30, 8); // Draw the right eyebrow

  // Draw the mouth
  fill(255, 0, 0); // Set the fill color to red
  arc(200, 250, 50, 50, 0, PI); // Draw a semi-circle as the mouth (smile)

  // Draw the lips
  stroke(0); // Set the stroke color to black
  strokeWeight(2); // Set the stroke weight (line thickness)
  noFill(); // Disable fill for the lips (outline only)
}