Week 3 – OOP (Tornado Effect)

Concept/Inspiration:

This week, we dived into object-oriented programming and arrays. I wanted to utilize a certain movement on a set of objects, and for that, I decided to arrange an array of shapes that would be independent but would also have a function that could move them in a certain pattern.

My inspiration came from a phenomenon called the “Butterfly Effect”. For those who don’t know, the butterfly effect is the idea that small things can have non-linear impacts on a complex system. The concept is imagined with a butterfly flapping its wings and causing a typhoon.

Therefore, in this sketch, there are multiple variables that rely on the random() function in order to show shapes on screen.

WARNING: The sketch plays multiple colors shaking at a really fast speed. If you are sensible to any of these effects, please proceed with caution.

Code Highlight:

In order to make every shape move on its own, I decided to modify the X, Y values of the object itself. The class would contain a function called move() that would slightly change the X and Y of the object by a random value. This random value will change based on the mouse position to create the idea that the “tornado” is following the mouse.

class Form {
  constructor(x, y, r) {
    this.x = x;
    this.y = y;
    this.r = r;
  }

  move() {
    if(mouseX>=this.x){
      this.x = this.x + random(5);
    }
    else{
      this.x = this.x + random(-5);
    }
    
    if(mouseY>=this.y){
      this.y = this.y + random(10);
    }
    else{
      this.y = this.y + random(-10);
    }
    
    //vibration. Can also use perlin noise.
  }

Future Improvements:

I realized just after writing the code that several parts of the structure could have been improved. One big thing I missed while writing it was the fact that I could have attached the color to the object in order to make every shape a random color. However, I decided to keep it as it is because it would look too fuzzy. In the future, I would like to plan accordingly how I intend to express my inspiration, because even though this topic (butterfly effect) offered many different possibilities, but I couldn’t adapt any of them to P5js.