Concept

When I started thinking about how I wanted to use Object-Oriented Programming (OOP) in my project, I imagined an underwater world. I wanted to make something calm and relaxing, so I created a digital aquarium. In this scene, bubbles float gently to the surface, colorful fish swim across the canvas, and seaweed sways back and forth at the bottom of the ocean.

Each time the sketch runs, the scene looks slightly different. The bubbles start at random positions and have different sizes and speeds. The fish are given random colors and swim in different directions, and even the seaweed moves with slightly different timing. This randomness makes the project feel alive,  it never looks exactly the same twice.

I also wanted the viewer to feel like they could interact with the piece. When you click anywhere on the canvas, new bubbles appear, as if you are adding more air into the water. I think this small interaction gives the viewer the feeling that they are part of the underwater world, and they can keep changing it over time

Code I am proud of

Since this was one of my first tries using OOP, I am proud of how I used classes and arrays to keep my code neat and reusable. Instead of writing separate code for every single bubble, fish, or piece of seaweed, I made classes for each one with their own properties and methods. Then I stored all the objects in arrays and used a simple loop to update and display them. It made my code much easier to read and change, if I want to add more bubbles or fish, I just push a new object into the array and everything works automatically.

function displayBubbles() {
  for (let b of bubbleArray) {
    b.update();
    b.show();
  }
}

Also, there was some difficulties, for example, all the bubbles were moving in perfectly straight lines, which looked too mechanical. To make them look more natural, I added a sin() wave offset and a slight random angular speed so they gently drift side to side as they rise

update() {
    // Move upward and slight sideways wiggle
    this.y -= this.speed;
    this.x += sin(this.angle) * 0.5;
    this.angle += this.angleSpeed;

    // reset bubble when it leaves canvas
    if (this.y < -this.size) {
      this.y = height + this.size;
      this.x = random(width);
    }
  }

Sketch:

Click the mouse to add more bubbles

Reflection

I am proud of how this project demonstrates the use of Object-Oriented Programming (OOP), arrays, and dynamic interactivity to create a visually engaging underwater scene. I was able to organize the code cleanly, avoid repetition, and make it scalable, while arrays allowed for easy iteration and animation

Yet, I think for the future development, I could increase interactivity by having fish respond to the mouse or implement bubble popping effects, introduce more dynamic visuals such as a gradient background, diverse sea creatures, and multi-layered seaweed for depth, and incorporate physics-based movement or sound interaction to create a more immersive experience. Overall,  for me this project combines programming, aesthetics, and interactivity that explores potential of generative digital art.