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
  }

 

 

Concept

My main objective was to create an accurate self-portrait of myself. To achieve this, I started by taking a photo of myself at the beginning of the assignment and then attempted to capture all the details I saw in the photo using p5.js. The challenge arose when it came to my wavy (almost curly) hair, as I needed to accurately depict its shape. Additionally, I spent a considerable amount of time figuring out what kind of facial expression to depict, I ended up doing “closed eyes” look since it looked better than the “open eyes” to me. I also focused on maintaining the correct proportions of my body in the portrait. In the end, I was pleased with the minimalistic aesthetic that emerged, as it seemed to align well with my personality.

Demo

Code Highlight (Hair area):

So this part is the part of the code that I am most proud of, maybe due to the fact that I spent so much time on it 🙂

It was the most challenging part of the code due to various reasons like lack of p5.js knowledge (I had to look a lot of stuff up), trying to make different shapes work in harmony and perfectionism stalling the productivity.

At the end, I tried to imitate a middle-part hairstyle using arcs and triangles (might not be the best way but I am fine with the end result).

Here’s the code snippet of the Hair class:

// Hair class 
class Hair {
  draw() {
    fill(0, 0, 0); // Hair color
    noStroke();
    arc(300, 205, 197, 170, PI, 0); // Top hair arc
    fill(228, 177, 171); // Skin color
    arc(300, 210, 50, 50, PI, 0); // Forehead section (mid-part separation)
    fill(1, 1, 1); // Hair color
    triangle(201, 205, 275, 205, 175, 230); // Left side bangs
    rect(200, 205, 15, 45); // Left side hair sideburn
    rect(385, 205, 15, 45); // Right side hair sideburn
    triangle(326, 205, 400, 205, 430, 230); // Right side bangs
  }
}

Reflection & Improvements for Future Work

The experience was quite enjoyable for me because, I was exposed to p5.js before, but it never went beyond some simple sketches, just messing around with the software, nothing serious.  Additionally, it felt like I was opening a new realm of coding. After completing handful of courses in Computer Science curriculum, coding started to associate with efficiency and work, not necessarily artistic vision/creativity, so I was delighted to work on something creative using code.

I always wanted to try to do digital portraits, previously I only did pencil portraits, but I never had the time or reason to do it until now. Discovering that I could make art with code was a delightful surprise. It made me realize I had missed out on a great way to express myself creatively. This experience has sparked a new interest in combining technology and art in my work, and I’m eager to explore this intersection more in the future.

Concept

In my self-portrait, I wanted to take a different approach and portray myself as who I want to be rather than who I am in real life. Since young, I have read numerous comics and enjoyed watching animated movies: my favorite being “Zootopia”.  Thus, I imagined myself being in the movie, and I call him : Mr. preachy cow! He gives motivation to those who may be having a bad day and tries to make everyone’s day better!

In order to do so, I needed to implement anthropomorphism and try to five Mr. preachy cow some human characteristics such as wearing a suit or being able to communicate in human languages.

I chose to use circles as my primary medium of drawing as it is the most friendly shapes out of all as there are no edges: representing Mr preachy cow’s inclusive personality. Also, I wanted to change colors of his facial features and the background to show his ability to embrace all cultures and diversity.

Demo

Code Highlight

function checkRepeat(arrayColor, colorCheck){ 
  //checking whether colors are repeating by deleting already assigned color values from the array
   for(let i=0;i<arrayColor.length;i++){
      if(arrayColor[i]==(colorCheck)) {
            arrayColor.splice(i,1);
      }
}
}
function doubleClicked() { //double click function to open a new page
 window.open('https://www.pinterest.com/hibluchic/inspirational-quotes/'); //opening a pinterest page full of inspirational quotes
}
function mouseClicked() { //mouse click function to generate random moticational words
    colorRepeatCheck = '';
    randomColorCheck = [];
    //inserting all the color values to the array that would be used to generate random color values 
     for(let i=0;i<randomColor.length;i++){
      append(randomColorCheck,randomColor[i]);

    }
    sentenceDisplay = random(motivationalWords); //generating random text value from the array to display when clicked
  
    backgroundColor = random(randomColorCheck);  //generating random color value from the array to change the background color when clicked
    checkRepeat(randomColorCheck,backgroundColor); //deleting the color of the background from the array to prevent being repeated

    faceColor = random(randomColorCheck); //generating random color value from the array to change the face color when clicked
    checkRepeat(randomColorCheck,faceColor); //deleting the color of the face from the array to prevent being repeated
  
    sclerColor = random(randomColorCheck); //generating random color value from the array to change the scler color when clicked
    checkRepeat(randomColorCheck,sclerColor); //deleting the color of the scler from the array to prevent being repeated

    irisColor = random(randomColorCheck);  //generating random color value from the array to change the iris color when clicked
    checkRepeat(randomColorCheck,irisColor); //deleting the color of the iris from the array to prevent being repeated

    eyeBrowColor = random(randomColorCheck); //generating random color value from the array to change the eye brow color when clicked
    checkRepeat(randomColorCheck,eyeBrowColor); //deleting the color of the eye brow from the array to prevent being repeated
  
    mouthColor = random(randomColorCheck); //generating random color value from the array to change the mouth color when clicked
    checkRepeat(randomColorCheck,mouthColor); //deleting the color of the mouth from the array to prevent being repeated

}

I am most proud of creating my own function to prevent the colors to repeat when changing. I purposefully made such function to avoid Mr. preachy cow to have the same colors for all his facial features : including his background. Even though the colors are generated randomly when mouse is clicked, there is still a possibility for the colors to be repeated; so I have implemented a function to prevent such event from happening.

Moreover, I made Mr. Preachy Cow to say motivational words when clicked and lead the visitor to a Pinterest page full of inspirational quotes as he is “Mr. Preachy Cow” after all!

Reflection and Possible Improvements

Even though it was fun making my own “Mr. Preachy Cow”, it took me a lot of time getting used to the x- and y-coordinates of the p5.js when drawing as I was not used to the coordinate system. Some of the shapes drawn on the self-portrait are not exactly symmetric and there are rough edges on his ears which could be better polished.

In addition, I think there could be more fun elements used when displaying the texts by making the texts move in certain ways so the user would have more fun with Mr. Preachy Cow.

Despite few regrets and possible improvements I have on my first assignment, I am happy to learn about basics of interactive media and looking forward to develop my learning to create more refined works in the future.

Concept

aldskfjasf

 

You guys are great

Concept of the Self-Portrait
In this self-portrait, I tried to represent a more simplified and stylized version of me through emphasizing more geometric shapes and clean lines. The hijab is a very big part of my identity, and through soft curves and bold colors, I tried showing elegance. Therefore, the intention was to be harmonious and balanced in that composition-representative with minimum design. In the future, I would like to add more detailed features, such as patterns on the hijab or dynamic animations that could give it more personality. even making it seem more decent and realistic

The self-portrait uses a hijab which is drawn in arcs that wrap comfortably, gracefully around the face, I was trying my limits to make it creative. reflecting comfort and simplicity. The minimalist approach uses clean shapes for eyes, eyebrows, nose, and a subtle smile to show very expressive yet understated design. This artwork used soft, warm skin tone colors versus deep black from the hijab, which really exudes balance and harmony. It can be customized for any given user’s preference-for example, using a different-colored hijab color by calling fill(), complex patterns, or gradients for texturing. Future enhancements could include animating the hijab to simulate a fabric-like flow, adding a sunlit room or cultural motifs as a background to enrich the narrative, and introducing interactivity, such as clicking to change hijab colors or toggling facial expressions. These features and enhancements aim at creating a dynamic and meaningful representation of identity and creativity.

// Draw hijab
fill(0); // Black hijab
arc(200, 200, 150, 200, PI + QUARTER_PI, TWO_PI – QUARTER_PI); // Main hijab
arc(200, 230, 200, 280, PI + QUARTER_PI, TWO_PI – QUARTER_PI); // Outer hijab layer

this was the hardest dealing with this self-portrait since I couldn’t make it seem more realistic