|

http://art102.com/Mohit/Art102final.html

Canvas Full of Stars

The goal for the final project was to create a web based audio visualizer. The inspiration for this project was Particle Systems from Nature of Code and some of Reza Ali’s older work. The final result is an audio reactive particle system that reacts to various mic inputs – kick, snare & hats. Individual sliders can be used to modify the thresholds for the triggers (input) as well control the resulting rotations and distortions ( output) . I wrote custom beat detectors to monitor the mic input to trigger the visuals. The colors of the particles change with time and music. Along with it is a frequency analyzer to monitor the audio.

For the project I used P5.js for 2D UI and Frequency monitor and Three.js for the particle system. Learning P5.js was intuitive and straightforward. Lots of documentation and appropriate examples ensured smooth learning. Three.js on the other hand was a complete opposite experience. Working with WebGL can be a daunting task especially with minimal JavaScript experience.

I started working form a three.js example, stripped down the code and modified to attain the current final result.