Hi everyone, my name is Batool I joined this class on Sunday and this is my HW1
Overview:
In this artistic self-portrait project crafted using p5.js, I’ve created a graphical representation of myself especially adding the sunglasses because I think they represent me so much. The canvas dimensions have been meticulously set to 450×450 pixels, with a background color reminiscent of a tranquil blue sky.
- A highlight of some code that you’re particularly proud of
// 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);
I am proud of the sunglasses sketch While the process of drawing them was relatively straightforward, it led me into a fascinating realm of discovery and experimentation, particularly concerning the use of the translucent shade of black. It’s in these nuanced details that I discovered the power of subtle design choices, and it brought a satisfying depth to the overall composition.
Reflection and ideas for future work or improvements
Reflection:
In creating this self-portrait through the utilization of p5.js, I’ve garnered valuable insights into the realm of digital art and creative coding. The process emerged as both enlightening and fulfilling, yielding a range of noteworthy insights.
Primarily, I ascertained that the fusion of geometric configurations and judicious selection of hues can yield a visually stunning impact. The capacity to manipulate shapes and color palettes for the portrayal of intricate facial components, including the eyes, nose, lips, and cheeks, proved to be an enthralling exercise in the manifestation of creativity.
Ideas for Subsequent Undertakings or Enhancement:
While I derive satisfaction from this self-portrait endeavor, I also discern domains warranting further exploration and refinement:
- Texture and Elaboration: The incorporation of heightened intricacies and textures could elevate the verisimilitude of the portrait. Delving into techniques like texture brushes or introducing supplementary geometrical forms might confer enhanced captivation to the artwork.
- Interactivity: The infusion of interactivity into the portrait, enabling users to manipulate facial expressions or color schemes, holds promise for engendering heightened engagement. This could be realized via user-initiated input and adept event management.
- Background Dynamics: The realm of dynamic or animated backgrounds is ripe for exploration. By engrafting subtle movements or nuanced visual effects into the background, the viewer’s focal point could be duly engaged.
- Variations and Personalization: The provision of options for viewers to tailor specific facets of the portrait, such as hair color or facial attributes, would extend an invitation for greater interaction and emotional resonance.
- Emulating Artistic Exemplars: Imbibing the methodologies and artistic styles of other digital virtuosos can provide wellsprings of inspiration and catalysts for refinement in my own oeuvre. Learning from the rich tapestry of the creative community stands as an invaluable repository.
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)
}