Category: Spring 2023 – Shiloh

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.

Concept

As part of the first assignment, I have produced an animated face, alongside a Captain America Shield, and a Flash Logo on a Canvas.

Flash has been a superhero that I have watched my entire childhood, and Captain America eventually became my favorite as I grew older and started watching Marvel Movies – I draw inspiration from the Captain!

Since my drawing skills are not that amazing, I wanted to sketch something that looked simple and clean. Hence, I went forward with representing things that I thought represent myself. Though I like simplistic things, I try to work towards perfection, and so I could not help but learn to add some interactivity on my Canvas that would draw the user’s attention and add complexity in the skills that would be needed to produce such a sketch.

Embedded Canvas

The final production for my assignment is as follows:

Code

For me, personally, a clean and understandable code is always admirable. Therefore, I am proud of the entirety of the well structured and commented code. However, there are certain sections that I would choose to highlight here.

The first segment of my code that could stand out was the usage of different functions to draw the different objects. This allowed me to structure my code, but also allow dynamic positioning of the objects on the canvas, instead of fixed positions. For this purpose, I had to have relative measurements within each function from a specific starting point. Therefore, in this manner, I have adapted my objects to be usable in place of even pngs or other graphics:

// Call to the function that draws the Iron Man Mask
face(ispx, ispy);

// Call to the function that draws the Captain America shield
captainAmerica(cspx, cspy);

// Call to the function that draws the Flash Logo
flash(fspx, fspy);

The way I positioned every element with a reference point is as follows:

// Function to Draw the Captain America Shield
function captainAmerica(cspx, cspy) {
  // To leave no strokes, and for smooth edges of the shield
  noStroke();

  // Drawing the border layer with 'Grey' for the entire sheild
  fill(192);
  circle(cspx, cspy, 385);

  // Drawing the red outermost circle
  fill(170, 20, 40);
  circle(cspx, cspy, 380);

  // Drawing the grey 'in-between' circle
  fill(192);
  circle(cspx, cspy, 325);

  // Drawing the innermost red circle
  fill(170, 20, 40);
  circle(cspx, cspy, 265);

  // Drawing the 'grey border' for the 'Blue' circle
  fill(192);
  circle(cspx, cspy, 205);

  // Drawing the inner 'Blue' circle
  fill(0, 0, 66);
  circle(cspx, cspy, 200);

  // Setting the grey color for filling the star
  fill(180);

  // Drawing the shape of the star with the following vertices
  beginShape();
  vertex(cspx, cspy - 100);
  vertex(cspx - 60, cspy + 80);
  vertex(cspx + 92, cspy - 40);
  vertex(cspx - 92, cspy - 40);
  vertex(cspx + 60, cspy + 80);
  vertex(cspx, cspy - 100);
  endShape(CLOSE);
}

Moreover, the computational logic for allowing the drag and drop of an object was something that also took some creative logical thinking. I researched and utilized the ‘mousePressed() and the mouseReleased() functions, coupled with the usage of an IF Statement.

function mousePressed() {
  // Checks if the mouse is pressed in the periphery of the Face,
  if (
    mouseX > ispx - 80 &&
    mouseX < ispx + 80 &&
    mouseY < ispy + 100 &&
    mouseY > ispy - 110
  ) {
    onface = true;
  }

function mouseReleased(event) {
  // If the face was being held, releases it on the mouse released position on the canvas
  if (onface == true) {
    onface = false;
  }

The following segment of the code is within the ‘draw’ function:

// Checks if the mouse is being held on the face,if so, it drags it along!
if (onface == true) {
  ispx = mouseX;
  ispy = mouseY;
}

Improvements

I certainly believe that my on-paper creativity, keeping the coding aspect aside, could be improved. The lack of an artsy touch in this canvas is evident, and that is something I could spend more time on!

The full canvas is linked here.

In this assignment we had to create our self portrait using functionalities of p5.js that we learned during the class. The task was enjoyable as it involved manipulating various shapes to create a visually appealing and coherent composition.

arc(200,230, 50, 30, TWO_PI + QUARTER_PI, PI - QUARTER_PI); //smiling mouth

rectMode(CENTER); //centering the rectangles
fill('#F5BE86')
rect(200,280, 35, 40) //creating neck before face

fill('#8B67CE')
rect(200,345, 120, 95) //creating the main body

arc(width/2, height/2, 120, 150, PI+.4, -.4, OPEN); //drawing the hair

Concept

My self-portrait is a sort of digital avatar of myself. It is not overly realistic, but not overly abstract either. For example, my head is oval-shaped, and my eyes, eyebrows, nose, and mouth are in the approximately correct positions. However, going with a simplistic style, I opted to make the my torso triangular, and decided to not add ears. Moreover, I did not add my hair, but instead put on my favourite beanie-shaped hat. The colours black and grey are prominent, as they are some of my favourite.

As I was creating the self-portrait, I realised that there was an opportunity to make everything more interesting by making myself a kind of android, with laser eyes. Therefore I made my eyes a red colour which changes intensity over time, and I also added green lasers which follow the user’s mouse. Therefore my portrait can be said to represent the slightly grumpy and almost penetrating stare of someone who really needs their coffee in the morning, or a college student who is in their fourth class of the day.

Code highlight

I am particularly proud of the part of the code that creates the lasers, as well as their fading effect. At the start of each frame, instead of setting the background to a solid black colour, I set it to black with an alpha of 10 (out of total 255). This means that with every frame, the previously drawn lasers are not completely erased, but slowly fade out.

background(0, 0, 0, 10);

To make the code cleaner and more principled, I store the coordinates of my eyes in two arrays, where the first two numbers represent the (x, y) coordinates of the top left corner of the eye, and the next two represent the coordinates of the top right corner of the eye.

const eye1 = [0.38, 0.45, 0.45, 0.5];
const eye2 = [0.56, 0.45, 0.62, 0.5];

Note that, in my code, each coordinate is a number between 0 and 1, and is multiplied by the height or width of the canvas when drawing.

Then, I draw the eye, before finally drawing the lasers. The width of the lasers follows a sine curve that moves between 0 and 2.

strokeWeight(sin(frameCount * 0.01) + 2);

Again, to make the code cleaner and more principled, I define a function that, given the coordinates of an eye, returns its center, but slightly moved in the x and/or y direction, to create a ‘fuzz’ effect. I then use the function to get the center of each eye.

function getEyeCenter(eye) {
  const centerX = (eye[0] + eye[2]) / 2; 
  const centerY = (eye[1] + 2*eye[3]) / 3;
  return [(centerX + random(-LASER_FUZZ, LASER_FUZZ)) * X,
          (centerY + random(-LASER_FUZZ, LASER_FUZZ)) * Y];
}

const eyeCenter1 = getEyeCenter(eye1);
const eyeCenter2 = getEyeCenter(eye2);

Here, LASER_FUZZ is a small number, such as 0.01.

Finally, I draw the lasers. Each laser is a line from an eye to the mouse; however, the mouse coordinates are also slightly shifted in the x and/or y direction, to emphasize the ‘fuzz’ effect.

const laserTargetX = mouseX + X * random(-LASER_FUZZ, LASER_FUZZ);
const laserTargetY = mouseY + Y * random(-LASER_FUZZ, LASER_FUZZ);

line(laserTargetX, laserTargetY, eyeCenter1[0], eyeCenter1[1]);
line(laserTargetX, laserTargetY, eyeCenter2[0], eyeCenter2[1]);

The sketch

Reflection

I am fairly happy with my final sketch. Many more visual details may be added to increase the realism and/or the digital-like effect. For example, if I decided to lean more into the android aesthetic, I could make my skin a metal-like texture instead of just grey, and add robotic details to my hat and/or clothes. In terms of interaction, to emphasize that the person in the sketch is ‘watching’ you, I can make them ‘lean’ towards the mouse as well, in addition to the lasers.

Your concept:
My idea is to make a portrait of a wise king. I went through a lot of experimenting to finally end up with this portrait, however, it was a very fun process overall, and am happy with how it turned out.

A highlight of some code that you’re particularly proud of:
I used a lot of partial layering to achieve the look and shape that I wanted. An example of this is the inner ear:

In addition, I didn’t know how to thicken the arc for the eyebrows so I came up with the idea to just add more arcs to increase the thickness:

Embedded sketch:

Reflection and ideas for future work or improvements:

I started this as a portrait of myself. I made the head shape but got stuck on the hair. After some experimenting, I came up with the idea of the crown. It was more stylish than my original idea. With that I naturally thought of making the portrait of a king instead. As I was working on the lower part of the portrait i.e. the shoulder and upper torso, I struggled with getting it all to fit together so I decided to give him a beard to circumvent this issue. The choice of red background color was a reference to the background color of the UAE leader’s portraits. For future improvements, I would add interactivity to the portrait by making the eyes follow the cursor and have the mouseclick change the background color and clothes.