Author: Shamma AlMheiri

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.