The final goal was to create a visual equalizer that represented the song that was playing. To create all the elements that are required and make it look nice was a challenge. We were required to use different form, color and code-based animation to create an equalizer that had a wow factor.
Solution
Many steps were taken to arrive to the final solution. When I started the project, all I was concerned about was getting the code to work. So I started off playing around with the code. Many hours were spent doing this. Because all the code was provided to all the students, coming up with something original was quite difficult. After browsing through the Hype Frameworks files, I thought perhaps coming up with something interactive would be original and possibly something no one else would do. I wanted that wow factor and the one set of Hype files that impressed me the most was the proximity one. So the Hype files that I ended up using were the sound analyzer, to actually move the symbol to the music, the color pool framework to randomly change the color of the symbol, the mouse move to make the assignment interactive, and the proximity file to make the interaction interesting. 1The result I got after hours of playing around was five symbols that move to the music (specifically the bass but other frequencies as well) and when the mouse moves over the symbols they spread out in proximity to the mouse and each other.
The next step was to create the design elements. There were many options to choose from. In the end, I decided to go with something I’m interested in: Movies. I have many favorites but I had to choose one that I could symbolically represent. After trying to decide for hours, I decided to do one of the Batman trilogy movies. The symbol I chose was the Bat symbol.
I decided to make my theme The Dark Knight, as it is one of my all time favorites. But I couldn’t find an appropriate background to match the symbol. I decided to go with Batman Begins. I found a few images that suited the symbol and animation.
Once that was decided, I made adjustments to the code. The final result was a picture of batman with bats around him. The equalizer is made of the bat symbol. When the music is playing the bat symbol scales up and down, making it seem like the bats are flapping their wings. In addition, the equalizer is interactive. So when the mouse moves over the bat symbols, they spread out in proximity to the cursor. When this happens it seems like the bats are flying around Batman, similar to a scene in the movie where Batman is running and uses the bats as cover. Finally, there was the selection of the song. I could not find an appropriate soundtrack from that movie, so I chose one from The Dark Knight. The track is called Why So Serious? It has varying frequencies so at different parts of the track the bat flutters at different sizes. The alpha was also adjusted so that at a lower bass they are more transparent. It gives a better visual representation of the sound.
Click on the link below to view the final assignment and more project details.
http://jpama.ca/final/final.html
