Concept
For this project, I chose an ocean theme. I wanted something with movement and interaction, so I created fish and bubbles and experimented with waves.
I first started by creating waves using ellipses, playing around with the color and position to create the illusion of waves. I mainly used ellipses to create these shapes, allowing the waves to blend into the sea. Afterward, I added stones and seaweed to the bottom. Finally, I changed the color of the last row of ellipses to match the background color.
I worked on making interactive bubbles. This is where I started using the concepts from this week more directly, especially arrays, functions, and Object-Oriented Programming. I created an empty array called bubbles. An array is basically a list where I can store multiple things. Instead of creating a separate variable for every bubble, I can put all of my bubbles inside this one array.
I then created a class. This connects to Object-Oriented Programming because, instead of manually describing every bubble, I created a template for what a bubble should be and move. I then created different functions inside the class for what the bubble can do. The move function changes the bubble’s position every frame. This makes the bubble move instead of staying in one place. I wanted to limit how high the bubbles can move. So I added an if statement that checks whether the bubble has reached a certain part of the canvas. If it does, its speed changes direction, which makes it bounce. Through a show function, I was able to make the appearance of the bubble I wanted to include 3 ellipses to give the bubble a 3d illusion and make it more realistic.
To make the bubble interactive, I updated the code so it creates a new bubble every time the mouse is pressed. I also set the horizontal speed xspeed to 0, meaning the bubble will not move left or right. Finally, I set the vertical speed yspeed to 2, which allows the bubbles to move straight up and down instead of moving randomly. I also added a pop to remove the bubbles when pressing the keypad.
function mousePressed(){
interactiveBubble = new Bubble(mouseX, mouseY, 0,2);
bubbles.push(interactiveBubble);
After the bubbles, I created the fish. I wanted them to be colourful, so instead of making the fish one colour, I used multiple ellipses layered inside each other. For example, I used an ellipse for the main body and a triangle for the tail. Then I added smaller ellipses in different colours inside the body. At first, I had a stroke around all of the shapes, but I realized that this made the fish look messy because you could see the outline around each coloured section. I fixed this by using noStroke for the smaller coloured ellipses while keeping the stroke around the outside and the tail. This made the fish look cleaner.
I created two fish at different positions and gave them different speeds:
let bubbles = [];
let interactiveBubble;
let fish1X = 100;
let fish2X = 100;
let speed1 = 2;
let speed2 = 3;
Every time draw runs, the position increases by the fish’s speed. Since the draw function repeats over and over, the fish looks like it is swimming across the screen.
I also wanted the fish to keep swimming instead of disappearing when they reached the edge. Using an if statement, I was able to check if the fish has gone past the right side of the canvas. If it has, its position is moved back to the left side. This creates a loop where the fish continuously swim across the screen.
Code I’m particularly proud of:
The first new thing I tried was learning how to create waves using the sin() function from the p5.js reference. I used:
let y = 15 * sin(x * 0.1) + 5;
I learned that sin creates a smooth up-and-down movement, which makes it useful for creating waves. The 15 controls the amplitude, or how tall the wave is. The 0.1 controls how quickly the wave changes as x increases, which affects how spread out the wave is. The +5 controls the vertical shift, so it moves the whole wave down by 5 pixels.
I experimented with this by creating multiple waves and changing their positions, colours, and stroke weights. This was useful because I learned a new way to create movement instead of only moving objects from one position to another.
However, when I tried combining the waves with the rest of my project, I started getting errors, and some of my other code stopped working. Because of this, I eventually removed the waves from my final version. Even though I removed them, I still wanted to include them in my process because learning how sin works was something new I learned this week.
I learnt this using p5 tutorials: https://p5js.org/reference/p5/sin/.
I would also say this is the code I am most proud of, since it is something new I learned on my own and enjoyed very much. Next time, I would like to learn how to integrate this into my work.
Reflection
In the future, I would like to be able to mix different types of code and try to learn more code on my own. I would also like to add different types of code and designs into my work. For example, in this project, I could have added new animals that were less basic and more challenging to make and make them more interactive. In terms of using ChatGPT, I only used it when adding new code and for the bubbles, mainly to learn how to make them move up and down. I would like to become more independent with coding so that I can experiment and figure out more things on my own.
Reference
sin. (n.d.). https://p5js.org/reference/p5/sin/
