Reflection

For this self-portrait, I wanted to create a clean, simple, and expressive representation of myself, combining basic shapes like ellipses, arcs, and rectangles. The goal was to balance realism and a playful, cartoon-like aesthetic while incorporating distinct features like a small beard, expressive eyebrows, and stylized hair. I focused on ensuring proportionality and seamless transitions between shapes, such as the neck connecting to the head and the shirt integrating an arc and rectangle for a polished look.

I’m proud of how the self-portrait turned out, as it reflects a good balance of simplicity and personal expression. The use of arcs and ellipses allowed me to create distinct facial features, and the small beard adds a unique touch to the design. However, there is room for improvement. In the future, I’d like to experiment with adding shading or gradients to enhance depth and realism. Additionally, I could explore animations, such as blinking eyes or a waving hand, to bring the portrait to life. This project has been a rewarding exercise in creative coding, helping me better understand shape integration and design principles in p5.js.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  // Drawing the neck
  fill(240, 200, 170);
  rect(180, 280, 40, 20);

  // Drawing the head
  fill(240, 200, 170);
  ellipse(200, 200, 150, 180);

  // Drawing the eyes
  fill(255);
  ellipse(170, 190, 30, 20);
  ellipse(230, 190, 30, 20);

  fill(50);
  ellipse(170, 190, 10, 10);
  ellipse(230, 190, 10, 10);

  // Adding eyebrows using arcs for expression
  stroke(50);
  strokeWeight(3);
  noFill();
  arc(170, 175, 40, 10, PI, TWO_PI);
  arc(230, 175, 40, 10, PI, TWO_PI);

  // Drawing the nose
  stroke(150, 100, 80);
  strokeWeight(2);
  line(200, 190, 200, 220);
  arc(200, 220, 20, 10, 0, PI);

  // Adding mouth
  noStroke();
  fill(200, 80, 80);
  arc(200, 250, 50, 30, 0, PI);

  // Adding a small beard below the mouth
  fill(100, 50, 30);
  arc(200, 280, 70, 30, 0, PI);

  // Drawing the hair 
  fill(50);
  arc(200, 150, 160, 120, PI, TWO_PI);
  rect(120, 150, 20, 80);
  rect(260, 150, 20, 80);

  // Drawing ears on both sides of the head
  fill(240, 200, 170);
  ellipse(125, 200, 20, 40);
  ellipse(275, 200, 20, 40);

  // Drawing a shirt 
  fill(100, 150, 200);
  noStroke();
  arc(200, 347, 100, 100, PI, TWO_PI);
  rect(150, 345, 100, 50);
}

For this project, I created an animated self portrait using  p5.js. The design uses basic shapes like ellipses, arcs, triangles and lines to create the structure of the face.

My 2 favourite things that I spent so much time on is the eyelashes as I had  a hard time adjusting the angles and the coordinates which I couldn’t just calculate, I had to just guess where to place them and see how it looks after running (trial and error).

Here’s the code snippet for the eyelashes:

stroke("Black");
strokeWeight(3);
line(160,170,150,145);
line(240,170,250,145);
line(180,170,190,145);
line(220,170,210,145);
line(170,170,170,142);
line(230,170,230,142);

I also like the interactivity of the portrait. By clicking the mouse, the eyes blink, and the face smiles and upon clicking again the face returns back to its original state.

Here is the portrait:

One thing that I’d like to improve is making the portrait more realistic as that’s what I wanted at first but couldn’t do as I had such a hard time figuring out the coordinates  and the best shapes to use to create the features (ex: the blush on the cheeks and the hair).

Concept

For the first assignment, I will present a simplified picture of myself using p5.js. I chose to cover my eyes in the portrait because I wanted to symbolize introspection and the idea of seeing beyond appearances, as I used in other mediums.

The highlight of the code I am proud of is this snippet:

//small detail in Abaya
 stroke('rgb(32,32,32)'); 
  strokeWeight(5);
 let dx = 256 - 210; // Difference in X
  let dy = 399 - 410; // Difference in Y

  // Adjusting both points by the calculated difference
  line(210 + dx, 410 + dy, 1006 + dx, 1198 + dy)

This is because it really required me to understand the coordinates to position the detail. Finding an accurate x and y coordinates to perfectly align the detail was pretty challenging, with the errors ruining the other details of the portrait. However, using console.log to track positions and fine-tune them allowed me to get it right.

Embedded Sketch

Reflections

 I think I need to improve more on the colors and the use of shapes since my current portraits lack depth and realism. In addition, I would also add a background and add a bit more details in areas like the headscarf. While the task comes with a lot of challenges and debugging to do, I do learn more about JavaScript than I realized, and hopefully, as I learn how to utilize other functions, like the console.log() function, and line(), the processes of learning JavaScript will slowly become easier.

The purpose of this assignment is to make a self-portrait using p5.js, I chose to create a visual representation of a swan. I wanted the sketch to portray a serene scene where a swan floats on water and the light blue background acts as the sky; using basic shapes such as circles, triangles, and rectangles to create a nice illustration.

I find the following part of the code the most interesting because I had to try many positions to fit the image I wanted to achieve on the swan’s head

The layering of elements, such as the neck and head on the body, effectively mimics a real swan, while the colors chosen – light blue for the background, dark blue for the water, and white for the swan – create the harmonious visual effect I was hoping to achieve.

I plan to introduce several improvements to increase realism, such as adding shading or gradients to the swan’s body and neck to enhance depth and incorporating ripples in the water to give it a more dynamic look. Animations could also be a great idea to make the swan float smoothly on the water or move its neck gracefully.

The first assignment for Intro to IM asked us to make a self-portrait of ourselves using p5.js. I was really excited to do this assignment, and I enjoyed playing around with the different shapes and colors.

I wanted to create a nice background for my portrait, so I began by making a sunset scene. I used multiple rectangles to simulate the effect of a gradient, and then experimented with the colors to create a cohesive color scheme. I then used circles to simulate clouds and added more rectangles to create a window frame.

However, it soon turned out that making the background was the easy part, as I then had to start making myself.

I started by making the body. I used two shades of gray for the jacket to give my portrait some depth. I then used a similar technique with the shades of blue to create my scarf.

Making the face was objectively the hardest part, as getting the proportions right was very difficult. I ended using the quad() function to create the shape of my glasses, then filled them in with a semi transparent white shape to simulate glass. Although making the face was challenging, it was the most satisfying part, as it was rewarding to see all the aspects come together.

Throughout the assignment, I was struggling when trying to get the x and y-coordinates precisely where I wanted them. In the end, I used console.log to track the coordinates I wanted when I clicked in a specific place. While it was still challenging nonetheless, using this function made it much faster to implement.

Overall, I really enjoyed the process of doing this assignment, as it was very interesting to see the way I could use basic shapes to create something meaningful.

The concept :

I got the idea from this activity they used to make us do in middle school. Basically a message is written in blue, obscured by red scribbles. On placing a red cellophane paper over the design, we can see the hidden message. I wanted to do something similar to this image shown below (taken from JIANG’S BLOG – WordPress)

The design itself is a puzzle piece, where the portrait is hidden under the red scribbles. On viewing it over the red circle, the portrait is revealed underneath. I wanted to make it like a puzzle- me hidden under the red scribbles. Basically the red scribbles are absorbed in the circle, revealing the blue portrait. I drew it using most of the line tools, like arc, curves and quadrilaterals. I made it in this because I’ve heard a lot of people say that I am very hard to read (P.S; I have no idea why, I’m an open book I swear). Basically, I wanted to capture that essence into my portrait, in a way that is interactive to the users.

A highlight of some code that you’re particularly proud of :

I’m proud of the abstract style of the portrait, it’s pretty cool to look at (if I can say so myself) It was a bit hard to draw it with the curves and figure out the points exactly, but once I got the hang of it, it was pretty fun to do! I also really love the transparent red decoder circle; I feel like I managed to bring the paper and pen version into code pretty well!

Embedded sketch :

Reflection and ideas for future work or improvements :

Maybe I would make the portrait itself more detailed. Maybe once I understand how to code better I can improve it!! I also wanted to try and draw it in one continuous line, but that was a bit hard to do.

Reference: I used a picture of myself for official documents to help me vizualize the self-portrait

Reflection

This task was a really fun and creative way to dive into p5.js. At first, I was a bit nervous because the idea of creating a portrait entirely through code felt like a challenge. However, as I started working with the basic shapes, I realized how much fun it was to build my self-portrait step by step.

I began with simple shapes like ellipses for the head and hair, and a rectangle for the fringe. It was amazing how easily I could combine these basic elements to create the foundation of the portrait. Once I had the basic structure, I worked on adding details like the eyes, eyebrows, and nose.

My favorite part of the process was creating the blush effect on the cheeks. I used lines to make small strokes under the eyes, which gave the face a lot of character and expression. It felt like a small touch, but it made a big difference in bringing the portrait to life.

By the end of the task, I was surprised by how much I learned about coding and how creative you can be with simple drawing functions. One thing that bothered me is how time-consuming it can be to find the right “coordinates” on the canvas. It would have been helpful if I could hover over a specific spot where I’d want my object to start and see the coordinate number.

function setup() {
  createCanvas(400, 400);
  background(255, 182, 193);

  // Hair
  fill(110, 70, 50);
  ellipse(200, 225, 200, 290);
  
  // Head
  fill(240, 209, 190);
  noStroke();
  ellipse(200, 200, 150, 180);

   //Fringe 
  fill(110, 70, 50); // Same color as hair
  noStroke();
  rect(140, 110, 120, 30); 
  
  // Eyes
  fill(255);
  ellipse(170, 200, 30, 20); // Left eye white
  ellipse(230, 200, 30, 20); // Right eye white
  fill(150, 75, 0);
  ellipse(170, 200, 10, 10); // Left iris
  ellipse(230, 200, 10, 10); // Right iris
  
  // Blush under left eye
  stroke(255, 182, 193); // Light pink color for blush
  strokeWeight(2);
  line(150, 220, 155, 225); // First line
  line(160, 220, 165, 225); // Second line
  line(170, 220, 175, 225); // Third line

  // Blush under right eye
  line(220, 220, 225, 225); // First line
  line(230, 220, 235, 225); // Second line
  line(240, 220, 245, 225); // Third line

  // Eyebrows
  stroke(80, 50, 40);
  strokeWeight(4);
  noFill();
  arc(170, 190, 40, 30, PI + QUARTER_PI, TWO_PI - QUARTER_PI); // Left   eyebrow
  arc(230, 190, 40, 30, PI + QUARTER_PI, TWO_PI - QUARTER_PI); // Right   eyebrow


  // Nose
  noFill();
  stroke(150, 100, 90);
  strokeWeight(2);
  beginShape();
  vertex(200, 205);
  vertex(195, 225);
  vertex(200, 230);
  endShape();

  // Mouth
  noStroke();
  fill(180, 80, 90);
  arc(200, 260, 50, 30, 0, PI);

  // Earrings
  fill(255, 255, 0);
  ellipse(125, 220, 10, 10); // Left earring
  ellipse(275, 220, 10, 10); // Right earring

   // Shirt
  fill(245, 245, 220);
  rect(140, 340, 120, 80);
  arc(200, 340, 120, 80, PI, 0);
  
  // Neck
  fill(240, 209, 190);
  rect(175, 270, 50, 35);

}

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.