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. Butterfly effect - Wikipedia

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.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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.
}
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. }
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.

Leave a Reply