Category: Spring 2024 – Aya (Section 003)

For this assignment, I tried to utilize the programming concepts and primitive shapes to create a self-portrait. This involved the use of rectangles, ellipses and circles. I used this assignment to showcase what we have learned thus far, while simultaneously ensuring that it reflected my personal style.

Concept:

The main concept of the self-portrait is to capture, express, and translate basic P5 programming concepts into a visual representation of my main facial features within a sketch. In this sketch, my aim was to emphasize simplicity and minimalism, which can be seen through my focus on the basic features of the face like my skin, eyes, mouth, etc. The concept of simplicity and minimalism can be further seen in the color choice of the sketch. The muted pink, white, and browns create  ‘visual harmony’ that captures the essence of my features and the sketch as a whole. 

The process of creating this sketch involved a lot of rereading lecture notes and practicing outside of class, specifically with shapes. I initially struggled a lot with understanding how to position shapes and manipulate them to achieve my desired visual outcome, specifically the different parameters for each shape. I managed to overcome the initial struggle by playing around with the shapes and parameters. With that being said, the code I was most proud of was definitely the code that created the main facial features in my sketch due to the fact that it showcases my developed understanding of the shapes’ spatial relationships. 

Here is the code that demonstrates my understanding of the shapes’ spatial relationships: 

//Base of Eye
  fill('white')
  stroke(0);
  strokeWeight(1);
  ellipse(175, 175, 50, 25);
  ellipse (276, 176, 50, 25);
  
//Pupils
  fill ('rgb(83,29,29)')
  strokeWeight(1);
  ellipse(175, 175, 25, 25);
  ellipse (276, 176, 25, 25);
  
//Pupil Detail
  fill('white')
  ellipse(170, 170, 10, 10);
  ellipse (272, 170, 10, 10);
  
//EyeBrows
  noFill()
  strokeWeight(1.5)
  arc(175,150,40,10,PI,0); //left
  arc(275,150,40,10,PI,0); //right

//Nose
  fill('rgb(255,227,193)')
  strokeWeight(1);
  ellipse(228, 200, 20, 30);
  
//Smile
  fill('#D96771')
  arc(228, 240, 60, 50,0, PI, PIE);

 

In my code, I played around a lot with different widths, heights, x-axes, and y-axes to create a cohesive sketch. The time it took me to actually understand the different shapes’ spatial relationships allowed me to effectively understand not only P5 as a language but also how different shapes can be related to one another. In a sense, this time allowed for me to explore the intricate relationship that these different shapes have with each other, fostering a more holistic understanding of both the visual image the shapes created and programming principles. 

Despite the initial struggle, I felt really comfortable with functions such as “fill”, “stroke”, and “strokeWeight.” These functions allowed me to manage the color fillings, outline, and line thickness, helping me confidently add depth to my sketch. This helped me a lot when I was initially struggling with the shapes and their parameters as they provided me with a framework that enabled me to enhance the overall visual impact of my sketch. 

My Final Sketch: 

Reflection:

In terms of improvements, I think I can work on playing around with styles more. I feel like if I was given longer to work on this, I would most definitely would have added special styles and effects to the different shapes in my sketch. I would potentially add more complex shapes such as a shape for eyelashes or potentially control statements to create a User Interface design that would allow for the shirt to change color, adding more complexity to my sketch. Even with my ups and downs, this assignment most definitely made me more excited to learn more about how I am able to use P5 to generate effects and animations, particularly with shapes.  I enjoyed this process and cannot wait to learn more about creating ‘non-stationary’ sketches, where movement is the central theme of the sketch, allowing me to create complex designs and user interactions. 

I vividly remember the moment I got into NYUAD. It was the happiest day of my life, and I felt immensely proud of myself. My identity is now closely intertwined with NYUAD, which inspired me to create a self-portrait in the style of a yearbook. I found the NYU colors in RGB on the internet, including NYU violet for the background and Ultra violet for the NYU merch sweatshirt. I chose to draw myself wearing NYU merch for the NYUAD yearbook photo.

What I’m particularly proud of is the code I wrote for displaying the text. On the left side, it reads “NEW YORK UNIVERSITY,” and on the right side, “CLASS OF 2027.” This coding task was special to me because it involved elements not covered in our classes. As someone with no prior experience in coding, I relied on the reference page and did some web surfing to figure out how to rotate the text and adjust its style, alignment, and size. In the process of learning how to rotate elements in p5.js, I discovered new functions such as push() and pop(), which allow settings and transformations to be applied to specific parts of the code. It was a rewarding experience to implement my vision into the code independently.

//New York University
  push()
  strokeWeight(3)
  noStroke()
  textAlign(CENTER)
  textSize(30)
  textStyle(BOLD)
  angleMode(DEGREES)
  translate(55, 200)
  rotate(270)
  fill('white')
  text('NEW YORK UNIVERSITY', 0, 0)
  pop()
  
  //CLASS OF 2027
  push()
  strokeWeight(5)
  stroke(color('white'))
  textAlign(CENTER)
  textSize(50)
  textStyle(BOLD)
  textStyle(ITALIC)
  angleMode(DEGREES)
  translate(340, 200)
  rotate(90)
  fill('white')
  text('CLASS OF 2027', 0, 0)
  pop()

For future improvements, I’m considering making this self-portrait more interactive. I plan to add code that will change the NYU merch in the portrait to different outfits when clicked, offering various clothing options.

Concept

The assignment was to create a self-portrait using p5.js. I began experimenting with various shapes we’ve covered in class. Eventually, I drew inspiration from a self-portrait and opted to incorporate circles, ellipses, arcs, and quads into my portrait. I selected a canvas size of 450 by 450 and to showcase half of my body, thereby emphasizing the face as the primary focal point of the portrait. Alongside visual elements, I aimed to represent myself by including my name and the name of the university using text. My aim was to craft a portrait that is visually pleasing and easy on the eyes. To achieve this, I chose lighter colors that harmonize well with each other across the entire canvas.

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

// Eyebrows
noFill();
arc(177,220,30,10,PI,0); //left
arc(270,220,30,10,PI,0); //right

// Nose
line(224,260,236,270); //top
line(236,270,224,270); //down

// smile
fill(0);
arc(227,287,70,60,0,PI);

Embedded sketch

Reflection and ideas for future work or improvements

I think I can enhance this piece by incorporating interactive elements to make it more engaging for the viewer. Throughout the creation process, I encountered challenges with coding the hair and adding intricate details to the portrait. Moving forward, I aim to refine these aspects and imbue my future artworks with greater intricacy and depth.

For this assignment, we were asked to create a self-portrait using p5.js. I started by looking into the listed self-portraits and previous students work. I was heavily inspired by a few of them and later incorporated a few styles from their portraits. [1. https://editor.p5js.org/Sarthak-Malla/full/3NRqaQVKQ, 2. Koala portrait, 3. Assignment 1: Self-portrait]

I wanted to have a full-body portrait. However, I could not settle on one. Later, I came across this portrait online and decided to follow a similar structure. I initiated the process by sketching a rudimentary outline, focusing initially on the facial features. I used the bezier for the eye brows and the curveVertex for the hair. For the bezier shape, I used this tutorial. In the rest of the portrait, I just used the primitive shapes.

Each cell is a dynamic entity, its behavior governed by its position and the cursor’s proximity. The canvas isn’t just a static backdrop but a living part of the portrait, changing its hues and vibrancy in real-time. Each cell on the canvas pulsates with an oscillating brightness, creating a mesmerizing wave effect. This is not just a pre-programmed animation; the cells also react to the position of your mouse, creating an interactive dance of light and shadow.

function drawBackground() {
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < columns; c++) {
      let distance = dist(mouseX, mouseY, c * cellWidth, r * cellHeight);
      let offset = map(distance, 0, sqrt(sq(width) + sq(height)), 1, 0);

      let wave = (sin(time - c * r * 0.1) + 1) / 2;
      let brightness = map(wave, 0, 1, 100, 255) * offset;

      cells[r][c] = brightness;

      fill(brightness * 0.9, brightness * 0.7, brightness); 
      noStroke();
      rect(c * cellWidth, r * cellHeight, cellWidth, cellHeight);
    }
  }
}

The eyes follow your cursor, adding a layer of depth and engagement. The mouth opens and closes, reacting to the cursor’s vertical position, making the portrait not just seen but also felt.

function drawMouth() {
  noStroke();

  // calculate the openness of the mouth based on mouseY position
  let deltay = ((400 - mouseY) / 400) * 13 + 6;
 
  if(deltay <= 9.5) deltay=9.5;

  // outer mouth (lips)
  fill(255, 150, 122); // color for lips
  ellipse(200, 173, 27, deltay);

  // inner mouth (white part to represent teeth or inside of mouth)
  let innerMouthHeight = deltay - 2; 
  fill(255); // white color for the inner mouth
  if (innerMouthHeight > 8) {
    // show inner mouth only if it's significantly open
    ellipse(200, 173, 20, innerMouthHeight);

    // black line to split the white part (teeth or mouth separation)
    if (innerMouthHeight > 10) {
      fill(0); // black color for the separation
      let separationHeight = 4; // height of the separation line
      rect(200 - 10, 173 - separationHeight / 2, 20, separationHeight, 10); // centered black line
    }
    else {
      fill(0)
      let separationHeight = 1; // height of the separation line
      rect(200 - 10, 173 - separationHeight / 2, 20, separationHeight, 10); 
    }
  }
}

While working, I couldn’t figure out the nose style. Most portraits that I have seen use triangles or similar shapes. I found this portrait to have a very distinctive style, which I followed. Creating the hair shape took a lot of time for me. I am still not particularly happy with the hair. I wanted more realism for the hair shape.

In the future, I want to create a Lego character resembling my character and try to create a self-portrait based on the Lego character, which I believe would be easily achievable using the primitive shapes.

My name in Arabic (الريم) means deer, so for this assignment, I decided to code a deer as a self-portrait.

It was particularly challenging to place the ears in the right position. For that, I had to use the translate and rotate functions. This is something that I am proud of as we have not covered this concept in class yet.

  push();
  translate(130, 355);
  rotate(HALF_PI + QUARTER_PI);
  arc(0, 0, 30, 25, 45, TWO_PI, PIE);
  pop();
  fill('rgb(161,92,92)');
  ellipse(180, 300, 30, 110);
  push();
  translate(180, 360);
  rotate(QUARTER_PI);
  fill('rgb(105,27,27)');
  arc(0, 0, 20, 20, 45, TWO_PI, PIE);
  pop();
  ellipse(220, 300, 30, 110);
  push();
  translate(220, 360);
  rotate(QUARTER_PI);
  fill('rgb(105,27,27)');
  arc(0, 0, 20, 20, 45, TWO_PI, PIE);
  pop();

For improvements, I could make the deer stand up if it is hovered on for interactivity. I could also try making it run sideways with additional sprites or make it move with the user’s mouse movement.

Concept:
It’s still during winter so I thought I’d make something that reflects the weather and personally, I love the cold. Designing the portrait is not too difficult. The character only needs a puffer jacket and a beanie hat. Winter is the season when colors are not vibrant, so I go for something that’s neutral such as orange/brown for the beanie hat and a little bit blue for the puffer jacket to make the outfit stand out. The character I created is a guy who’s feeling the holiday spirit. He enjoys other people’s company during the holiday season. You can see the glow in his eyes; he’s smiling back at you. He’s waiting for you to welcome him inside your house, because “Baby, it’s cold outside!”

A highlight of some code that I’m particularly proud of:

// nose_1
strokeWeight(2);
arc(185, 125, 25, 100, 0, -30);
noFill();
  
// nose_2
strokeWeight(2);
arc(205.5, 159, -30, -45, -30, -10, OPEN);
noFill();

// mouth_lips
noFill();
arc(190, 210, 70, 10, 0, 1/2*(HALF_PI) + 1/2*(HALF_PI));

// left_ear
fill("rgb(251,205,159)")
arc(124, 165, 25, 50, -30, -20.5);
noFill();
  
// right_ear
fill("rgb(251,205,159)")
arc(297, 160, 25, 50, -2, -3.9);
noFill();

Embedded sketch:

Reflection:
Overall, this is a simple enough sketch that incorporates many shapes I learned in class. I particularly practiced creating the arcs a lot, in figuring out the right arcs. Arcs are more difficult to create than other shapes so this part took me a lot of time.

Ideas for future work or improvements:
I want to add the gradient for the background. I also want to add more details in the background such as the leafless trees in the winter and the streetlights. These would require shapes more difficult to create than the ones we learned in class.

I particularly want to add interactivity for the snow; something like the snow spreads out or bounces off wherever the cursor moves. I also want to add randomness to the snow every time I generate the code as well. And I want to add movement to the snow, making it fall vertically in a natural way.

When working on this assignment, my goal was to create an image of myself with round figures. Therefore, I tried to use ellipse, circle, and arc for most of the design and limit the use of shapes with sharp or straight edges. Even when I used shapes such as rectangle, I made the corners round so that they are not sharp. To add on, another concept of this assignment was using pastel colors. Except black, all colors aren’t vibrant and I aimed to use “soft” colors throughout coding.

A section of code is provided below and I am particularly proud of them because it was my first time using ‘arc’ and ‘text’ codes. With ‘arc’ code, I initially struggled to use it because I wasn’t sure how to use PI in the code. However, with trial and error, I was able to get a grasp of it and utilize it throughout the assignment. Also, after I finished coding for the self-portrait, the upper part of the canvas was empty and I used the ‘text’ code to fill in the spaces.

Overall, I am satisfied with the outcome of the code. Although it doesn’t necessarily look like me, I am happy that my code generated a picture of a person. For improvements, I would like to learn how to code so that the eyeballs move with the mouse. Also, I think it would be interesting to let the color of the shirt change when the user clicks on the shirt. In general, making the product more interactive would make it more entertaining and dynamic.

//bang
fill('black');
arc(250, 230, 180, 175, PI, PI+PI);

// left eye
fill('white');
circle(210, 260, 40);
noStroke();
fill('black');
circle(210, 260, 22);

//left eyebrow
stroke('black');
noFill();
arc(210, 237, 30, 10, PI, 0, OPEN);

//text
textSize(50);
text('self-portrait', 125, 90);
textSize(70);
text('☀️', 30, 100);
text('🌿', 400, 100);