“Colors, like features, follow the changes of the emotions.” — Pablo Picasso

Concept:

Recently, I watched Disney’s Pocahontas, and one of the songs that has been become quite a hit was “Colors of the Wind”. It is a beautiful and emotional song with a message about living in a more interconnected, diverse and colorful world. Which is what I wanted to represent with the use of colorful circles, moving around as if they were in the wind. And it is quite mesmerizing to look at the different circles in a wide range of color. To me, it gives a nice representation of how we look at ourselves in society, where we’re all different and unique, yet living side by side, we creating this enchanting community of diversity. Take a peak below, by clicking on it with your mouse (or tap if you’re on mobile).

How it’s made:

So for this assignment, I utilized OOP and arrays to generate the circles. I created a class where I defined the main variables within the constructor function, which is integral to the class. Then for the movement of the circles, I made a seperate function which manages the movement by increasing the direction vector of the circles by a random amount. Then I made a function to actually display the circles.

Now the way I went with generating multiple circles was using an array, and then a for loop to just append circles to it. And finally, another for loop so the balls are displayed and have movement. Now for the color factor, I went for a simple effect where if you click the canvas, the colors of the circles rapidly change. This did in turn create a sort of LSD effect so if you’re sensitive to epilepsy, I would not advise you holding down the mouse button.

Of course, there are probably much more efficient ways to create this same effect, but honestly, I just randomly stumbled upon it. I was just playing around with the size and color variables and in the end, this is what I produced. It looked quite satisfying so I decided to go along with it.

A highlighted bit of code I’m proud of:

This bit of code I’m quite proud of as I struggled with how to make the circles not leave the boundaries of the canvas. It was quite difficult intially as I just assumed that it was as simple as defining  specific parameters and that’s it. But then I thought more about it and wanted to make it dynamic, instead of static.

So I tried and eventually was able to make it so the circles sort of bounce off the walls and go back towards the center of the canvas. In this sense, they still won’t disappear off the canvas, and won’t be hindered in the velocity.

move() { //This function gives the balls vectors of directions
    this.x += this.dx;
    this.y += this.dy;

  //The if statements constrain the balls so they don't go off the canvas
    if (this.x < this.d / 2 || this.x > width - this.d / 2) {
      this.dx *= -1; 
    }
    if (this.y < this.d / 2 || this.y > height - this.d / 2) {
      this.dy *= -1; 
    }
  }

Reflection:

This was quite a fun project to make. It was interesting experimenting with classes and I can see why they are quite fundamental in not just efficinizing your code but also dynamically creating new objects and changing their variables. It is insanely useful to shorten the code used and to add as I would like to refer to them as characteristics to objects, through the use of functions.

And I think the artwork, while simple in nature, does have a good amount of deep meaning. If you click the mouse, you get a different color for each and every circle. And that to me just is a beautiful way to see the world, where each and every one of us are a different color, come in different shapes and sizes and go in random directions. When put together, we create a beautiful and colorful muse, a nice representation of our world.