Concept:

Lately, on my TikTok feed, I keep seeing these square profile pictures which look really cute. I tried to generate my own version of it online, but then the website required me to use Flash… which I do not have. Oops. So, when I was coming up for an idea for my self-portrait during lab on Thursday last week, I thought I could probably just make this by myself, right?

I wanted to make three different versions of the profile picture: one that (somewhat) resembled me normally, one that resembled me when I am tired (me 70% of the time) and one that was fun and colorful. I would use the same base code, so that I wouldn’t need to make completely different faces, but would change some aspects so that the faces would still have some clear changes (e.g. closed vs. open eyes, different color schemes, accessories etc.).

To switch between the three different faces, I would make buttons at the bottom of a screen as a panel. I wanted to make each face more interactive, but I was worried that it would interfere with the faces and the buttons programming, so I’ll work on it once I learn the language better.

Process:

Firstly, before actually deciding on the panels and buttons, I had to figure out how I was even going to code the face. I started with the hair as the background color, making a long ellipse for the face and then adding circles for the bangs. After, I created the eyebrows and eyelids with even more ellipses (I think I may have abused the ellipse() tool…), and the eyes on top (for layering purposes). I used the ellipse with noFill() to create the glasses, and then to make the mouth, I used triangles. Most of the face was just trying and testing out shapes and coordinates, which took me around two hours. However, once I figured out the first face, it didn’t take me that long (only an hour or so) to edit and modify the other faces.

To make it easier, I also coded a line to make sure I could navigate the coordinate system better rather than trial and error-ing again and again.

For the third face, I used this code for the star hair clip. I struggled quite a bit, but I asked one of my friends for help, and we came up with this:

function star(x, y, radius1, radius2, npoints) {
  let angle = TWO_PI / npoints;
  let halfAngle = angle / 2.0;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}
    strokeWeight(3);
    fill(255, 247, 161);
    star(200, 220, 70, 150, 5);

After, I had to create the buttons. I created a new file (so I could just copy and paste the face codes into the file after I programmed the buttons), and I used this as the code:

let currentScene = 1;

let btnSize1 = 200;
let btnSize2 = 150;
let btn1X = 20,btn1Y = 725;
let btn2X = 240,btn2Y = 725;
let btn3X = 460,btn3Y = 725;

 function setup() {
  createCanvas(700,900);
 }
  
 function draw() {
  background(220);
  
//state
  
  if (currentScene === 1){
    drawImage1();
  } else if (currentScene === 2){
    drawImage2();
  } else if (currentScene === 3){
    drawImage3();
  }
   
// panel
   
  fill(251,251,251);
   noStroke();
  //x y w h
  rect(0, 700, 700, 200); 

// buttons
   
   //1
  fill(217, 93, 83); 
  rect(btn1X, btn1Y, btnSize1, btnSize2);
  fill(0);
   
   //2 
  fill(161, 126, 140); 
  rect(btn2X, btn2Y, btnSize1, btnSize2);
  fill(0); 
   
   //3
  fill(66, 164, 255); 
  rect(btn3X, btn3Y, btnSize1, btnSize2);
  fill(255);

 } 
  function mousePressed(){
    
  //button 1
    
  if (mouseX > btn1X && mouseX < btn1X + btnSize1 && mouseY > btn1Y && mouseY < btn1Y + btnSize2) {
    currentScene = 1;
  }
    
  //button 2
    
    if (mouseX > btn2X && mouseX < btn2X + btnSize1 && mouseY > btn2Y && mouseY < btn2Y + btnSize2) {
    currentScene = 2;
  }
    
  //button 3
    
    if (mouseX > btn3X && mouseX < btn3X + btnSize1 && mouseY > btn3Y && mouseY < btn3Y + btnSize2) {
    currentScene = 3;
  }
    
}
   
function drawImage1(){
  // code for first expression;
  
}

function drawImage2(){

// code for second expression;

}
   
function drawImage3(){
 
// code for third expression;

}

   

note: I realized I put the wrong coordinates for the buttons, so now there's more space on the right than the left. I'll fix it soon.
note2: I used the resources from p5.js tutorials, references and examples for most of the code.

Reflection and Possible Improvements:

I had been pushing this off for a while because I was scared it would take too long and I would not be able to create something I would be satisfied with. However, I think this turned out better than I expected! I’m happy with the button interaction and the facial expressions.

I really do want to work with adding more interactivity in the future and maybe also coding an animation (such as spinning the star and flower hair clips in the ‘happy’ expression or waking my picture up for the ‘tired’ expression). I would really like to experiment with adding more features once I become more confident with loops and putting commands within commands, since the many lines of code for each face threw me off and made it hard for me to navigate where one command started and ended. (Oops.)

• My concept of the self-portrait assignment is me as a bird. I have seen a lot of videos online with cute birds lately, so this is the first thing that came into my mind. The bird is eyeing the worm, which is a pink oval moving together with the mouse.

• function setup() {
    createCanvas(400, 400);
  }
  
  function draw() {
    background(204,255,255);
    
  
    fill(102, 255, 255)
   circle(130,280,100);
    
      fill(102, 255, 255)
   circle(270,280,100);
    
    
    circle(180,210,50);
    fill(102,255,255)
    circle(200,320,200);
     fill(102,255,255)
    circle(200,200,150);
    fill (255,204,255);
     fill(255)
    circle(170,190,20);
  fill(255)
    circle(225,190,20);
    ;
    fill (250,250,0)
   triangle(200,190,200,210,230,200)
  
    
    let moveX=constrain((mouseX - width / 2), -4, 4);
    let moveY = constrain((mouseY - height / 2), -4, 4);
    // pupils
  fill(0);
  
  // left pupil
  circle(170 + moveX, 194 + moveY, 10);
  
  // right pupil
  circle(225 + moveX, 194 + moveY, 10);
    
    
    textSize(32);         
    fill(0);               
    text("I am a bird!", 100, 100);
    
     fill(255,255,255)
   circle(200,350,130);
    
    //worm
      fill(255,204,229)
   ellipse(mouseX, mouseY,80,40);
  
  }

• A code that I am proud of is the one that makes the bird’s pupils move alongside the “worm”. I had to look up how to constrain the pupils within the eyes so they would not move all around the canvas:
• let moveX=constrain((mouseX – width / 2), -4, 4);
  let moveY = constrain((mouseY – height / 2), -4, 4);
  // pupils
  fill(0);// left pupil
  circle(170 + moveX, 194 + moveY, 10);// right pupil
  circle(225 + moveX, 194 + moveY, 10);
• Embedded sketch:
• Link to sketch
• “How this was made”: I have created the body of the bird using simple circles. The face of the bird was also created using simple shapes – eyes and pupils are circles, while the beak is a triangle. At first, I had forgotten math, so I had a hard time understanding the coordinates of the triangle, but I figured it out after asking the Professor. We have learned the mouseX,mouseY function in class, so I had the idea to make some sort of an interactive object in the sketch. I decided for it to be a worm since birds like to eat worms. Only the worm moving felt a bit strange, so I decided to make the bird’s pupils move as well. I looked up the constrain function in the Reference page, but had a hard time understanding it, so I used AI to break it down. After I figured it out, I had the bird’s pupils moving.
• Reflection and ideas for future work or improvements: Use something more complicated than 2D shaped to draw, focus on breaking down the functionality of the code first to fully grasp what each part of the function is responsible for.

Concept:

For this self-portrait assignment, I drew Anpanman, one of my favorite cartoon characters from childhood. Many of my friends say I look like him, so I chose him as a playful version of my self-portrait. I also admire his optimistic, outgoing personality, and I want to reflect that feeling in my work. My goal for this assignment was to learn how to use p5.js, since I had never used it before. Through drawing with code, I practiced working with coordinates and basic programming logic, and I learned how to build an image step by step using simple shapes. Since my birthday is coming up, I also designed this piece as a small birthday gift card for myself.

How this was made:

I created this image using p5.js. I started by drawing Anpanman’s face. For the face color, I asked ChatGPT to help me find the exact color values, and I used the p5.js reference to learn how to make the shape and remove the stroke. Next, I drew the nose and cheeks. Since they are also circles, that part was fairly straightforward. After that, the eyebrows were the hardest part. Even after checking the reference image, I was still confused about how to code the correct shape. I asked ChatGPT for help, but the code it suggested was too complicated for me to understand. So I went back to the p5.js reference and experimented on my own. After about 15 minutes of trial and error, I finally got the eyebrow shape I wanted. For the mouth, I followed the reference image for the shape, but I asked ChatGPT for help with the mouth color because I tried several times and still couldn’t match the shade I wanted. For the remaining details—highlights, clothing, and buttons—I mainly relied on the p5.js reference and built them using simple shapes.

The part I’m proud of:

The part I’m most proud of is the eyebrows. They weren’t a simple shape, and using arcs was harder than I expected. I had to manage a lot of details—especially the angle and the coordinates—and I kept getting confused about where everything should go. After many tries and small adjustments, I finally found the right position, curve, and angle that looked correct and made me feel satisfied.

//left eye brow
 noFill();
stroke(20);
strokeWeight(3);
arc(117, 135, 50, 65, PI, TWO_PI);

//right eye brow
arc(183,135,50,65,PI,TWO_PI);

Reflection and ideas for future work or improvements:

I think I could improve this project by adding more detail to the clothing and including some interactive animation. Since this was my first time using p5.js, there are still many skills I want to develop. In future work, I hope to incorporate more of my own creative ideas and make my drawings more detailed, polished, and well organized.

Concept

In this assignment, I created a cartoon style portrait of myself. I practiced how to create basic shapes such as ellipses and circles, points, curves and lines. I also practiced using colors and changing the thickness of lines and shapes.

I made the portrait interactive by changing the portrait into night mode when the mouse is clicked, changing the background colors into darker colors and adding stars to represent night time.

Code I’m proud of

The part of the code I am most proud is how I change settings from day time to night time by using if condition. When the mouse is pressed, the background colors of the portrait is changed and stars are added to create the effect of change of time

// Declaration of colors
  let a, b, c;

// Change colors when mouse is pressed
    if (mouseIsPressed) {
      a = color(200, 200, 200);
      b = color(0, 100, 0);
      c = color(0, 0, 139);
  } else {
    a = color(243, 243, 25);
    b = color(0, 128, 0);   
    c = color(173, 216, 230);
  }

  // Use background color
  background(c);
  
  // Stars
  if (mouseIsPressed) {
    textSize(90);
    text("✨", 200, 90)
  }

Here is my portrait

Reflection

This was a very fun exercise where I got to explore using p5 to create images. While this is my first time doing something like this, I really enjoyed and opened to exploring it more. I can improve this project by making it more interactive, making the more shapes and customizations and adding more elements to the portraits

“I am my own muse. I am the subject I know best. The subject I want to know better.” — Frida Kahlo

Concept:

For our very first assignment in Intro to Interactive Media, I was able to make a portrait of myself, using only simple 2D shapes, through the use of p5.js’ functions. My main goal was to try an recreate as many facial features about myself, such as my lush, green eyes. Also I added some clothing with a color which sort of, compliments my eyes.

Below is my finished portrait:

How it’s made:

The portrait was made using p5.js’ functions for 2D shapes. I made good use of ellipse, quad, arc, circle mostly as they helped me get a good grasp of how I would shape my face.

Starting out though was actually difficult, as I was confliced of whether it would be best to use a circle or an ellipse for my facial structure. Of course both would work out, but I chose the ellipse as it made more sense for me, as I could add get a better shape to add external features, such as my ears or hair.

Then it was a simple case of designing my face out. I used ellipses for my sclera, and a circle for my pupil and iris. I used ellipse for my nose (though I was considering using a triangle too). And for my shirt I used a few quadilaterals to make the shape of my body. As for the shoulders, I used ellipses that are slightly raised and feel more natural.

Now I did have a few struggles whilst creating the portrait, such as positioning the shapes. I started out using the width and height arguments and then having them positioned by either adding or subtracting a given value. Whilst this worked for a while, it was cumbersome as to figure out the starting and end points of where I wanted my shapes.

But then is when I used my smart head for once and thought

“Wait, I can use the print function to see the exact coordinates of the canvas, so I can see where I can pop my x and y coordinates”

So afterwards for some of the shapes in the code I decided to simply use exact values in order to make my life easier haha. This was done just by using the print function to print out the current position of the mouse using mouseX and mouseY.

Another issue I faced and a partial learning curve was the arc function. I had difficulty with understanding how to utilize it in terms of generating the shape of the arc. As the function utilized the arguements pi, half pi and quarter pi, it was difficult to see at what part did the arc start and end. The arc function was mostly used for my mouth and eyebrows and my hair for a more curved feel.

A highlighted bit of code I’m proud of:

So as my birthday was approaching (14th of February and yes, I’m born on Valentine’s Day 😊), I thought to try my hand at adding a funky effect to sort of mark the occasion. I was aware of the mousePressed and random functions and decided to have it generate circles of random color and size, with them being randomly appear around the background. The reason why I’m proud of it was I wanted to see what a simple effect would do for my canvas.

if (mouseIsPressed){
  
  background(0)
  
  noStroke()
  fill(random(0, 255), random(0, 255), random(0, 255), 100)
  circle(random(width), random(height), random(10, 100))
  
}

Reflection:

I throroughly enjoyed creating my self portrait. Although at many points I had struggles with positioning the shapes around, I was able to sort of overcome it in my own manner. The main thing I struggled with was the arc function, as I was a bit confused at how to implement it with getting the arc correct.

I also did like the addition of the effect but I feel like I’d love to add more perhaps to my own self, such as giving myself a different expression. And maybe I could touch up the effect a little more, such as adding more texture. Perhaps even having a smooth effect would be a nice addition. But overall, as a start, this assignment was quite fun to do and I relished in creating my own portrait.

Concept

When I think about portraits, I believe personal characteristics should always be included to reveal who the person really is. When it comes to me, my favorite hobby— sports —immediately came to mind. Now I play for the NYUAD Volleyball team and I really love being there and doing my best at practice.

When I study, I usually feel sleepy and I don’t enjoy doing boring homework, but I always have energy for volleyball. So, I decided to make an interactive self-portrait that reflects this contrast. In the sketch, an item (either a book or a ball) is tied to the mouse’s position. When the user double-clicks, my facial expression, clothes, the item itself, and the background all change.

Highlight Code

One part of the code that I particulary liked is integration of double-click:

function doubleClicked() {
  if (thing.chosen_type == 'book' && bg.type == 'library' && character.type == 'sad') {

    thing.chosen_type  = 'ball';
    bg.type = 'volleyball';
    character.type = 'happy';
  } else {
    thing.chosen_type = 'book';
    bg.type = 'library';
    character.type = 'sad';
  }
}

Since I have some prior coding experience, I used OOP principles to make the object move with the mouse and change states with a double-click. Even though the code itself is quite simple and straightforward, these interactive elements make a big difference to the overall picture. In this code snippet, double-click changes the attributes of the background, character, and item. It changes their type to another one, so in the next frame they will change and the code will display the picture with changed characteristics.

While creating the self-portrait, I relied on the p5.js reference page and Googled RGB codes for specific colors. I also had to look up the syntax for class and function creation, since I know how to do this in Python, but not JavaScript.

I used simple shapes in my portrait, but the most difficult ones were the arcs. It was hard to find the exact angles to make the arcs look the way I wanted while maintaining the right shape. I had to experiment with different angle values and ellipse diameters to create bangs that looked correct. I also spent time figuring out the angles for the main hair so it would look like a short haircut and not just a squished circle.

Reflection

Reflecting on my work, I definitely want to improve the overall design. I want to add more specific details so the portrait becomes less simplistic. In terms of interaction, I think adding more complex animations, such as the eyes tracking the movement of the ball or book as they moce with a mouse, would be great. Finally, making it a 3D version where the character is a detailed 3D model with depth, shades and textures, and the object actually rotates in 3D space would be awesome.

My concept is that I’m buggy, so I used bugs.

This code was particularly awesome:

// I'm a big bug
textSize(150);
text("🐞", 10, 250);

 

Reflection

I like the bugs, but next buggier