For this project, I created a portrait of myself wearing a raccoon onesie using basic primitive shapes in the p5.js editor.

The part that I am most proud of in my portrait is the raccoon tail, which I used many variations of ellipses to create. It was also one of the most challenging, as I had to experiment with the coordinates to get the proportions right.

// tail
fill(120, 125, 130);
ellipse(285, 330, 90, 40)
fill(65, 70, 75);
ellipse(275, 330, 15, 40)
ellipse(295, 330, 15, 40)
ellipse(315, 330, 10, 30)

How it was made. I used many shapes such as the ellipse, triangle, circle  rectangle, and arc to create the features of the person. I also messed around with the reference page in p5 and used AI for color accuracy.

>

What I would like to improve upon in the future are my proportion and shape variety skills. i would also like to learn how to use the translation and rotation commands to make my designs more life-like. Additionally, I would also like to strengthen my documentation on the blog.

 

Concept:

I’ve tried to show my personality as a night person through p5.js. At first, you can see how unsatisfied I am with the lamp being turned on, when clicked, I get happy! I also tried to make my glasses as a prominent feature of my face, as they’ve been with me for a very long time. It also showcases my love for dark mode, and dark themes, specially on digital displays.

I also implemented lower and higher opacity on the lens of my glasses as if they’re Photochromatic, which is something I’m particularly a fan of.

The unique check background is also symbolic of my interest in board games, specially chess.

How this was made:

This self-portrait was made multiple elements of p5.js such as arcs, rectangles, lines, ellipses, fills, strokes, and also a combination of push(), translate(), and scale().

I started with a simple circle using ellipse, the top and side hair using more ellipses and rectangles, then the specs (using multiple lines and rectangles), and eventually the smile (arc) and the chin (also arc). I reused some code from my draw_dude() function I worked on in last class for the body, while creating an original background using checks. The lamp was a bonus as I learned corner rounding in the process of making it look sleek, now it’s an integral part of what I’m trying to show as my personality.

My toughest challenge was actually colour theory, as I couldn’t get the background to match my skin and other elements. Also the face looks rounder than I preferred. This is where the push(), translate(), and scale() came in handy, I used it to slim down my face without redoing all the hardcoded values. Next time, I would be more inclined to declare variables early.

Code I am Proud of:

To be honest, I’m proud of the entire codebase for this portrait, but if I had to pick, I’d choose draw_specs:

function draw_specs(pos_x, pos_y, size, theme = "light"){
  if (theme == "light"){
    fill("#00000080");
  } 
  if (theme == "dark") {
    fill("#00000030");
  }
  stroke("#90D5FF");
  rect(pos_x + size/10, pos_y - size/25 + 2, size/2);
  rect(pos_x - size/1.7, pos_y - size/25 + 2, size/2);
  
  stroke("#404040");
  strokeWeight(2);
  line(pos_x - size/3, pos_y - size/25, pos_x + size/3, pos_y - size/25);
  line(pos_x - size/10, pos_y + size/8, pos_x + size/10, pos_y + size/8);
  line(pos_x + size/10 + size/2, pos_y + size/8, pos_x + size, pos_y + size/5);
  line(pos_x - size/1.7 - size/2.4, pos_y + size/5, pos_x - size/1.7, pos_y + size/8);
}

The feeling of drawing my favourite accessory on a digital screen using code was very rewarding in itself. Each line and shape was simple yet intentional.

Reflection:

As a Computer Science major, I’m often induced to work on delivering an output or solving a problem. I’ve never had the opportunity to pay undivided attention to the visual elements, instead of just the functional ones. So while doing this, I realised the very essence of what I like to see as a software developer, and being able to convey my personality through my projects. It’s one of the few assignments I’ve genuinely had fun finishing.

Concept:

My concept for this self-portrait was to represent my culture and background through p5.js. I wanted to express myself as well as the city I was born in, so I included the Burj Khalifa in the background as a distinguishing landmark. I represented myself through the traditional clothing called the Kandura, which is what I mostly wear on a daily basis, as well as the ghutra, which is wrapped around my head. My beard also played a big part in this self-portrait, as I believe it’s one of my most distinct features. I also wanted to experiment with animation, which I was inspired to do after seeing our previous class samples.

How this was made:

This self-portrait was made with p5.js, using a variety of features such as arcs, rectangles, ellipses, fills, and strokes. Arcs were used for the mustache, beard, mouth, and ghutra, while rectangles were used to build the Burj Khalifa and form the neck. Another interesting thing I found was the beginShape() function since I didn’t want the kandura locked into a fixed shape like a rectangle, I wanted to stretch it a bit to look more natural, and this came in handy for that.

The Burj Khalifa, on the other hand, was formed with simple rectangles at different points and sizes, which was a bit annoying to do, as I had to play around with different coordinates to get it the way I wanted. Another part where I felt a bit stuck was forming the ghutra, as I didn’t know how to shape it, so looking at previous students’ work really gave me the inspiration to visualize how I wanted it to look.

Another thing I wanted to make stand out were the eyes, especially adding the white dot next to the pupil to make them more lively and easier to look at.

A challenging part was implementing the animation for the self-portrait, as I was clueless on how to start it, but I was able to use if/else statements to make the blink and eyebrow expression happen in unison as you hover the mouse over the eyes. I looked at a few tutorials as well as AI to figure out the whole concept and apply it to my work.

Code I am Proud of:

function draw() {
  
  // Burj Khalifa
  fill(150, 180, 215);
  noStroke();
  rect(430, 340, 100, 260);
  rect(441, 210, 78, 160);
  rect(452, 105, 56, 110);
  rect(463, 55, 34, 60);
  rect(476, 25, 6, 30);

This snippet of code is the one I am most proud of, as it forms the Burj Khalifa, the finishing touch for my self-portrait. I kept thinking of different ideas for a background, but it had to be the Burj Khalifa. I was overcomplicating the code for it, as it wasn’t easy to grasp because its design is unique compared to other buildings. But then it hit me, it was much simpler than what I had made it out to be. After thinking about it for over an hour, the actual work was completed in just two minutes. I just had to add rectangles one over the other, reducing the size each time it ascends. Playing around with the coordinates was a bit annoying, but worth it in the end.

Reflection:

Working on this self-portrait taught me a lot about both p5.js and my own patience. Going in, I didn’t have much of the design experience, so just understanding how shapes like ellipses(), rect(), and arc() worked together to build a face felt overwhelming at first. Breaking the portrait down into small, separate pieces; the head, the eyes, the beard, the ghutra, made it much more manageable, since I could focus on getting one feature right before moving on to the next instead of trying to solve everything at once. The parts that meant the most to me were the ones tied to my culture: the kandura, the ghutra, and the Burj Khalifa. I wanted the portrait to say something about where I’m from, not just be a technical exercise, so getting those details right mattered more to me than getting the code perfect on the first try. The ghutra in particular took a few attempts to get looking right, and I leaned on classmates work and some trial and error to figure out how to shape it convincingly. Overall, this project pushed me to combine a personal, cultural concept with a completely new technical skill, and I’m happy with how both sides came together in the final piece.

My concept: As our first assignment in the introduction to interactive media course, we were instructed to create a self portrait using strictly code on the p5js website. It was incredibly interesting to try and develop new skills through the use of lines and shape in order to create a realistic figure. Going into the assignment, I decided that it would be best to replicate my everyday look at university to experiment with the website and learn more about the foundations of coding as a beginner. 

How this was made: I began the process of creating my self portrait by setting the canvas to an ideal size in which I chose to be (600, 600). This guaranteed a large working space that allowed me to comfortably develop different elements of the self portrait. I then began the process of creating the face and eyes using the eclipse function. Because I had previously practiced using the eclipse function in class, this was pretty easy to manage. However, when it came to creating the nose, eyebrows and the mouth, I struggled with what shapes and functions to use in order to do so. To resolve this confusion, I used the help and reference button provided by p5js to review the different functions that are available for use. I also used the help of Chatgpt by asking what possible functions could be best suitable for certain facial features, as well as in moments of uncertainty when dealing with certain dimensions and the meaning of each value within coordinates. Doing this allowed me to learn more about other shapes such as the use of line, arcs, and triangles. 

Once I was done with the primary facial features, I moved on to the hair. Personally, the hair was the feature in which I struggled the most with this assignment as I was unaware of what shapes and functions I could use to create something realistic. This encouraged me to just experiment using the ellipse feature as it was the one I was most comfortable with. Therefore I created several ellipses to form dimension and realism in the hair. I also experimented by using the rect function which I found in the reference section of the p5js website to create a darker layer of hair behind the neck to create a sense of light and shadow. I also managed to create an interactive function in the background as it changes colors when in contact with the mouse. I did this through the use of adding the mouseX and mouseY feature that was learned in class into the fill RGB function. 

Code that I am particularly proud of: After completing this assignment, I am particularly proud of the clothes in which I created. I decided to try and replicate an abaya through the use of different shapes and functions. Once again, I used the curved rect function to create the body, followed by regular rectangles to create both the shaila and tshirt underneath. I also used the triangle function to create a collar to go around the neck. I am particularly proud of this code as I created it without the use of any references, through the use of my skills that I have developed throughout the assignment and the creation of different features in the self portrait.

// Clothes 
 fill(255, 180, 180)
 rect(160, 500, 280, 150, 90);
 fill(255, 200, 200)
 rect(220, 500, 150, 100)
 fill(255, 255, 255)
 rect(240, 500, 105, 100)
 triangle(345, 500, 345, 480, 280, 500);
 triangle(250, 550, 250, 480, 300, 500);
 }

Reflections and ideas for future work or improvements: Overall, I am highly satisfied with the final outcome of this self-portrait, particularly because this was my first time coding. I believe that I have been able to develop certain skills which can be used further throughout my time in this course and that I have developed a fundamental understanding of coding using p5js. As for future improvements, I would like to become more comfortable with understanding what certain functions do such as the curves and arcs, as I found the most difficulty in trying to use these elements and I believe that they could have helped me in creating certain features like the hair and clothing. I would also like to deepen my understanding of what the numbers within certain functions represent in order to more effectively position and adjust the shapes without the struggle of spending too much time trying to figure out their coordinates. I am looking forward to seeing how the skills that have been developed in this assignment can help me when it comes to future coding assignments. 

Concept:

For this assignment, I was tasked with coding a self-portrait on p5.js. For my self-portrait, I wanted to create a small character which would resemble me, with my main facial features and clothing, as well as try to set a background and add in as many details as I could. This was my first experience with coding, so I really wanted to utilize the shapes, lines, and colors we discussed in class and add them into the self-portrait. 

In the beginning, I had grasped the main idea of shapes and coordinates, but not fully. I used the layout that we had already previously coded in class and decided to build off from that. I had already added in basic shapes like the circle, rectangle, and line, but I then went on the p5.js reference site to understand different shapes and how to code them into the self-portrait. From there, I added the ellipse, arc, and spline. I honestly found putting the coordinates in the most difficult, because with shapes like the arc or spline/curve, moving one coordinate without fully knowing what it does would change the whole shape entirely, and I had to go through multiple rounds of trial and error before correcting the size, area and shape that I wanted them to take.  

I created my portrait using mainly the p5.js reference website to research unfamiliar functions and better understand the different shapes available. I also used AI as a learning tool to clarify some of the concepts I found difficult to understand during the process.

Highlight of some code that I am proud of:

fill(mouseX, mouseY, 255);
  ellipse(140, 60, 130, 60);
  ellipse(90, 65, 140, 70);
  ellipse(110, 40, 90, 55);
  ellipse(500, 80, 165, 80);
  ellipse(450, 90, 125, 60);
  ellipse(45, 130, 70, 35);
  ellipse(70,125,55,30);
  ellipse(430, 150, 65, 30);
  ellipse(455,145,55,35);
  ellipse(445,145,55,35);

The part I’m proudest of would definitely be the color-changing clouds. When I first read the assignment details, I saw that it didn’t ask for any interactive elements, which for me as a first-time coder was honestly relieving, but after spending some time experimenting with the mouseX and mouseY variables I came to realize that having something be “interactive” doesn’t mean that it had to be very complicated. I was initially going to make the background interactive but thought that making the clouds be able to change color to show “weather” would be more creative. I learned that the clouds weren’t going from black to white because the fill function was reading them as RGB, but I decided to keep it because I thought the changing colors made the background more creative. 

Embedded sketch:

 

Reflection:

From this assignment, I learned the basics of coding with p5.js, how to add shapes, how x and y values work, how to layer code so that it would overlap in the way I wanted it to, how to add color, and how RGB works. I personally found adding the eyebrows was the hardest, as the spline shape was the most complicated one out of them all, and I really had to understand how to configure the coordinates and how to increase or decrease them based on the shape I wanted. What became easier by the end was definitely the coordinates, because in the beginning I honestly was adding them at random, seeing how they would fit and adjusting to them, but after understanding the formatting it became easier.  

In the future, I would like to focus on adding even more details, such as hands and clothing details as well as trying to add more interactive elements to make my image more realistic and creative. Something I would want to add if I had more p5.js experience would be moving backgrounds and animation, as I feel like it would truly let the image become more interactive and let it come to life. 

 

My concept

I wanted to build a portrait that resonated with me. Features like the eye lash and my face shape were something I wanted to particularly be mindful of. I wasn’t going for a moving or dynamic sketch but rather wanted to focus on the basic sketch and understanding javascript. Other then that, I just wanted to build off what we learnt in class. I also included that I was very tired this week from moving in and settling, so I drew a change of state to sleeping haha.

The main functionality would be the changing day and night.

Code

// I have kept a isNight variable which tracks if it is day or night
// since it is starting as false it means it is day time
let isNight = false; 

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

function draw() {
  // background changes based on state
  // so if isNight is true which is if it is night time the sky is dark blue
  if (isNight) {
    // dark navy sky
    background(10, 5, 80); 
  } else {
    // else it was day time
    background(100, 180, 230);
  }

  // sun or moon same depends on state
  noStroke();
  if (isNight) {
    // pale gray-white moon
    fill(240); 
    circle(50, 50, 50);
  } else {
    fill("yellow");
    circle(50, 50, 50);
  }

  //hair like the back of it
  fill("black")
  circle(200,220,300);
  // left ear
  fill(230, 190, 150);
  ellipse(95, 220, 18, 22);
  //right ear
  fill(230, 190, 150);
  ellipse(305, 220, 18, 22);
  
  // face
  fill(250, 200, 160); 
  noStroke();
  ellipse(200, 200, 210, 220); 
  // hair at the front of head
  fill("black");
  noStroke();
  ellipse(200, 120, 200, 70);

  // eyes
  if (isNight) {
    // closed eyes at night
    stroke(0);
    strokeWeight(3);
    noFill();
    arc(165, 190, 45, 35, PI, TWO_PI);
    arc(235, 190, 45, 35, PI, TWO_PI);
    noStroke();

    
  } else {
    // open eyes during the day
    fill(255);
    noStroke();
    ellipse(170, 180, 45, 35);
    ellipse(230, 180, 45, 35);
    fill(60);
    ellipse(170, 180, 20, 20);
    ellipse(230, 180, 20, 20);
  }

  // nose
  fill(230, 190, 150);
  ellipse(200, 220, 18, 22);

  // eyelashes
  
    stroke(0);
    strokeWeight(2);
    line(145, 170, 135, 165);
    line(152, 166, 148, 154);
    line(162, 161, 162, 150);
    line(255, 170, 262, 160);
    line(248, 166, 252, 154);
    line(240, 153, 235, 163);
    noStroke();
  

  //emoji for the lips
  textSize(65);
  text("👄", 168, 290);
}

function mousePressed() {
  // flips true to false or false to true, any click any where flips this
  isNight = !isNight; 
}

I struggled a bit with the eyelash placement. I wanted them to be at an angle, and I achieved exactly what I wanted. Especially placing them over the eyes was challenging and finding that placement. This was a trial and error process for sure and took me considerable time, but I am happy it looks like the way I want.

Embedded Sketch

 

How this was made

I started with the face and nose since they would be the same in both day and night. I couldn’t make the mouth like I wanted, so I looked at the “Getting Started with p5” where I saw the text function. I used the lip emoji in that function and then added the eyelashes and hair. I wanted these 2 to be static too with the day/night change. I added the sun in the back. I just used one main function ‘draw’ and had everything inside. I used the “isNight” variable for day and night. I changed the shape of the eye depending on the state. One interesting thing I learned was that each line of code draws on top of the last, so shapes drawn later cover the ones drawn earlier. It’s not about compiling, it’s just the order things get painted onto the canvas.

Reflection and improvements

I would make a dynamic sketch in the future and make it more personal as for now I just wanted this to be a reflection of myself (like quite literally) out of the shapes and techniques we learnt. I think I would add my neck and body too. Probably changes in state that reflect more things about me too.

 

Concept

Before starting this class, I had no prior experience using p5js. However, I have some previous coding experience, which made the learning experience a bit smoother. Given this and the fact that I’m not that much of an artists, I decided to focus on getting my basic features onto the portrait. Before even beganing to type anything, I started planning what shapes, I would use to recreate my features through code and once I had finished that I began coding.

Process

Before starting, I decided that I wanted my interactivity to be the background colors changing with every click. To do so, I began to work on the background and decided to divide it into three parts with the help of triangles. Once the background was done, I started working on the portrait of myself. I originally used circles to make up the shape of the head and body; however, I later switched them to ellipses, as I found those looked better. Next, I worked on the facial features, starting with the hair, which I made using a lot of small circles overlapping each other. Once I was happy with that, I added a few more circles to make the eyes and pupils, and created a mouth by using an arc, then I added some smaller details, such as a triangle for the nosem lines for the eyebrows and more ellipses as the ears. Additionally, I used the p5js reference website as a guide for working with the shapes.

After finishing the portrait, I started working on the interactivity. My basic idea to achieve the changing background colors was to randomise the RGB values, but at first I was unsure where to start, so I looked to The Code Train videos as a reference, specifically the video on random functions. From there, I was able to implement the random function in my code and add in the interactivity.

Code I’m proud of

My favorite part of the code is the interactivity section. After I wrote all the code for it, instead of changing color when I clicked the mouse, the background was rapidly changing non-stop. Again, I made some adjustments to it and managed to make it so the base colors were showing; however, the interactivity was still not working. I kept looking through the video and trying to change things in my code, but I was not able to make it work. After 20 minutes, I decided to ask AI for help, and it immediately pointed out to me that I had accidentally put the mouse click function inside my draw function. Immediately after fixing that mistake, the feature was working as intended.

function mouseClicked() {
    r=random(0,255);
    g=random(0,255);
    b=random(0,255);
    r1=random(0,255);
    g1=random(0,255);
    b1=random(0,255);
    r2=random(0,255);
    g2=random(0,255);
    b2=random(0,255);
  }

Reflection

As I continue this class, I hope to further my mastery of the website by learning more about it’s capabilites and create even better projects. In terms of improving this first project, I think I’d want to look into adding more kinds of interactivity, possibly some kind of animation. In addition, I’d want to learn more techniques that could have helped. Overall, I’m happy with what I was able to achieve during my first assignment using p5js.

Concept

For this assignment I needed to use P5.JS to create a self portrait. I wanted to be very practical so I did a very basic portrait of me. All the facial features had their own functions and I tried to mimic the NYU Sexton Square palm trees and front view and also added the blistering sun of Abu Dhabi. I focused a lot on the eyes, trying out all the different shapes that we were introduced to in class and also searched for P5.js reference websites to find out the different mapping for each shape and understanding how I can apply it onto a self portrait. My self portrait represents me in my favourite place and a place that also crushes me. I love NYUAD; it always brings me so much comfort. The campus is very open and being outside and seeing all the people walking around it brings me a lot of peace and happiness and I wanted to represent that in the picture. To show a bit of my personality as well I added the colour of one of my favourite musicals Beetlejuice which is green and purple but I made it more interactive with the mouse.

Highlight of some code I am proud of:

I spent a long time trying to make the reflection in the eyes interactive with the mouse. It took a while for me to figure it out, but when I was reading the reference for P5.js that the professor showed us how to access in class, I learned about mapping. It is basically used to scale down the mouse movements, so for every 500 it will only do three increments. In this, I created a mapping so it could only move on the top left side of my eye with the movement of the mouse. This is where I found it: MAPPING.

// reflection 
  fill(255);
  
  let offsetX = map(mouseX, 0, width, -3, 3, true);
  let offsetY = map(mouseY, 0, height, -3, 3, true);

  ellipse(210 - 4 + offsetX, 215 - 4 + offsetY, 4, 4);

  ellipse(290 - 4 + offsetX, 215 - 4 + offsetY, 4, 4);

Embedded Sketch

How this was made

Immediately after class I was very interested in the interactivity and the shapes, so I created the circle in circle thing with the purple and green background at the bottom half of the background. I was experimenting with it by adding more circles, changing the strokes, making the circles thicker or thinner, and everything. So when I started doing the assignment, I decided to put this inside as well. I used the reference website for P5.js for most of the shapes and then also for the mapping. I used more of the P5.js references and I also watched a few videos from The Coding Train to understand how it works more.

Reflection and ideas for future work or improvements

I wish I spent more time on the palms and the background because I feel like I could’ve done better. I feel like it could’ve been more realistic, but I enjoyed creating the palms, I enjoyed creating the sun and I enjoyed doing all of it honestly. I wish I was more creative with it. I wish I added a few more of my interests. I wish I added a hand so I could add bracelets or maybe a different colour of hijab or abaya or something like that.

 

Concept

For this project, I created a self-portrait using p5.js that represented some of my main physical features. Since this was my first time creating a portrait completely through code, I decided to keep the design relatively simple and use basic shapes to build up the different parts of my face. I focused on features that make the portrait recognizable as me, such as my brown hair, glasses, eyelashes, eyebrows, and the pink color of my clothes and lips, i also added glasses to draw the part of me that I don’t usually show to others (I wear contacts). I also chose a bright cyan background because its one of my favorite colors. What I found interesting about this project was having to think about my face differently. Instead of drawing normally, I had to break each feature down into shapes and coordinates with colors.

How this was made

I made this self-portrait using p5.js and JavaScript. I started by creating a 500 × 500 canvas and then built the portrait step by step using basic shapes such as ellipses, rectangles, triangles, and lines. I mainly worked by changing the coordinates, sizes, stroke weights, and colors of each shape until they were positioned correctly and looked like the features I wanted to include. For learning how to work with colors in p5.js, I used The Coding Train’s YouTube videos as a reference. I also used Google to look up specific color values, especially for the brown tones in my hair and eyes and the colors that were closest to my skin tone.

While working on the code, I ran into an issue where changing the strokeWeight() for my eyelashes was also making all of the other lines in the portrait bold. I wasn’t sure why this was happening, so I used AI to troubleshoot the problem and understand how the stroke settings were affecting the rest of the code. This helped me realize that strokeWeight() continues to apply to the shapes and lines that come after it unless it is changed again. I then adjusted where I placed the stroke weight so that the thicker lines were only used for the eyelashes and glasses.

Code I’m proud of

//glasses
noFill()
stroke(0)
strokeWeight(4);
line(237, 233, 263, 233);
ellipse(300, 233, 75, 75);
ellipse(200, 233, 75, 75);
line(163, 233, 133, 225);
line(337, 233, 367, 225);

One part of my code that I am particularly proud of is the code I used to create my glasses. Although the code itself is quite simple, I found making the glasses symmetrical and positioning them correctly on my face surprisingly difficult. I had to think a lot more about the math and coordinates than I expected, which was challenging for me because math is not something I am very good at. Since everything is based on coordinates, I had to think about how far each part should be from the center of the canvas and from each other. I spent a lot of time changing the numbers and checking how the glasses looked until I finally got them to line up properly.

Reflection

I really enjoyed making this project, especially because it was my first time using p5.js and actually creating a drawing through code. At first, I found it a little confusing having to use coordinates and numbers for basically everything, especially because I am not very good at math. However, the more I changed the numbers and saw how they affected the portrait, the more I understood how everything worked. For my next project, I would like to make something more interactive instead of just having a static image. I think it would be really interesting to have something on the screen change when the user clicks or moves their mouse especially since I’ve mostly understood the basics now.

Concept

For my first assignment of making a self-portrait, I wanted to create a drawing that looked as much like me as possible using the basics I learned in p5.js this week. I included details such as my hairstyle, face, ears, eyes, eyebrows, moustache, beard, and clothing to make the portrait recognizable and personal. I also added sunglasses because ever since I came to Abu Dhabi, I have had to mostly wear sunglasses when I go outside because it is often very sunny and bright here. To make this detail more interesting, I programmed the sunglasses to appear when the mouse is pressed.

Since this was my first time coding in p5.js, I wanted to challenge myself while working with the techniques I had learned. I tried to include enough details to represent my appearance without making the drawing too complicated. The interactive sunglasses also allowed me to connect the portrait to my everyday life in Abu Dhabi. Overall, I aimed to create a simple but personal self-portrait that shows both what I look like and a small part of my experience living here.

Press the mouse!

Implementation

I implemented my self-portrait in p5.js using a combination of different shapes, arcs, and lines. I used ellipses to create the face, ears, and eyes, rectangles and triangles for the neck and shirt, and arcs for the hair, eyebrows, mouth, and beard. I also used lines to create the moustache, hair details, and the sunglasses. I used different colours for the skin, hair, shirt, mouth, and background to make the portrait more detailed and visually appealing.

One of the more difficult parts of the implementation was determining the exact x and y coordinates for placing each figure in the correct position. I then thought of displaying the x and y coordinates of the mouse on the screen. This made my work much easier because I could move my mouse to the exact position where I wanted to place a point or shape and then use those coordinates in my code. This helped me position the different parts of the portrait more accurately.

I also used if and else statements to make my portrait interactive. I used an if…else statement to change the background colour depending on whether the mouse was being pressed. When the mouse is pressed, the background changes to a yellow colour indicating sunlight, and when it is not pressed, the background returns to default grey. I also used an if statement with mouseIsPressed to make sunglasses appear on the portrait when the mouse is pressed. This allowed me to make my self-portrait more interactive rather than having it remain as a static drawing.

Code I am Proud of

  function draw() {  
  if (mouseIsPressed){
    background(250, 222, 133);
  }
  else{
    background(220);
  }
// Sunglasses when mouse is pressed
  if (mouseIsPressed){
    strokeWeight(4);
    line(126,198,146,227);
    line(274,198,254,227);
    line(170,235,230,235);
    fill(50);
    ellipse(165,235,50,40);
    ellipse(235,235,50,40);
  }
}

The code I am most proud of is the part of my draw() function that uses mouseIsPressed to add sunglasses to my self-portrait. I am proud of this because it allowed me to make my portrait interactive. When I press the mouse, the sunglasses appear on the face, while the background changes from grey to a bright yellow colour. The yellow background represents the bright sunlight in Abu Dhabi, which is why I connected it with the sunglasses. I liked how I was able to use an if…else statement and the mouseIsPressed function to create an interaction that also has a personal meaning. Since this was my first time coding in p5.js, I was especially proud that I was able to create this effect and connect it to my own experience.

Reflection

I enjoyed experimenting with different shapes, colours, arcs, and lines to see how they could be combined to create different facial features. I was also really happy with how the interactive sunglasses turned out. Something I would still like to improve is to make my sketch more detailed. At the moment, I mainly relied on basic shapes, but in the future I’d like to work with new shapes and explore different ways of creating more interactive and aesthetic sketches. I also think it would be a good idea to add animations in the future, as this could make my sketches more engaging and bring them more to life.