Month: January 2023

Concept

My sketch is inspired by something that is a big part of my life – Tennis. I could go hours and hours watching or playing it and not even notice the time pass by. The reason I love this sport so much is that it gives me a chance to escape from my stressful and work-intensive routine and not think about anything besides hitting the ball and feeling the satisfaction of it smacking against my racket strings :p

So I thought why not make a self-portrait of me holding a racket on a tennis court while juggling a ball on it.. indefinitely 🙂

Implementation

I tried to play around with shapes as much as I could and place them until they were in the right position. However, some things like making the ball bounce and creating the net in the background are worth mentioning here.

To make the ball bounce, I created a variable called ballSpeed and added it to the y value of the ball inside the draw() function to make it move. However, to keep it inside certain bounds, I made use of an if statement and as soon as it reached one of the bounds, I reversed the direction of the ballSpeed variable, this made it “bounce” within certain bounds.

fill("#AEDA38");
ellipse(x + racketOffsetX, y + racketOffsetY, 30, 30)

// make the ball rebound within a certain area
if (y <= 350 || y > 390) {
  ballSpeed = -ballSpeed;
}

y -= ballSpeed

For making the net, I used a simple for loop to make horizontal and vertical lines. This saved me a lot of time and I feel it was worth mentioning here.

// vertical lines of the net
stroke(10);
strokeWeight(1);
for (let i = 0; i < 50; i++) {
  line(10 + 10*i, 207, 10 + 10*i, 275)
}

stroke(10);
for (let i = 0; i < 8; i++) {
  line(0, 207 + 10*i,  width, 207 + 10*i)
}

Reflection

I found this homework more of an activity than an assignment because I enjoyed every moment of crafting it and making it come to life. I wanted to implement a lot more things, like making the scene transform into one where I would be holding a frying pan in place of the racket and wearing a chef’s hat in place of the tennis cap with a kitchen in the background (yes, I recently discovered that I have a thing for cooking). The ball could be an egg or a pancake maybe? Time was my biggest enemy for this idea but I would love to implement this sometime in the future. I would also love to add live interactions to my projects next time where the user can interact using clicks or button presses to make the experience more immersive.

 

CONCEPT

For this assignment, I was inspired by sketching in Adobe Illustrator. One way of making complex figures in Illustrator is by drawing lots of intersecting ellipses to outline the figure that you want to build. At the intersection of those ellipses, you get irregular shapes, which will help you in achieving the organic feel in your final drawing. You then reach for the Shape Builder Tool to connect the wanted areas at the intersection of the ellipses. Even before using this tool, you can already see the outline of your figure peeking through the bunch of ellipses.

In my work, I wanted to achieve this rough sketch feel and imitate the way I draw regularly (on paper or in Illustrator).

IMPLEMENTATION

My code was pretty repetitive. The order in which the shapes are placed is important, so I have started by writing in comments all the portrait parts that I need to add in a particular order. I then call for random color with random opacity, choose the angle of rotation, and draw the shape. This process is repeated for each part of the portrait. As a code it looked like the snippet below:

//jaw
fill(random(0,255), random(0,255), random(0,255), random(0,255));
// fill(249, 213, 192, 130);
translate(width / 2, height / 2);
rotate(120);
ellipse(20, 20, 150, 200);

The most challenging part of the implementation was figuring out the angle of rotation for each shape. It didn’t rotate in the way that I would imagine it to. The one-degree difference could make the shape do an actual 180-degree turn on the sketch. I’ll ask for more clarification regarding this issue during the class. Perhaps, it was an easy fix.

REFLECTION

I like the way my sketch ended up. It reminds me of stained glass window drawings that I did with gel paint as a kid. It kind of also gives me cubism vibes. Some random color pallets work better than others, perhaps, I could work on limiting the randomness of colors next time.

As “Among Us” was a game that I really enjoyed playing at NYUAD, I drew myself as a character from the game. The character is doing the SHHH gesture which I have incorporated with my name “iSHHHmal” to help people pronounce and remember my name correctly.

I have also added the starry night sky in the background because I am very fascinated with space. To do this I used a for loop and randomly placed 700 points on the canvas. Here’s the code for this effect:


// set all content drawn from this point forward
// so that it uses "white" (0 = black, 255 = white)
stroke(255);
for (let i = 0; i < 700; i++)
{
let x = random(600);
let y = random(400);
point(x,y);
}
fill(255);


The most challenging and time-consuming part of the assignment was drawing the hand of the character. There were multiple lines involved and it was important to get the pixels and shapes correct so the gesture looks understandable. Though, I am very proud of the way the hand turned out and it’s exactly like the way I wanted it.

Additionally, to make it easier for me to draw the background circle, I initially filled it with 1 color and then instead of drawing lines and an arc, I drew equal arcs around the circle only to help me achieve that effect. Below is the code for this:


stroke(153, 0, 0);
strokeWeight(4);
fill(240, 196, 66)
ellipse(300,175, 300, 300);
fill(223, 108, 32)
arc(300,175,300,300,radians(255),radians(285))
arc(300,175,300,300,radians(315),radians(345))
arc(300,175,300,300,radians(195),radians(225))
arc(300,175,300,300,radians(135),radians(165))
arc(300,175,300,300,radians(75),radians(105))
arc(300,175,300,300,radians(15),radians(45))


As this was only a simplistic portrait, I did not add the draw function, but in the future I would love to bring it to use and add user interactivity as well! Additionally, the p5 reference site was extremely helpful tool and I found myself referring to it again and again quite a few times.

Hi everyone =) I am finally taking this class and I planned to take it from Freshman Spring! Assignment for today was to create a self-portrait using p5.js. The completion of assignment was quite fun and I enjoyed playing with different shapes and colors. At the end, it turns out to be not really my portrait copy made in p5 but a cute image that I really like.

At the beginning, my initial plan was to stick to my real-life appearance and replicate something alike in code. I tried to convey few features of my appearance with quite noticeable eyebrows and quite long hair. Though, you may barely ever see me without my hair tied.

In the process, I noticed how important is the order. I needed to make sure nothing overlaps in an odd fashion. So, for example, hair code came first, followed by skin and face overall with bang added at the end. For me, the challenging part was to make hair, mouth, and nose appear a bit natural. For hair, I have used arc and rectangle shape to add length. I wanted to use arcs for mouth and nose as well but it turned out to be a bit complicated.

Overall, it was a fun experience and I may continue working on it in my spare time. What I feel may use some improvement is the accuracy of my portrait, yet it should not expected to be 100% exact, right? I browsed through several other projects and I really loved their animation parts and I may recommend myself to add some animation to my image. So, here is my sketch and I will provide my code below it!

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

function draw() {
  background(163, 187, 236);
  //Hair
  noStroke();
  fill(84, 53, 17);
  arc(260, 260, 300, 380, QUARTER_PI + HALF_PI, QUARTER_PI, OPEN);
  rect(110, 250, 300, 400);
  print(mouseX, mouseY);

  //Neck
  fill(232, 190, 172);
  rect(235, 360, 50, 55, 20);
  //Face
  noStroke();
  fill(232, 190, 172);
  ellipse(260, 255, 200, 260);

  noStroke();
  fill(84, 53, 17);
  arc(300, 120, 150, 100, 0, PI + QUARTER_PI, CHORD);

  //Eyebrows
  stroke(21, 19, 19);
  strokeWeight(7);
  noFill();
  arc(210, 230, 55, 10, PI, TWO_PI, OPEN);
  arc(310, 230, 55, 10, PI, TWO_PI, OPEN);

  //Eyes
  strokeWeight(1);
  fill(57, 36, 12);
  ellipse(210, 260, 28, 35);
  ellipse(310, 260, 28, 35);
  noStroke();
  fill(255);
  ellipse(207, 252, 8, 8);
  ellipse(306, 252, 8, 8);

  //Nose & Mouth
  fill(201, 130, 118);
  triangle(260, 250, 270, 310, 250, 310);

  //Hair (continued)
  stroke(201, 130, 118);
  strokeWeight(10);
  line(250, 335, 270, 335);

  //Shoulders & Shirt
  noStroke();
  fill(239, 246, 138);
  rect(185, 395, 150, 220);
  ellipse(190, 515, 160, 240);
  ellipse(330, 515, 160, 240);
}

Thank you for checking this out!

Inspiration

The assignment required us to play with basic shapes in p5.js and explore around to design a self-portrait. I wanted to add some creativity to the self-portrait so I began with the process of ideation to determine what could be a story behind my self-portrait. I wanted to do something funny.

I stumbled across a number of ideas throughout – including creating a type of animation or using text to create a portrait (but I realized it would go against the spirit of the assignment). But the one that stuck out the most was inspired from an episode of the show Phineas and Ferb – the one where the two brothers carve the face of Candace (their sister) on Mount Rushmore beside the others.

I instantly knew I had to do this. This became the story and purpose behind my self-portrait – To put my face up there on Mount Rushmore!

Project Implementation 

I started by importing the picture of Mount Rushmore from Unsplash. To avoid any lag in displaying the image, I preloaded the image in p5 before the setup function.

let bgImg;

function preload() {
  //preloading background image
  bgImg = loadImage(
    "https://images.unsplash.com/photo-1664048322440-7df65ca19151?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80"
  );
}

The next steps involved slowly creating different parts of the face. I started out with an overall arc that would act as the outline of the face, went forward to create eyes, made a nose using a triangle, and used more arcs for the smile and the head, ellipses for ears, and circles for the eyeballs. I made sure to follow a definite order in which I added the different features in order to put them layer by layer. A specific piece that I wanted to add to the portrait was hair falling on the forehead, which sort of makes it more similar to me. I placed a triangle near the head to depict this. Then, I went about adding color to the different parts of the portrait. I copied color codes of natural skin tones from schemecolor.com.

Finally, I wanted to give a left tilt to the portrait to match the original design of the mountain and went about rotating all the components by a few radians and then translating their position to bring the portrait to the right place.

function setup() {
  createCanvas(500, 500);
  background(bgImg);
  
  //to give a tilted feeling
  rotate(radians(3))
  translate(18, -20)
  
  //ears
  fill("#F1C27D")
  ellipse(405, 276, 20, 30);
  ellipse(315, 276, 20, 30);

  //face
  fill("#FFDBAC")
  arc(360, 250, 100, 240, 0, PI, OPEN);

  //eyes
  fill(color(255))
  ellipse(337, 275, 30, 20);
  ellipse(382, 275, 30, 20);
  
  //eyeballs
  fill(color(0))
  circle(338, 278, 13);
  circle(381, 278, 13);

  //mouth
  fill("#FFDBAC")
  arc(360, 315, 60, 60, 0 +radians(25), PI - radians(25));

  //nose
  fill("#F1C27D")
  triangle(360, 290, 370, 317, 351, 317);

  //head
  fill(color(0))
  arc(355, 250, 110, 80, PI, 0, OPEN);

  //dropping hair
  
  noStroke();
  triangle(300, 250, 365, 247, 301, 280);
}

Throughout the process, knowing very specific coordinates was very necessary. For this reason, I used to continuously log the x and y coordinates of my cursor on the console using the draw function and then use those values in creating the different shapes.

function draw() {
  //   useful for finding coordinated on the canvas
  print(mouseX, mouseY)
}

Challenges

Personally, I didn’t face many challenges. There was just one that I would like to highlight. While trying to give the portrait a slight tilt, I used a number of functions before stumbling upon the right one. The ones I used before required the created canvas to be in WebGL format.  I wasn’t aware of WebGL and decided against making the portrait more complicated before stumbling across the right function.

Learnings and Reflections

One of the key takeaways I had from an Interactive Media course I took last semester was to question every creative decision and understand its requirement. My thinking while creating this assignment was the same. Why make a self-portrait? What could be the story behind this?

I believe I feel happy with the result I achieved. I didn’t look at this assignment as to just create a self-portrait, but rather to build a story about it and I feel I was successful in creating the outcome I had hoped for. Through the process, I got to explore the basics of p5 and get comfortable working with shapes and images. It was a great learning experience overall.