Week 1 : Self-Portrait

For this assignment, we were tasked to make a self portrait of ourselves using javascript with simple shapes and other functions we learnt in class and learned through online resources as well.

My thought process for this was simple, I just integrated my facial features and things I wanted to highlight about myself through this self-portrait. One thing I enjoyed adding the side-eye when the mouse is pressed, it was something fun which also incorporated a hint of my personality into my self portrait, and the color of my t-shirt changes from purple (NYU represent) to red to reflect my changing moods. I feel like this exercise allowed me to go back to the basics and I realized how even simple 2D shapes could be used to express complex ideas, for example, cropping a circle into half using a rectangle of the same color as the background to hide it which I used for the top of my head and so on.

One section of my code which I’m proud of is when my portrait side-eyes, mainly cause I spent a lot of time trying out various shapes in different sizes to perfect the side eye, and the colour of my t-shirt also changes to red when the mouse is pressed and goes back to normal upon releasing it. I used simple shapes like circles and rectangles in various colours to make it look like a side-eye along with the mousePressed and mouseReleased functions.

// eyes along with the eye-roll code
  
  if (side_eye) {
    // Draw the new eyes when the flag is true
    fill('white');
    ellipse(145, 140, 25, 14);
    fill('black');
    circle(138, 140, 10); // Pupil
    fill('rgb(255,207,165)');
    rect(131, 131, 27, 8);
  
    fill('white');
    ellipse(195, 140, 25, 14);
    fill('black');
    circle(187, 140, 10); // Pupil
    fill('rgb(255,207,165)');
    rect(182, 131, 27, 8); // Eye reflection
  } else {
    // Draw the original eye shapes if the flag is false
    fill('white');
    noStroke();
    ellipse(145, 140, 25, 14); // Left eye
    ellipse(195, 140, 25, 14); // Right eye

    fill('black');
    noStroke();
    circle(145, 140, 12); // Left pupil
    circle(195, 140, 12); // Right pupil
  }