Author: Shamma AlMheiri

Press F or f to make it fullscreen

YouTube videos of my project for both of the outcomes

Losing Screen – https://youtu.be/a-SeZ87uhxw

Winning Screen – https://youtu.be/bEHMXNKBAsE

Concept

For my midterm project, I originally wanted to create an endless runner game where the user could choose between different music genres. Each genre would have random songs, and the background and visuals would change depending on the music. I wanted the user to have a different experience depending on which category they picked.

However, when I started working on the code and putting the different parts together, I realized that creating multiple genres, songs, and backgrounds would be too complicated for me to manage within the time I had. So, I decided to take one of the songs I picked for the childhood nostalgia category and build my game around it.

My inspiration came from the movie Wreck-It Ralph, especially the Fix-It Felix Jr. game shown in the movie. I personally really liked how the game was displayed, including its building and overall look, so I decided that I wanted to create my own game inspired by it. I also wanted to use the building as part of my background design to make the connection to the movie clear. Instead of trying to include multiple music genres and backgrounds, I decided to focus on one idea and spend more time developing the game and its visuals.

This is the game/photo I got inspired by!

How the Project Works

The first thing the user sees when opening my game is the starting screen. It displays the title of the game, two buttons called Tutorial and Start Game, and a music control at the bottom right that allows the user to turn the intro music on or off. I used createButton() in p5 to create the Tutorial and Start Game buttons and styled them by changing their size, color, border, and font. I created the music control separately using shapes and used the mouseClicked()  function to detect when the user clicks on it. To control which screen the user sees, I created a variable called screen. This variable uses different numbers to represent the starting screen, tutorial, gameplay, game-over screen, and win screen. In the draw() function, I used if and else if statements to call the function for the correct screen.

Here is an example of how I switch between the different screens:

function draw() {
  background(200);

  if (screen === 0) {
    StartingScreen();
  } else if (screen === 1) {
    TutorialScreen();
  } else if (screen === 2) {
    GameScreen();
  } else if (screen === 3) {
    GameOverScreen();
  } else if (screen === 4) {
    WinScreen();
  }
}

When the user presses Start Game, the startGame() function stops the intro music, starts the game song, resets the game, and takes the user to the gameplay screen. The player controls Felix from Wreck-It Ralph, and the player must survive until the song finishes. I used two images for Felix, one for walking and one for jumping, so his appearance changes depending on whether he is on the ground or in the air.

To create the jumping effect, I used variables to control Felix’s position, velocity, gravity, and jump force. When the player presses the space bar, the code checks whether the game is active and Felix is on the ground before allowing him to jump.

Here is the code I used to make the character/felix jump:

if (screen === 2) {
    // space bar key makes Felix jump, but only when he's on the ground
    if (key === " " && playerY >= groundY) {
      playerVelocityY = jumpForce; // pushes Felix upward
    }

This code allows Felix to jump only when the player is in the game and he is on the ground. The playerVelocityY variable controls his vertical movement, while jumpForce determines how strongly he moves upward. Gravity then pulls him back down. This condition also prevents Felix from jumping again while he is already in the air.

I also made the background scroll from right to left to create the effect that Felix is running forward. The game gradually becomes faster, and cars and rocks appear at random intervals. A progress bar shows how much of the song has played. If Felix hits an obstacle, the game-over screen displays how long the player survived. If the song finishes before Felix hits anything, the player wins. From both ending screens, the player can press the space bar to play again or press M to return to the main menu without restarting the p5 sketch.

Code Im Proud Of

One of the parts of my project that I am most proud of is creating my Obstacle class. I wanted to have two different obstacles in my game, a car and a rock, but instead of writing completely separate code for each one, I used object-oriented programming to create one class that could manage both. I used a constructor to define the type, position, and dimensions of each obstacle, and different methods to control how they move, appear on the screen, and interact with Felix. I am particularly proud of this because it helped me understand how classes can be used to organize code and create multiple objects that share similar behaviors.

Here is an example of how I used my Obstacle class to manage the two different obstacles:

class Obstacle {
  constructor(type, x, groundY) {
    this.type = type; // picks between my two objects/obstacles a rock or a car
    this.x = x;
    this.groundY = groundY; // same ground as the character 
    this.t = 0;     // animation timer, goes up every frame
    this.angle = 0; // how much the wheels/rock have turned, starts at 0 and then will change
 
    // Set dimensions based on the object (these are also the hitbox)
    if (this.type === 'car') {
      this.width = 90;
      this.height = 45;
    } else { //rock
      this.width = 44;
      this.height = 44;
    }
  }
 
  // moves the obstacle left and moves the animation forward one step each frame
  
  update(speed) {
    this.x -= speed; // move left by the game's current speed
    this.t += 1;  // animation time which kinda makes the car look more realistic
 
  // figure out how big the circle is that's rolling
    
  let radius;
  if (this.type === 'car') {
  radius = 9;  // this is for the car's wheel
} else {
  radius = 22; // the size of the rocks 
}
// turn the wheels/rock a little bit every frame so they look like they're rolling
    
  this.angle -= speed / radius; // minus makes them spin to the left the way the obstacle moves
}

  //draws the object on the screen (runs every frame)
  
  display() {
    push(); // save the drawing settings so they only affect this obstacle
    translate(this.x, this.groundY) // move the drawing spot to where the obstacle sits on the ground
    strokeCap(ROUND);
    strokeJoin(ROUND);
 
    // Shadow on the ground for the car and rock
    
    noStroke();
    fill(0, 0, 0, 55);
    ellipse(this.width / 2, 2, this.width * 0.95, 8);
 
    if (this.type === 'car') {
      this.drawCar();
    } else {
      this.drawRock();
    }
    pop();
  }

In this code, the constructor sets up the obstacle by assigning its type, position, and dimensions. I used an if statement to give the car and rock different sizes depending on which one is created. The update() method then moves the obstacle to the left based on the game’s speed and adjusts its rotation so that the wheels or rock appear to roll as they move. Finally, the display() method checks the obstacle’s type and calls either drawCar() or drawRock() to display the correct object. What I like about this approach is that I can use the same class to create different obstacles without having to repeat the movement and animation code for each one.

Another part I am proud of is how I designed and animated the obstacles. I originally planned to use images, but instead, I decided to draw the car and rock using shapes in p5.js. I added small details to make them look more realistic. For example, I made the car’s wheels spin, its body bounce slightly, and exhaust smoke appear behind it. I also made the rock rotate as it moves across the screen. To do this, I used functions such as translate(), rotate(), sin(), and cos(). I enjoyed experimenting with these functions because I could see how small changes in the code affected the appearance and movement of the obstacles.

Another part I am proud of is how I brought all the different parts of my game together. I created separate screens for the menu, tutorial, gameplay, and endings, and connected them with the music and game controls. I also made it possible for the player to restart the game or return to the main menu without refreshing the page. Although I had to simplify my original idea, I am happy with how the final project came together and how I was able to include different features in one complete game.

Challenges and Improvements

One of the biggest challenges I faced was getting the buttons and music to work properly. This was my first time using createButton() in p5, so I was initially a little confused about how to create the buttons, style them, and make them do different things when clicked. I also had a lot of trouble with the music because there were times when the songs would not play at all. I tried different approaches based on what I knew, but eventually I had to ask Claude for help because I could not figure out what was causing the problem. Another challenge was the music on/off control on the starting screen. Sometimes it would work properly, while other times it would not respond as expected, which made it difficult to figure out what was going wrong. I also struggled with getting the cars and rocks to move the way I wanted them to, especially when working on their animations. However, after making adjustments and testing the game several times, I was eventually able to get these features working.

If I had more time, there are a few things I would like to improve. One of them is the appearance of the buttons, as I originally wanted them to use the same font as the title of my game, but I was not able to get this working. I would also like to find a PNG of Felix doing his iconic jump from Fix-It Felix Jr. because I wanted to use that specific animation for my character, but I could not find a suitable image. Another improvement would be adding more obstacles to the game. Right now, the player only encounters cars and rocks, and I think having the same two obstacles appear repeatedly could become a little boring. Adding more variety would make the game more interesting and give the player a different experience each time.

References

Font – https://www.fontspace.com/pixel-purl-font-f139571

My Audio:

The intro song: https://1421304-wreck-it-ralph-ost.mp3.pm/song/96252214-wreck-it-ralph-remix/

The game song: https://audio.com/mei-song/audio/when-can-i-see-you-again-owl-city-hd-wreck-it-ralph-soundtrack

I used the app Audacity to make the intro and game song shorter

https://editor.p5js.org/Aya_Riad/sketches/knFSEm6fM

https://editor.p5js.org/Aya_Riad/sketches/qZsp9Qete

https://p5js.org/reference/p5/createButton/

https://p5js.org/reference/p5/sin/

https://p5js.org/reference/p5/cos/

https://editor.p5js.org/Aya_Riad/sketches/XyXDfPmE4

https://editor.p5js.org/Aya_Riad/sketches/bXwvUEEpz

https://editor.p5js.org/re7l/sketches/28wsGI24p

https://p5js.org/reference/p5/ellipseMode/

https://p5js.org/reference/p5/circle/

Here are the pictures I used for my project:

Intro Image:

Game Image:

 

How AI was used:

Claude was the only AI tool I used for this project, mainly to help me debug my code and assist me with creating the buttons and getting the audio to work properly.

Concept and Initial Idea

For my midterm project, I wanted to create a game based on music. My initial idea was more of a DJ style game where the player would first choose between different music genres, such as 2000s pop, childhood nostalgia, and house music. After choosing a genre, they would enter a DJ setup where they could interact with the music. I also wanted to include a tutorial that would explain how the game works and what the different controls do.

The first sketch of my game idea

Developing My Idea

After thinking about the project more, I decided that I wanted there to be more of an actual game element rather than only having the player interact with a DJ setup. I kept the idea of choosing between different music genres, but developed the main part into a music based runner game. The player will choose a genre and then control a character that runs through the game while avoiding different obstacles. Each genre will have different music, and I also want the background and obstacles to change depending on the genre. I am also considering having some elements of the game change when the song changes.

The second sketch of my game

User Interaction

The game will begin with a starting screen called Rhythm Rush. From here, the player can choose either Start or Tutorial. If the player chooses Tutorial, they will be taken through a few screens explaining how the game works and what the controls do. If they choose Start, they will be taken to the genre selection screen, where they can choose the type of music they want to play with. Once they select a genre, the game will begin. The player will use the keyboard to control their character, using the space bar to jump and C to crouch to avoid different obstacles while the selected music plays. After the game ends, I want to include an option to restart so the player can play again or choose a different genre.

Code Progress

I have started working on the code for my project. So far, I created the starting screen for Rhythm Rush, added a background image and custom font, and started experimenting with adding sound to the game. For now, I wanted to complete the starting screen and make sure it was working before moving on to building the runner portion of the game and the different interactions.

 

Most Uncertain Part

The part I am most uncertain about is working with the music in the game. Since I want to include different songs, I want to make sure that the transitions between them are smooth rather than having one song suddenly stop and another one start. I am also still figuring out how to work with sound in my code. For example, I tried adding a song to my starting screen, but right now the audio is not playing even though I have added it to the code. I have been testing it and trying to figure out what is causing the problem. I want to get the audio working properly first before moving on to adding multiple songs and creating smooth transitions between them.

 

One thing I found interesting is that computers dont really “see” things the same way we do. When we look at someone, we can understand that they are a person, what they are doing, and what is happening around them. A computer, on the other hand, is basically looking at pixels and needs specific ways to detect things like movement, brightness, or changes in an image. This reminded me of all the games I used to play when I was younger that used cameras to track your movements, like Kinect Adventures on the Xbox. I remember having to stand in a certain area so the camera could see my full body, and then my movements would control what was happening in the game.

Thinking about how those games were able to track us also connected to the different techniques mentioned in the reading. The computer can look for movement between frames, separate someone from the background, or use differences in brightness to figure out what it needs to track. The reading also talks about how things like lighting and contrast can make this easier. This also reminded me that in some games, the camera would not track you properly if you were standing in the wrong place or the room was not set up well.

But that ability to track people also made me think about the other side of computer vision. Tracking can make interactive art really fun because, like those games, your actual body can become part of the experience. At the same time, the surveillance examples in the reading made me realize that the same ability to track someone’s body and movements can also be used to watch them without them really knowing. I think there is a big difference between choosing to be tracked because you are playing a game or interacting with an artwork and being tracked without knowing that it is happening.

Concept

For this assignment, I decided to create a random movie quote generator. I chose three of my favorite movies, The Muppets, Toy Story, and The Sound of Music, and picked two quotes from each movie. The project starts with a main screen that asks the user to click anywhere to begin. Every time the user clicks, one of the three movies is randomly selected along with one of its two quotes. I also wanted each movie to have its own screen theme rather than only changing the text, so that every generated quote feels connected to the movie it comes from.

Code Im Proud Of

I think the part I am most proud of is the river gradient for The Muppets screen. I wanted to challenge myself a little more instead of making the river one solid color, so I decided to try using paletteLerp(). I looked at the p5 reference for paletteLerp() and used it as a guide for creating the gradient. I also searched for a combination of river colors that would work well together and used those colors for the gradient. I liked being able to figure out how to put these different parts together to create the river I had in mind.

//river
noStroke();

//river gradient 
for (let i =270; i < 400; i++) {
  let amount = map(i, 270, 400, 0 , 1);
  let riverColor = paletteLerp(riverColors, amount);
fill(riverColor);
  rect(0, i, 400, 1);
}

How This Was Made

I created this project using p5. While working on it, I referred to different p5 references whenever I needed help remembering how to use certain functions or wanted to try something new. I also used Google Fonts, which is where I found the DM Mono font that I used throughout my project. For the visuals, I looked at images from each of the movies as references and used them as inspiration when creating my own versions in p5. I also used ChatGPT for help with the stars on the main screen. I originally searched online for how to create a star in p5, but most of the examples I found used more complicated code than what I was looking for. I asked ChatGPT how I could create a simple star in p5, and it suggested using the ✦  symbol as text. This made it much simpler for me to create the look I wanted for the starting screen.

References: 

hex colors for river gradient 4 colors in p5   – for some reason, the colors that I got are not showing in this link

https://p5js.org/reference/p5/paletteLerp/

https://editor.p5js.org/cs105/sketches/iCmF693Ps

https://editor.p5js.org/hychu31/sketches/7HvwXXVTK

https://fonts.google.com/specimen/DM+Mono?preview.script=Latn

ChatGPT –  for the stars

Photo References:

Reflection:

Overall, I am very happy with how this project turned out, and I am proud of myself for what I was able to create. I think I challenged myself more with this assignment and was able to create something that matched the idea I originally had in mind. However, one thing I would change for next time is giving myself more time to work on my assignment. I think this shows when comparing the three screens because The Muppets screen has a lot more detail than the Toy Story and The Sound of Music screens. If I had given myself more time, I think I could have added more detail to those two screens. For the next assignment, I want to give myself at least three to four days to work on it so that I can take my time and develop my ideas more fully.

Something that drives me crazy actually happened when I was playing Hogwarts Legacy, which is a video game. I was doing a side quest where I had to get to another area that I could see on the map, but every time I tried to fly there, I would just reach the border of the map and could not go any further. Usually, there are checkpoints that let you travel to different areas, but because I had not discovered this area yet, I had to figure out how to get there myself. Eventually, I found out that I had to go through an underground tunnel to reach it. It was so frustrating because I knew where I needed to go, I just had no idea how I was supposed to get there. I think even a small hint telling me that I needed to go underground would have made it much easier. This made me think about the idea of discoverability in the reading because the game showed me where I needed to go, but did not really help me understand how to get there.

For interactive media, I think one thing I took from the reading is thinking more about whether people actually know how to interact with what you make. There are so many ways someone can interact with something, like clicking or even moving, and I think it can be easy for the person making it to assume that people will just know what to do. This actually made me think about some of my p5 projects because I obviously know how they work since I made them, but someone seeing them for the first time might not. Even adding small instructions or text telling someone what they can do could make the interaction clearer. Once they interact, there should also be some kind of response so they know that what they did actually worked.

 

My Concept:

For this assignment, I decided to create something relatively simple. My idea was to have a bathtub with foam bubbles resting on top of it. Whenever the user presses the screen, a new bubble appears from the bathtub and begins to float up. Each moving bubble is given a random position, size, and speed, which means that the bubbles do not always appear or move in the same way.

Code I’m Proud Of:

class Bubble {
  constructor(){
  this.x = random (10,390);
  this.y = random (275,300);
  this.xspeed = random (-0.5,0.5);
  this.yspeed = random (-3,-1);
  this.size = random(15,40);
  }

  move(){
  this.x = this.x + this.xspeed; 
  this.y = this.y + this.yspeed;
  }

  show(){
  //circle
  fill(255,255,255,120); 
  stroke('#90e0ef')
  circle(this.x, this.y, this.size);
  
  //white highlight in the circle
  noStroke();
  fill(255,255,255,220);
  circle(
  this.x - this.size * 0.2,
  this.y - this.size * 0.2,
  this.size * 0.2
);
  }
}

This is a section of code that I am really proud of because this is where I was able to take the idea of classes that we learned in class and actually use it in my own work. At first, I was a little confused about how one class could be used to create multiple bubbles. However, after looking back at the class presentations and watching The Coding Train’s video about classes, it started to make much more sense. I used the constructor to give each bubble a random position, speed, and size, which means that the bubbles do not all look or move in the same way. I then used the move() function to change the position of each bubble and the show() function to make it appear on the screen. I think this part helped me understand classes much better because I could actually see how the same class was being used to create multiple bubble objects.

How This Was Made:

I created this piece using p5. While working on this assignment, I referred back to my class notes and the presentation, as well as the p5 references and The Coding Train videos whenever I needed some extra help understanding how to apply the different concepts to my code. I also used ChatGPT to help me choose the colors and transparency values for the bubbles because I had an image in mind of how I wanted them to look but was struggling to recreate it in p5.

references:

https://p5js.org/reference/p5/mousePressed/

https://p5js.org/tutorials/variables-and-change/

https://p5js.org/reference/p5/rect/

ChatGPT – assistance with choosing the colors and transparency values for the bubbles

Reflection:

This assignment helped me become more comfortable with classes and arrays, which I initially found difficult to apply to my own work. One of the main problems I faced was organizing my code and knowing where each function should begin and end. I accidentally placed some of my functions inside other functions, but working through this problem helped me better understand the structure of my code.

Although I used ChatGPT to help me choose the color and transparency values for the bubbles, next time I would like to challenge myself to figure out these details on my own through experimentation and the references available to me. I think this would help me become more confident in making my own choices and solving problems independently. If I continued developing this piece, I would also like to allow the user to press the floating bubbles to pop them and add more details to the bathtub and background.

Before this reading, I never really gave much thought to what interactivity actually means. I knew when something was interactive, but I never really stopped to think about what makes one interaction stronger than another. I really liked the idea that interactivity can exist at different levels rather than something simply being interactive or not. For example, I obviously knew that a conversation was interactive because you respond and reply to another person, but I never thought about how the way a conversation flows can actually affect the level of interactivity. If one person is doing most of the talking and the other is barely responding, it is very different from a conversation where both people are listening, thinking, and responding to each other. I think this helped me understand interactivity much better because it is not just about getting a response, but about how much of an exchange is actually happening. For me, a strongly interactive system would be one where the users actions actually matter, and the system responds to what they are doing in a way that keeps that exchange going.

Thinking about my own p5 work, I honestly have not really included much interaction in my projects so far. I feel like this is something I need to start adding, even if I begin with really simple interactions. For my project this week, for example, I could use mousePressed() so that the user can pop things on the screen, add more objects, or decide how many they want to add rather than everything already being decided for them. I think even simple interactions like these could make a big difference because the user would actually be participating in what is happening on the screen instead of just watching it.

My Concept

For this assignment, I decided to come up with something relatively simple that incorporates repetition and movement into one piece. The idea is to have a circle moving left and right while multiple lines are attached to it from above, starting from different points along the top of the canvas. As the circle moves, the lines move slightly as well, making them appear as though they are being pulled by the circle. I also wanted the background to respond to the movement, so I used different shades that change as the circle moves across the canvas.

Code Im Proud Of

  //multiple lines
  for (let lineX = 20; lineX < 400; lineX = lineX + 30) {

    //makes the lines move with the circle
    let pull = (x - 200) / 8

    //draws the line from the top of the circle
    line(lineX + pull, 0, x, 300)
}

This is a section of code that I am really proud of because this is where I was able to take the idea of loops that we learned in class and actually use it in my own work. At first, I was a little confused about how I could use the loop together with the movement of the circle, but once I worked through it, it started to make a lot more sense. I used the loop to repeat the lines across the canvas instead of having to write each line individually. I started the first line at 20 and then increased it by 30 every time the loop repeated, which created the space between each line. I then used the pull variable to slightly move the starting point of the lines depending on where the circle was. Since all of the lines end at the position of the circle, they move along with it as the circle moves from side to side. I think this part helped me understand the loop much better because I could actually see what it was doing in my own piece.

How This Was Made

I created this piece using p5. While working on the sketch, I referred back to my class notes and the presentation, as well as the p5 references whenever I needed some extra help understanding how to apply these concepts to my code.

References:

https://p5js.org/reference/p5/loop/

https://p5js.org/reference/p5/for/

https://p5js.org/reference/p5/if/

Reflection

This assignment allowed me to improve my skills in writing loops and if statements, which were a bit difficult for me to apply and understand before working on this piece. At the beginning, I struggled a bit with figuring out how everything would fit together and how the different parts of the code would work with each other, but as I kept working on the assignment, it became much easier for me to understand. The if statements also started making more sense once I saw how they influenced the movement of the circle and the changes in the background. In the future, I would like to make this piece more complicated as I learn new things in p5 and improve my coding skills. I believe that I could do much more with the same idea, especially with the movement of the circle and the way the lines interact with it.

Casey Reas’s talk really changed the way I think about art. I never thought that code and art could come together because they were really different in my eyes before, but after watching/listening to his presentation, I now see them as connected. I always saw code as more of a technical thing, while art felt free and expressive, so it was kind of mind blowing to see him combine the two. He talked about different artists and showcased a lot of their work, along with his own, and it was really interesting seeing how many different ways people have found to turn shapes and code into art. It reminded me a lot of what we do in class with p5, where we use simple shapes and basic code to build something more complex.

In my own work, I personally want to bring in randomness by setting a few simple rules for shapes or patterns, and then letting things like color, size, or placement change around a little. For example, I could have a circle that changes size every time, so its never quite the same shape twice. Thats also where the whole balance thing comes in for me, because in my opinion, total randomness or total control in code doesnt actually make good art by itself. Too much control can make the art piece feel like its missing something, but too much randomness can make it look like a mess with no direction. That said, being planned out isnt always a bad thing either, sometimes having more structure is exactly what a piece needs to actually work. But I feel like the balance really depends on the piece itself, overall its somewhere in the middle, enough structure so it still makes sense, but enough randomness that it stays unique and doesnt feel too planned out.

My Concept:

My concept for this assignment was to create a semi-realistic portrait of myself. I wanted to experiment with shapes and lines while also getting more comfortable with using p5 for the first time.

Pieces of Code I’m Proud of: 

//body
  fill('#394cac')
  arc(200,340,140,20, PI, PI + HALF_PI,) //left shoulder
  arc(240,340,140,20, PI + HALF_PI, TWO_PI) //right shoulder
  noStroke()
  square(130,340,70) //left side
  square(190,355,70) //middle
  square(240,340,70) //right side


  //neck
  fill('#f9e7c8')
  square(200,290,40)
  arc(220,330,80,60,0,PI)

  //Body part 2
  noFill()
  stroke(1.5)
  line(130,340,130,340) //left side half shoulder
  line(130,340,130,400) //left side lining
  line(180,350,180,400) //left side inner lining
  line(310,340,310,340) //right side half shoulder
  line(310,340,310,400) //right side lining
  line(260,350,260,400) //right side inner lining

I’m really proud of the neck and body of my portrait. This was probably the part that took me the longest because I found the arc() code really hard to understand at first. I didn’t really understand what all the different values meant or how changing each one would affect the arc. When I started using it to create the body/shirt, it became even more confusing because I had to think about not only the shape of the arc, but also its position and how it would connect with the neck.

There was a lot of trial and error. I kept changing the values in the arc() code and seeing what would happen until I slowly started to understand what each part was actually doing. I also struggled with getting the lower neck to connect properly to the shirt, so I had to keep changing the position of the code until I got the result I wanted.

The shirt lining was also really difficult because at first the line wasn’t showing at all. After playing around with the code, I realized that if I wanted to use the line as just an outline for the shirt, I needed to add noFill() and strokeWeight(1.5) so the line would actually show the way I wanted it to. This was something I didn’t know before, so being able to figure it out on my own through trial and error made me really proud of this part of my code.

How This Was Made:

I created this portrait using p5 and the knowledge I learned in class. While working on it, I also went back and reread the presentation that was shown in class whenever I needed to remember how certain parts of the code worked. I also used p5 reference links that were provided in the presentation, especially the line() and the arc() references, which helped me understand how to use them in my portrait.

References:

https://p5js.org/reference/p5/line/

https://p5js.org/reference/p5/arc/

My Reflection:

Overall, I’m really proud of how my portrait turned out, especially since this was my first time using p5. Even though it doesn’t look exactly like me, I’m happy with how I was able to use different shapes and code to create my own version of a portrait. There are definitely things I would want to improve next time. I would like to create a more fun and interactive background instead of keeping it simple, and I would also want to make the hair look more realistic and add more details to the portrait. But as a start to my p5 journey, I have to say I’m really proud of the final outcome and excited to see what else I can create with it.