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:
- 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.
- 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.
- 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)
}