Project Link and Brief Description

Here is the p5 link: https://editor.p5js.org/CassieHuang/sketches/honE1Rbrw.

In this mini project, I created an interactive particle system using OOP that features colorful bubbles of varying sizes and speeds, each with its own unique appearance and disappearing time. Additionally, the user can change the wind direction using arrow buttons to influence the bubble movement.

Demo

Coding

Bubble Appearance:

I initially attempted to give the bubbles different reflected colors by assigning their color properties individually, like this. However, after exploring some references, I discovered an alternative approach using a conical gradient to create a more dynamic and visually appealing edge color for the bubbles. This conical gradient method provided a smoother transition between colors, enhancing the appearance of the bubbles.

Bubble Removal:

• To manage the removal of bubbles from the canvas when they reach their predefined disappearing time, I implemented a mechanism that automatically detects when a bubble’s time limit has been exceeded. In order to achieve a natural and gradual “break” of bubbles, I created a checkDuration function inside of the Bubble object. This function helps me to remove bubbles from the array once they’ve reached the end of their lifespan, ensuring a seamless visual effect as they disappear.
• What’s more, to ensure the fluency of the animation, I limited and controlled the number of objects in the bubble array.

Interaction Between Bubbles and Wind:

I created a method within the Bubble object called updateDirection(other) to control the interaction between bubbles and the wind direction. This function allows the bubbles to adjust their movement based on the current wind direction. Depending on the wind’s direction (up, down, left, or right), the bubbles adapt their motion accordingly. 

Reflection

• OOP Understanding: Based on the reading and the project, I learned that OOP is a programming paradigm that revolves around the concept of objects. Objects are instances of classes, and they encapsulate both properties and functions. And a class is a template for creating objects. It defines the structure and behavior that its objects will have. An instance is a specific object created from a class. Each instance has its own set of attributes and can invoke the methods defined in the class.
• Effectiveness of OOP: OOP makes code more modular because code can be organized into classes, making it easier to understand and manage. Also, classes can be reused in different parts of the program or in different projects.
• Objects in the Bubble Project:
  • Bubble Class:
    • Properties: x, y, dia, speedX, speedY, hOffset, resistanceX, resistanceY, duration, and startTime.
    • Methods: move, display, updateDirection, and checkDuration.
    • Behaviors: Bubbles move, and disappear over time.
  • Wind Class:
    • Properties: x, y, and direction.
    • Methods: update and display.
    • Behaviors: Wind direction can be changed by user interaction and influences bubble movement.

  With the Bubbles project, I effectively learned how to use OOP to create an interactive and visually appealing particle system. By designing the Bubbles and Wind classes, which encapsulate the properties and behavior of Bubbles and Wind, the code is modular and maintainable. The use of dynamic and random properties of Bubbles and vanishing times adds to the complexity and interactivity of the project. The key challenge is to strike the right balance between abstraction and implementation while keeping the code clear and organized.