Category: F2023 – Mang

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

 

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:

1. 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.
2. 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.
3. 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.
4. 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.
5. 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)
}

 

Design Concept

At first, I wanted to make something that spirals around a pivot point. To make it look less monotonous, I made the spiral only the trajectory. The actual thing going along that spiral consists of lines of increasing length with the same distance to each other with various colors normal to the spiral. But simple or random colors seemed too messy, so I made the lines rainbow-colored. Inspired by Casey Reas’ works, I decided to add a touch of randomness to the project. Therefore, I randomized the spawn points of the spiral while fixing the pivot point to the center. I also wanted the audience to have some control or involvement in the project, so I made the spirals detect the pivot point in real time, and the audience could change the pivot point themselves with a click of their mouse.

Code I am Proud of

The part that I am really satisfied with is the trajectory algorithm. This outcome was, in fact, unexpected. I spent a lot of time calculating angles so that the angles align. I gave the trajectory an original angle relative to the x-axis and calculated the angle that the x-axis, the pivot point, and the trajectory head make. then I used these two angles to determine the direction of the trajectory head should turn to. I made it turn 1/15 of the angle between each frame. Because it is a percentage change, the trajectory will never touch the pivot point. Also, the distance traveled by the trajectory head between each frame is fixed, when it is very close to the pivot point, the relative angle between the pivot and the trajectory head will change dramatically between the frames, making it leave the pivot point even further. I wasn’t sure what this would bring, and it really surprised me when I saw this interwoven structure with four corners. The code is shown below:

class Dot{
  constructor(x,y,ang,len){
    this.x=x;
    this.y=y;
    this.ang=ang;
    this.len=len;
  }
  
  display(){
    // Rainbow color collection
    let firstColor=color("red");
    let secondColor=color("orange");
    let thirdColor=color("yellow");
    let fourthColor=color("green");
    let fifthColor=color("blue");
    let sixthColor=color("indigo");
    let seventhColor=color("violet");
    let actualColor;
    
    // Interpolated color generation
    for(let i=0;i<this.len;i++){
      if(3*i/this.len<=1){
        actualColor=lerpColor(firstColor,secondColor,3*i/this.len);
        stroke(actualColor);
        point(this.x-i*cos(this.ang),this.y-i*sin(this.ang));
      }
      else if(3*i/this.len>1 && 3*i/this.len<=2){
        actualColor=lerpColor(secondColor,thirdColor,3*i/this.len-1);
        stroke(actualColor);
        point(this.x-i*cos(this.ang),this.y-i*sin(this.ang));
      }
      else if(3*i/this.len>2 && 3*i/this.len<=3){
        actualColor=lerpColor(thirdColor,fourthColor,3*i/this.len-2);
        stroke(actualColor);
        point(this.x-i*cos(this.ang),this.y-i*sin(this.ang));
      }
      if(3*i/this.len<=1){
        actualColor=lerpColor(fourthColor,fifthColor,3*i/this.len);
        stroke(actualColor);
        point(this.x+i*cos(this.ang),this.y+i*sin(this.ang));
      }
      else if(3*i/this.len>1 && 3*i/this.len<=2){
        actualColor=lerpColor(fifthColor,sixthColor,3*i/this.len-1);
        stroke(actualColor);
        point(this.x+i*cos(this.ang),this.y+i*sin(this.ang));
      }
      else if(3*i/this.len>2 && 3*i/this.len<=3){
        actualColor=lerpColor(sixthColor,seventhColor,3*i/this.len-2);
        stroke(actualColor);
        point(this.x+i*cos(this.ang),this.y+i*sin(this.ang));
      }

    }
  // Calculating angle
  updateParam(){
    this.x=this.x-10*cos(this.ang+PI);
    this.y=this.y+10*sin(this.ang+PI);
    this.len=sqrt(sqrt(sqrt(fibRec1)));
    let navAng =atan2(navdot.y-this.y, navdot.x-this.x);
    if(navAng<0){
      navAng=abs(navAng);
    }
    else{
      navAng=2*PI-navAng;
    }
    let angleDifference = navAng-this.ang;
    while (angleDifference > PI) {
      angleDifference -= 2 * PI;
    }
    while (angleDifference < -PI) {
      angleDifference += 2 * PI;
    }
    let clockwise = angleDifference < 0;
    let rotationAngle = abs(angleDifference);
    if (clockwise) {
      this.ang -= rotationAngle/15;
    } else {
      this.ang += rotationAngle/15;
    } 
  }

Improvements

The lengths of the lines were a Fibonacci sequence, down to its 8th root. I wanted the increase of the lines to become gradually bigger, while not exploding to a number too huge. I haven’t experimented with other sequences due to limited mathematical abilities, but I believe there can be better sequences that will produce smoother increases in the length of the lines.

I enjoyed Casey Reas’s talk on the randomness, and how the chaos of randomness can sometimes be turned into art. I love the concept presented — of making order out of chaos, as noise exists all around us. Computers were once thought to be orderly machines, that would calculate the exact same result every time it is run. In an already-chaotic world, why would one introduce chaos to one of the very few things that are orderly? Yet, I think that managed chaos can be beautiful. Renaissance paintings are considered good art, but they are not perfect. Simply because of the fact that it exists in the real world, there are always minor deviations even in a perfect brush stroke. Each individual hair in a brush creates enough deviation that no two brush strokes are the same, and somehow those minor deviations are what gives character and life to the drawing. In digital drawing apps, it would not be difficult to create brushes that always produce uniform results, but yet, noise is artificially added in to mimic brushes in the real world, intentionally creating chaos and randomness.

Something that I’ve been thinking about in context to P5.Js and randomness is that I won’t be fully able to control the user experience of the output. What if the randomness I’ve implemented spits out a ‘bad’ output for a certain user? But the more I thought about it, the less likely that sounded to happen. Order from chaos was the moral I’ve learnt from Casey Reas’s video, and I must constrain the randomness in a way that’ll look like something I expect most, if not all the time. A sketch of 10 randomly generated points might sometimes gets me a good result, for example 10 points shaped like a heart or a box, but most of the time it will just give me something that makes no sense. Perhaps then, it might make more sense to generate 10 points in the shape of a heart, but with minor, randomly generated deviations in it’s coordinates so that the heart looks jittery which might be more interesting than a perfect heart. The BASIC lines program of infinitely generated forward and back slashes. If every viewer generates 500 characters of the program, the chances of two viewer having the same outputs of /\/\ would be (1/2)^500, infinitesimally small. It is likely that two users have never seen the same output, but yet the program generates a neat, pleasant-looking output no matter how often it’s run. Perhaps that the idea behind randomness.

My objective of this self-portrait assignment was to create a dynamic and animated self-portrait, drawing inspiration from the style of cartoons. The core idea was to give the portrait an animated look by discarding outlines and instead focusing on bold strokes, vibrant colors, and animated elements. I wanted to add some personal character elements as well, such as my silver earrings and short lighter hair. I believe the eyeroll-like animation also matches my look, as I sometimes receive comments that I appeared as a traditionally mean and cold Eastern European when people would first see me, and that they would be proven wrong after a while. Since the overall look of the portrait is cartoonish, the mean eye-roll appears quite cute and ironic.

Here is the sketch:

That said, I was quite proud of the eyelash animation. I used iteration from -20 to 0 to create eyelashes above the eye, and by adding the lashSpacing I was able to separate them from each other. By using the map() function, I was able to calculate the position of one of the eyelashes. I used the cos() function to create a value that swings between -1 and 1 based on the angle (angle + i). I then mapped it to a range between -10 and 10 and created a centered motion around 0, giving the eyelashes a natural appearance. I then drew each eyelash separately using the lashX coordinates for the upper vertices of the lines.

// Adding eyelashes with animation and spacing
for (let i = -20; i <= 0; i += lashSpacing) {
  // Calculate the x-coordinate for the first eyelash, centered around 0
  let lashX1 = map(cos(angle + i), -1, 1, -10, 10); 
  //Separating by 10 pixels the other 2 eyelashes
  let lashX2 = lashX1 + 10; 
  let lashX3 = lashX1 - 10; 
  stroke(0); 
  // Setting the thickness of the lines
  strokeWeight(2); 
  // drawing the eyelashes
  line(0, -16, lashX1, -25); 
  line(10, -14, lashX2, -25); 
  line(-10, -14, lashX3, -25); 
}
pop();

I was also proud of the gradient code. I used a for loop again to blend the colors by calculating a color for every line of pixels on the canvas with the help of the lerpColor().

function draw() {
  // Defining colors for the gradient
  let color1 = color(0, 0, 139);
  let color2 = color(100, 100, 255);

  // Creating a gradient background. Iterating through each vertical line of pixels
  for (let i = 0; i < height; i++) {
    // mapping the current value of i from the range 0 to height to a new range from 0 to 1
    let inter = map(i, 0, height, 0, 1);
    // calculating a color for each line of pixels using the lerpColor function
    let c = lerpColor(color1, color2, inter);
    // setting the stroke color and drawing a line through full horizontal distance of the canvas
    stroke(c);
    line(0, i, width, i);
  }

For future improvements, I would like to make the code cleaner and simpler, less repetitive. Exploring object-oriented programming techniques could be an intriguing strategy as well, which should help in making the code more organized.

 

https://editor.p5js.org/llluka/sketches/LgUxOAe6N

p5.js assignment#1 was an entirely jarring, anxiety-inducing experience. I severely struggled with understanding javascript code and hence this assignment felt like the biggest milestone. Whilst I still feel that to some extent I don’t entirely understand p5.js coding, I tried to adapt the best I could, within limited time constraints, by using a mixture of simple shapes and what I consider some high level codes to conjure a self-portrait.

I had the hardest time with determining the correct coordinates and so there were lots of trial and error in placing shapes and curves, specifically with the bezier() function. The double eyelids were the hardest to recreate and therefore took considerable time perfecting them. Once I had established a desirable curve I used the translate() function to transfer it to my right eye. Any features that required the bezier()/ beziervertex() function I was proud of:

//lips
fill(255,144,137);
beginShape();
vertex(380, 465);
bezierVertex(380, 465, 390, 450, 400, 465);
bezierVertex(400, 465, 410, 450, 420, 465);
bezierVertex(420, 465, 400, 490, 380, 465);
endShape();

//eyelids
noFill();
bezier(382, 393, 365, 375, 338, 385, 332, 393);
push();
translate(85, 0);
bezier(385, 393, 365, 375, 338, 385, 332, 393);
pop();

Through the fill()/ nostroke()/ translate() functions, I was able to discover and utilise the push() and pop() functions, which corrected many placement/ color errors that tended to occur. To compensate the lack of an interactive quality, I put substantial care into the aesthetics of the self-portrait. If I had a little more time, I would have loved to dabble in javascript coding for adding loops. Making the clouds move repeatedly would certainly make this assignment a more dynamic piece.

 

 

 

 

 

 

 

 

 

Casey’s talk at the Eyeo Festival 2012 first introduced the usage of randomness in modern art starting from the 20th century, then showed some of his work that used the concept of chance within algorithmic rules. I find this concept very interesting because, intuitively, chaos and art don’t belong together. Just as random alphabets combined don’t convey information, random pixels featuring random colors also shouldn’t have artistic value. However, Casey and various other artists created artistic pieces by combining chaos with some constraints, which is simply amazing. Also, these artworks are closely related to algorithms and technology, which I am particularly interested in.

When I heard about combining randomness with art, I immediately thought of the infinite monkey theorem. This theorem states that, given an endless amount of time, a monkey randomly typing on a typewriter can type out anything, including Shakespeare’s “Hamlet” word for word. Changing to computed art instead of typing would mean randomly distributed pixels on a canvas can produce artworks like “Mona Lisa” to a specific resolution. Casey’s works are like using programming algorithms to give instructions to the “monkey” while maintaining its freedom to an extent so that it could produce abstract pieces of art. The algorithms also provide interactivity to artworks that are otherwise impossible in traditional art pieces. Therefore, the artist’s job is no longer creating art itself, but generating rules for the “monkey” to enter the art piece’s basic building blocks randomly. This is also very intriguing to me.

The concept:
For this assignment, I tried to implement some dynamic functionality while keeping the design visually appealing. So, I implemented two backgrounds that basically reflects my two main areas of interest, coding and design. The design background is a display of randomly-oriented “Fady” texts of different colors. The other background follows the same idea but displaying binary number instead. Also, another indicator of my identity is the text written on the hoodie that also changes by switching between both roles. A viewer can switch between the two backgrounds by clicking the two buttons on both sides of my character.

A highlight I am proud of:
The most important part of my portrait is the possibility to switch between both backgrounds. So, I am proud of this part of code that where I used functions to implement my idea.

The Sketch:

Future improvements:
While I am proud of doing this kind of art, I find the face doesn’t look like mine. So, some future improvements or recommendations include re-creating a character that looks more like me.

 

For the self portrait assignment I had the idea of recreating the painting “The Son of Man” by René Magritte. What I appreciate about the painting is its simplicity and the way it could be worked in the project. The general idea of the painting can be easily recreated in the library, even with simple shapes. In other words, it might not look aesthetically pleasing, but anyone that knows the painting would be able to recognize it here. Moreover, the fact that there is an apple in front of the face opens many fun possibilities that could be drawn. I wanted something silly so I just went with a stick face that appears when the screen is clicked.

In terms of code there is nothing exceptional that could be highlighted. I guess I am proud that I managed to make something that looks decent, although I know I will do way more once we progress in class. However, here is the simple onclick toggle to switch between apple and face that can also be seen in the documentation.

if (mouseIsPressed == true) {
  if (mouseButton == LEFT) {
    strokeWeight(0)
    fill(0);
    circle(-40, -20, 20) // left eye
    circle(40, -20, 20) // right eye
    rect(-30, 40, 60, 20); // mouth
  }
}
else {
  fill(140, 174, 152);  // apple
  ellipse(1, 10, 150, 140);
}

In the future I will make sure to add more interactivity and utilize vertexes for better drawings.

For this assignment, the task was to create a self-portrait, and I’ll admit I’m someone who can’t draw at all. So, I approached this assignment with a mixture of excitement and nervousness and I decided to keep my self-portrait simple yet cute, which I hope would come across effectively.

I began by sketching the outline for the head and hair. It started off decently, but I faced significant challenges when it came to layering various shapes to achieve the correct hair texture. After a few tries, I eventually managed to get it  right.

So initially this is how my portrait looked like

And this is what my final portrait looks like

As I mentioned before, I take pride in the part of the code that allowed me to create the hair, even though it might not be particularly intricate. The layering aspect was a challenging but rewarding aspect of this assignment.

Working on this project was a delightful experience because it made me realize that while I might struggle with drawing on paper, I can create something visually appealing using Processing. I particularly enjoyed adding interactivity to my portrait, as I believe it adds an interesting dimension to the work. While I am satisfied with my final submission, there are a few areas I would like to improve upon. One of them is creating a more detailed body for my self-portrait since I kept it relatively simple this time.