Category: Spring 2024 – Aaron (Section 001)

This is my first attempt at p5.js. I’ve tried to reflect my personal preferences and appearances in this “self-portrait”. My idea is to portray a Bangladeshi girl with big eyes, dark lipstick, and blush wearing a dress and a necklace. I matched the skin color with my own complexion, and the hair color with my hair highlight’s color. Concept wise I think the intention was to personalize the drawing as much as I can using only the simple shapes like ellipse, circle, arc, rectangles and straight lines. I tried to make the colors pop and to make it very detailed for example the necklace is similar to an actual one that I have with an Emerald stone, then the parting between the hair which is something very prominent in my appearance. Placing the lips and the eyelashes were the most difficult part for me I think.
I added interactivity with a smile formed on the mouth upon mouse-click with the if-else statement and mouseIsPressed function. So if you click on the image the lips change to a smile.
For improvements I think adding interactivity with the eyes opening and closing periodically and having some texts would have been nice. Also maybe making it a full-body self-portrait would be a very detailed development I believe which I intend to work on later. Overall, I loved playing with the numbers and parameters and colors and shapes to make it more and more perfect to the reality.

function setup() {
  createCanvas(500, 500);
  background(255, 182, 193); //Pink background
}

function draw() {
  //Hair
  noStroke();
  fill(90, 56, 37); // Hair color
  arc(250, 140, 200, 180, PI, 0); // Top hair
  rect(150, 140, 200, 300); // Side hair
  
  //Neck
  fill(230, 180, 145);
  rect(200, 260, 100, 70);
  
  //Dress
  fill(220, 0, 100);
  arc(250, 445, 250, 300, PI, 0, OPEN);
  
  //Necklace Design
  noFill();
  strokeWeight(2);
  stroke(255);
  arc(250, 320, 137, 200, 0, PI);
  arc(250, 317, 127, 190, 0, PI);
  stroke(0);
  fill(31.4, 78.4, 49);
  ellipse(250, 416, 9, 12);

  //Face
  stroke(0);
  strokeWeight(1);
  fill(230, 180, 145); //Skin color
  ellipse(250, 200, 170, 195); //Face shape
 
  //Eyes
  fill(255); //White of the eyes
  ellipse(215, 180, 40, 20); //Left eye
  ellipse(285, 180, 40, 20); //Right eye
  fill(0); //Pupil color
  ellipse(215, 180, 10, 20); //Left pupil
  ellipse(285, 180, 10, 20); //Right pupil

  // Eyelashes
  stroke(0);
  strokeWeight(0.5);
  // Left eye eyelashes
  for (let i = 0; i < 5; i++) {
    line(190 + i * 6, 162, 200 + i * 6, 172);
  }
  // Right eye eyelashes
  for (let i = 0; i < 5; i++) {
    line(278 + i * 6, 172,  288 + i * 6, 162);
  }

  // Eyebrows
  strokeWeight(2);
  noFill();
  arc(215, 167, 40, 20, PI, TWO_PI); //Left eyebrow
  arc(285, 167, 40, 20, PI, TWO_PI); //Right eyebrow
  
  //Middle parting of Hair
  strokeWeight(1);
  line(250, 52, 250, 103);
  
  //Nose
  noFill();
  strokeWeight(1);
  arc(250, 210, 10, 15, 180, 90, OPEN); 
  
  //Blush
  noStroke();
  fill(255, 192, 203);
  ellipse(195, 210, 20, 10);
  ellipse(305, 210, 20, 10);

  //Forming a smiley face when mouse is pressed
  if(mouseIsPressed){
    noFill();
    stroke(0);
    arc(250, 225, 80, 45, 120, 103);
    fill(255);
    arc(250, 225, 58, 70, 120, 103, OPEN);
    
  }
  else{
    //Lips
    fill(128, 0, 0); //Lip color
    noStroke();
    arc(260, 250, 28, 12, PI, 0);
    arc(240, 250, 28, 12, PI, 0);
    arc(250, 250, 50, 20, 0, PI);
  }
}

 

Description:
For this assignment, I opted for a straightforward approach to create a self-portrait. The portrait includes various facial features, notably the eyes move horizontally due to the animation, and the eyebrows respond to the eye movement.

Sketch:

Code Implementation:

let eye1X = 170;
let eye2X = 230;
let direction1 = 1;
let direction2 = 1;
let lipYOffset = 0;

function setup() {
  angleMode(DEGREES);
  rectMode(CENTER);
  createCanvas(400, 400);
  background(240);
}

function draw() {
  background(240);

  // Draw the existing elements

  // hair
  fill(41, 38, 31);
  rect(200, 220, 205, 330, 90);

  // shirt
  fill(167, 181, 169);
  rect(200, 380, 190, 270, 40);

  // neck
  fill(245, 227, 176);
  rect(200, 239, 100, 100, 30);

  // face
  fill(245, 227, 176);
  ellipse(200, 150, 150, 175);

  // left eye
  fill(255);
  ellipse(eye1X, 143, 40, 40);

  // right eye
  ellipse(eye2X, 143, 40, 40);

  // left pupil
  fill(0);
  ellipse(eye1X, 143, 15, 20);

  // right pupil
  ellipse(eye2X, 143, 15, 20);

  // mouth
  arc(200, 192, 50, 50, 0, 180);

  // nose
  noFill();
  arc(198, 175, 20, 15, 270, 90);

  // bangs
  noStroke();
  fill(41, 38, 31);
  rect(200, 81, 90, 43, 58);
  strokeWeight(5);
  stroke(41, 38, 31);
  line(150, 115, 175, 115); // left eyebrow
  line(225, 115, 250, 115); // right eyebrow
  strokeWeight(1);
  stroke(0);



  // eye positions 
  eye1X += direction1 * 2;
  eye2X += direction2 * 2;

  // Check if eyes reach the edge and change direction
  if (eye1X <= 160 || eye1X >= 180) {
    direction1 *= -1;
  }

  if (eye2X <= 220 || eye2X >= 240) {
    direction2 *= -1;
  }

  
}

 

Concept:

Considering my beginner coding skills and the project’s deadline, I focused on portraying recognizable features like my curly hair and glasses in my self-portrait. To achieve this, I used circles to mimic the curls of my hair and smooth squares to represent the frames of my glasses. This approach allowed me to create a clear and straightforward depiction of these key features within the technical and time constraints of the project.

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

//Hair
  noStroke()
  fill(0); 
  arc(200, 140, 120, 100, PI, 0); 

//Curls
fill("#181009")
  circle(150, 120, 50)
  circle(180, 120, 50)
  circle(210, 120, 50)
  circle(240, 120, 50)
  circle(245, 120, 50)

 

Embedded sketch:

Reflection and ideas for future work or improvements:

In my self-portrait, I generally feel content with the overall outcome, but there are elements I now recognize could have been improved. After looking at other examples, I realized a missed opportunity in the portrayal of my glasses. I wish I had learned to isolate a specific area for the eyes that would follow the cursor, adding an interactive and dynamic aspect to the artwork.

Another aspect I would revise is the portrayal of my facial features. Initially, I used simple shapes, but now I see the potential for more accurately representing features like my eyes, nose, and mouth. With more advanced coding skills, I could have added detail to these features, making the portrait not just an abstract representation but a more recognizable portrait of myself.

However I look forward to delving deeper into the possibilities of creative coding, pushing the boundaries of what I can create and express.

Concept
I intended for this self-portrait to have a portrait which is fairly accurate but cartoonish, and I also wanted to experiment with many of the commands in the p5js and I chose to do this by making my portrait dynamic. My main focus was the eyes.

 

Highlight

  translate(x, y); //makes the center of the canvas the point from which everything rotates. otherwise it would have been rotating around (0,0)
  // -18 because that is

  // dont ask me to explain this, I got help from the reference of atan2()
  let mx = mouseX - x;
  let my = mouseY - y;

  let a = atan2(my, mx); // atan2 is weird, its atan2(y,x) rather than x,y :/

  let v = createVector(x, y);

  let d = dist(mouseX, mouseY, x, y);

  let d0 = d * constant;

  // the maximum of 18 has to be found manually, so i added the mouseIsPressed if statement below to help

  if (d0 > max) {
    d0 = max;
  }

  v.setMag(d0);
  v.setHeading(a);

  // for debugging magnitude of the vector
  //   if( mouseIsPressed == true) {

  //     print(d0);

  //   }

  translate(v);

First to explain what the code is doing it helps to also use the embedded sketch whilst reading this. The code above is the logic behind the movement of the eyes. The pupils follow the cursor of the user but move further out or further into the pupil based on how far the cursor is from the  center of the eye. I did this to make the eyes more realistic but also to make the overall sketch more interesting and more fun to interact with.  I did this by calculating the angle from the center of the pupil to the cursor (with a bit of help from the p5js reference), then I created a vector who’s origin point is the pupil and I set it’s angle to be the angle from the center of the pupil to the cursor and it’s magnitude to be based on how far the cursor is from the center of the eye but I limited the magnitude. Once the vector was made I had the eyes translate using the vector using the translate() method. To make things a little more neat I put all of it into a function. I did this because I worked on the eyes feature on a separate sketch but with only one eye and then just placed it into a function so that I could easily create two eyes for this sketch.

 

Sketch

 

Reflection

In hindsight there are a lot of things I would have done differently. Firstly, it was only towards the end that I started using functions more diligently and I hardcoded a lot of my values which meant that I no longer had the luxury of changing the canvas size without having to painstakingly go through every shape. Also, I felt I spent a lot of time trying to do the eyes mechanic all by myself, I feel I would have both enjoyed and benefited greatly by working on it with someone else since for a while I was stuck on what to do. In summary, I would make my code more neat in the future and soft-code more of my variables where I can, and lastly, I should try to get help/ideas from others rather than stick only to myself.

For the first assignment I decided to go for a simple self portrait. Not knowing how to code a lot, I went with the flow and took it easy.

I started with a beige ellipse and from there slowly created the whole face. After that, I went for a rectangle for the hair.

This was the end result!

CONCEPT:

I find myself retreating into my thoughts as the first week of school comes to an end, returning to my cherished summer home in Cadaqués, a charming community hidden away on Spain’s coast. “Eli’s Aquatic Dreamscape,” this piece of art, is more than simply a self-portrait; it’s a glimpse into my calm world, where the water is a constant companion that reflects my calmest desires.

My refuge has always been Cadaqués, with its picturesque streets and peaceful Mediterranean. Here, the world above seems to fade away as I plunge into the glistening clean waters, making time seem to stop.

As we sail alongside friends during the golden sunsets, the sea serves as a brilliant backdrop for our companionship as we tell stories and laugh together. And then there’s windsurfing, an exhilarating dance with the wind and waves that embodies both my spirit of adventure and the wild beauty of the village.

“Eli’s Aquatic Dreamscape” is a painting that pays homage to these times and embodies my passion for the ocean and Cadaqués. This piece serves as a reminder of my favorite place amidst the chaos of academic life and is evidence of the serenity that Cadaqués instills in me. It serves as a reminder that there is peace waiting in the embrace of the water, no matter how hectic life becomes.

 

 

  // Hair
  fill(102, 51, 0); // Brown hair color
  arc(200, 155, 200, 100, radians(150), radians(30)); // arch hair
  
  // hair length
  fill(102, 51, 0); // brown hair 
  noStroke();
  rect(110, 160, 40, 150); // left rectangle hair 
  rect(250, 160, 40, 150); // right rectangle hair 

  // Eyes
  fill(255); // White part of the eyes
  ellipse(170, 190, 30, 20); // Left eye
  ellipse(230, 190, 30, 20); // Right eye

  fill(77, 38, 0); // Brown color for the iris
  circle(170, 190, 10); // Left iris
  circle(230, 190, 10); // Right iris

  // Tshirt
  fill('lightgreen'); 
  arc(200, 600, 300, 650, PI, 0, OPEN); // shoulders

  // Mouth
  fill('pink'); // 
  arc(200, 240, 30, 10, 0, PI, CHORD); // smile arch
  
}

Memes from my group of friends. 

 

IMPROVEMENTS:

Future developments could benefit from concentrating on the textural elements in order to more accurately convey the dynamic character of water.

Making hair in my artwork was especially difficult for me. I tried using an arch at first, but I could not figure it out. I finally decided on an arch and two descending rectangles. Incorporating marine life or sports like windsurfing or diving would give my work a more vivid and personal touch, emphasizing my strong bond with the sea and my memories of Cadaqués. This way, the artwork could become more meaningful and realistic.

For this portrait assignment, I decided to include the thing that I love the most, Basketball. My idea was to draw something that represents who I am as well as to add some cool animations which would further enhance the portrait.

It all started of as a simple sketch on a piece of paper where I drew up a rough portrait of me. Then I decided that I wanted to add some personal element to it, so I drew a basketball which I wanted to spin around my hand. This is where I faced my first challenge trying to transfer my idea onto the canvas. Even though it was the hardest thing to do this project, the rotation of the basketball was the most rewarding thing and for that reason I will include it as the piece of code I am most proud of. It can be seen below 🙂

...
  push();
  translate(90, 150);
  rotate(angle);
  drawBasketball();
  angle += 0.04;
  pop();
}

function drawBasketball() {
  fill(255, 165, 0);
  ellipse(0, 0, 100, 100);

  stroke(255);
  strokeWeight(3);
  for (let i = 0; i < 8; i++) {
    let angle = (TWO_PI / 8) * i;
    let x1 = cos(angle) * 45;
    let y1 = sin(angle) * 45;
    let x2 = cos(angle) * 55;
    let y2 = sin(angle) * 55;
    line(x1, y1, x2, y2);
  }
}

After solving the basketball “situation” the process was pretty straightforward and included me just carrying on with the drawing of the face and the facial features, hands and I added a jersey which represents the real jersey I use to play in basketball matches (I wear the number 17).

Before finishing up, I added a little bit of an “NYU Element” where I painted the canvas with the original NYU violet color and added a fun text animation representing the name of our Basketball team.

Overall I felt the process of creating my first project in p5.js was very rewarding and I learnt a lot of things along the way. There is certainly a long way to go and I am pretty excited of what the future holds.

My final portrait can be seen below 🙂