Week 3 – Assignment

 

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.