Category: Spring 2023 – Shiloh

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.

As a Computer Science major, I am entirely used to working in the console. The black an white screen with limited color has been my best friend since Freshman year. For that reason, seeing the shapes and colors on screen was magical. I have worked with Processing before, but on a very limited scale, with a few shapes and images in hopes of finishing a final project and going home. It took time to maneuver the page again, understand what to put in setup and what in the draw function, but in the end I created this dynamic portrait.

Challenge

Creating this portrait was anything but easy since humans eyes, or at least mine, are not made for estimating pixel position. It was trial and error until the very end, but I think it came out okay. I encountered another obstacle while working out the angle in which the sun can move. Since I did not know p5js uses clockwise rotation for angles, i.e., opposite of Math class, it was incredibly tedious to estimate the movement of the ellipse. Undoubtedly, the hardest part was the brazier curves that I used for my hair. Estimating the pixels coupled up with estimating angles is probably nobody’s cup of tea, but thankfully, once I figured out one side, it was just a matter of subtracting from width on the other.

It took some time to understand how map() and constrain() work, but once I did, the eye and sun movement was pretty easy to achieve. Symmetry was somewhat of a hassle, but since p5js contains the global variables of width and height, it was okay.

Night Phase (Cursor out of screen)

The night phase represents my home country, Bosnia. It is currently snowing heavily there and the day is extremely short. I used the code underneath to create the snowflakes and a few if statements to control the visuals of the page.

for (let i = 0; i < 50; i++) {
      ellipse(random(0, 400), random(0, 400), random(1, 4));
    }

Day Phase (Cursor on the screen)

The day phase is Abu Dhabi, hence the palms. The sun moves with the x coordinate of the cursor and the angle is mapped from PI to 2PI.

function sun() {
  fill("#FFE87C");
  // angle is mapped from PI to 2PI in accordance to mouseX
  var angle = map(mouseX, -400, 800, PI, 2 * PI);

  var sunX = width / 2 + cos(angle) * 550;
  var sunY = height + sin(angle) * 350;

  ellipse(sunX, sunY, 70);
}

Reflection

This assignment helped me understand the basic principles of shapes and colors in p5js. Although the angle and coordinate axis principles work differently than I was previously taught, working extensively with shapes helped me understand it a lot better. In the future, I would like to focus more on the animated part of coding and make my portrait more lifelike.

The concept behind this self-portrait was to create a simplistic image which looks similar to me.

The most fun part of the design was creating the eyes, since there were so many components – eyebrows, eye line, eyelashes, iris and eye shine. I like the way I created depth in the irises by making a darker and thicker stroke, then putting pupils and eye shine which was white with lower opacity. Here is the code below:

//eyebrows
 stroke(105, 73, 31);
 strokeWeight(5);
 noFill();
 arc(200, 235, 45, 15, 180, 360, OPEN);
 arc(300, 235, 45, 15, 180, 360, OPEN);
 
 //eyes
 stroke(214, 164, 99, 130);
 strokeWeight(6);
 arc(200, 255, 45, 15, 180, 360, OPEN);
 arc(300, 255, 45, 15, 180, 360, OPEN);
 arc(200, 257, 40, 30, 90, 180);
 arc(300, 257, 40, 30, 0, 90);
 
 strokeWeight(3);
 stroke(64, 41, 11);
 fill(82, 54, 18);
 circle(200, 260, 22);
 circle(300, 260, 22);
 noStroke();
 fill(0);
 circle(200, 260, 10);
 circle(300, 260, 10);
 
 //eye shine
 noStroke();
 fill(255,255,255, 200);
 circle(205, 255, 7);
 circle(305, 255, 7);
 
 //eyelashes
 stroke(105, 73, 31, 130);
 strokeWeight(5);
 noFill();
 arc(180, 230, 15, 45, 90, 120, OPEN);
 arc(190, 225, 15, 45, 90, 120, OPEN);
 arc(320, 230, 15, 45, 60, 90, OPEN);
 arc(310, 225, 15, 45, 60, 90, OPEN);

In the future I would like to do something more special than just a simple portrait, maybe even include dynamic components. But since this was the first assignment and animation was not required, I decided to keep things simple 🙂