Concept

For this assignment, I decided to approach the project from a more artistic perspective. My vision was to create an abstract artwork using a variety of shapes and colors. Therefore, I focused more on the visual composition and construction of the shapes rather than on interactivity.

Progress

Before beginning to work on the code, I sketched what I had in mind in a sketchbook. This made it easier to plan and determine where each part would be placed. I then went on YouTube to look for tutorials on how to code curves, which are a major part of my assignment. After finishing the line art, I began working on the colors and adding different shapes. I also decided to create some of my own shapes, such as the flower, which was fun to experiment and try out. Lastly, I wanted to add something more to the background, so I looked up different pattern examples for inspiration.

My code highlight

A part I am proud of is the pattern I created for the background. It was something new and interesting for me to learn, and I enjoyed seeing how a simple pattern could make the overall artwork feel more complete. I wanted to experiment with different types of patterns and explore how they could change the mood of the artwork, but unfortunately, I did not have enough time to try them out.

background(80,150,70, 150)
  fill(80,150,0);
  strokeWeight(3);
  rectMode(CENTER);
  let space = 50;
  for (x=0;x<width+50;x+=space){
    for (y=0;y<height+50;y+=space){
       line(x,y,x+space,y);
       line(x,y,x,y+space);
      circle(x,y,5)
      stroke(200,100,150,150)
      circle(x,y,15)
    }
  }

Reflection

There were many things I was hoping to add to my project. One of them was an interactive element, which unfortunately was not working for some reason. I also wanted to add more details and elements to make the artwork feel even more abstract and visually interesting. For my future projects, I hope to learn more about animation and explore different ways to make my projects more interactive. I also want to learn more tips and techniques that can help me code more efficiently and speed up my workflow.

My Concept
For our first assignment for IM, we had to make a self portrait of ourselves using some skills we learned in class. I was originally planning to do just a normal self portrait of me outside, maybe with the sun or grass. But, due to the pure amount of time spent coding, I thought it’d be fun to portay myself working on the computer. Almost as if the self-portrait is really just me sitting at the desk coding myself.

Highlight of Code I’m Proud of: 

//mouth
noStroke();
fill (0)
arc(200, 240, 60, 50, TWO_PI, PI);
//inside mouth 

fill(1000)
rect(200, 242, 40, 5)
//teeth
fill(255, 105, 180)
arc(200, 260, 25, 15, PI, TWO_PI);
//tongue

The reason why I was so proud of the mouth is because it was the last thing I worked on, so it ended up being a good showcase of everything I had learned. It took me so much less time to do compared to every other facial feature and it made me happy to see that I had gotten somewhat comfortable with the coding process.

Other parts of the sketch may have been harder to do but this one felt important to highlight because it was so easy. I was incredibly happy to see myself improve.

Embedded Sketch

How This Was Made:
The code was made by looking at the references page on p5js and by watching the first four videos on Youtube by The Coding Train. The videos were extremely helpful since they gave me a good starting point when I got on the website. The videos also helped explain some things I was a bit unsure about (specifically how to do the the order of the code, but also helped with pointing out certain features that ended up being incredibly helpful and made the program so much easier to work on [such as the high contrast feature!])

There were some times when I couldn’t figure something out so I tried searching on google or reddit to see if they had an answer, but those didn’t really help much so I wouldn’t consider them a part of the process. All of the credit should be attributed to the youtube videos and the references on p5js.

Reflection:
Truthfully, I struggled a bit when it came to how I wanted to portray myself. A part of me considered pulling out all the stops and trying to do a full pixel art rendition of myself as a challenge. However, I realized that going that route would be more limiting than challenging. I wanted my portrait to have a multitude of shapes and colors. I wanted to play around with code I couldn’t figure out in class and make sure I properly understood every line of code I was typing. Pixel art would only limit me to squares and squares only.

So I decided to do a very simplified version of myself. The more I coded the more I stopped caring about how I looked and the more I cared about what code I was learning and whether I was actually retaining the information. A lot of emphasis was put on understanding what exactly the numbers represented in each shape. I didn’t want to just insert multiple numbers together and pray they worked out in the end, I wanted to prove I actually understood what I was doing.

While maybe not obvious at a first glance, there are a few parts of the portrait I can attribute to my exploring. The bit of hair under the hijab was my way of playing around with arcs since I did not understand how they worked at all. Meanwhile the eyelashes were me figuring out how lines worked and whether I could easily move them around if I so please. I even got the colors from learning about RGB and playing around till I saw a color that fit. Overall, I’m pretty happy with the end result!

However, a part of me does wish I also tried my hand at adding an interactive section, but I was worried that doing so would cause me to stress out over the assignment rather than use it as an opportunity to learn. Hopefully I’ll be able to add a bit of interaction and movement in the next assignment!

 

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.