I set out to make an interactive design based on music bars, like those shown in the image below. OOP was a huge help, as this was the first assignment design I am satisfied with having created. I envisioned 2 sets of music bars sideways (from the right and left) widening and shortening depending on the position of the mouse. While at first I set out for a blocky design, my final product ended up being more smooth and wave-like.
After familiarising myself with the OOP syntax, I worked on a class to make a rectangle whose width increases when the mouse moves closer to it. The first problem I faced was trying to connect the mouse movement to the bar width. I overcame the obstacle by first calculating the distance between the base of the bar and mouse position by using the dist() function. I then used this to map the fluctuating value onto the bar width. This can be seen in the updateBar() function in the LeftBar class and RightBar class.
I spent the bulk of my time perfecting this so that when I do produce many bars using a ‘for’ loop, the bars widths would gradually increase and decrease in relation to mouse and eachother. The closer the mouse is to the base of a bar, the longer its width is.
I made the bar height a global variable on line 2 so that it is easy to adjust the smoothness of the curve. I chose to keep it small (1 pixel), so that the movements appear smooth and satisfying. This smoothness reminded me of lava lamps, so I went ahead and coded fluctuating colors that change based the same class variable, “distance”, that I used in the maping function.
So far all my code is object oriented. I didn’t want to leave the middle of my design empy so I added some spinning squares that I feel gives the piece its hypnotic nature. I found it quicker and easier to just copy and paste the code I wrote for one square over and over with small adjustments rather than object orienting this simple part, so that’s what I did. This may be why my code is longer than it needs to be. I gave the larger squares a lower saturation and brighness value to give the piece some depth.
OOP made my code so much more readible and organised. Furthermore, I gained more control over my art piece and am more confident to code my vision onto the digital canvas.