Foundation
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.
Implementation
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.
Conclusion
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.
Nice job Ahsen. One thing that might be nice to add is a little smoothing on the color change. When the mouse goes slow it’s fine, but when the mouse moves fast there are quick jumps in color which makes it look likes it’s flashing. Some smoothing would help it smoothly fade between colors.
Got it! I will smoothen the color transitions as well as give the piece a specific color scheme.