Category: Spring 2024 – Aaron (Section 001)

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 🙂