Vijaei Posarajah 3163608
Github link: https://github.com/Vijaei/Experiment1-Interactive-Audio-Visualizer
(Issues running in chrome, run HTML file in Firefox or MS.Edge)
For this project, I had decided to expand upon the Atelier tutorials, focusing on the implementation of p5.js. I goal was to create an interactive audio visualizer where the user can input their own tracks and interact with the visuals.
The very beginning of the project focused on the in-class tutorial based around circle visualizer and a circular graph tutorial I found on Youtube: https://www.youtube.com/watch?v=h_aTgOl9J5I&list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW&index=10
What led to the final design was based on a tutorial by Yannis Yannakopoulos, where he further explains the p5.sound library and the use of the FFT (Fast Fourier Transform) algorithm.
This eventually leads to the current iteration of the Interactive Audio Visualizer, which is composed of three rings of dots of various sizes that focus on the bass, mid, and treble of the audio track. Much like the circle visualizer, the three rings change in size according to the level of bass, mid, or treble in the audio track. On top of this, a fourth circle composed of lines focused on the bass which is interactive based on the user’s mouse position on the canvas. The lines mimic a camera shutter motion that rotates in place. Below the audio visualizer is a play and pause button, along with an upload button to allow the user to upload their own track to have visualized. The design theme around the visualization is based around a spring bloom concept with regards to colors and floral motifs.
Creative Audio Visualizers by: Yannis Yannakopoulos https://tympanus.net/codrops/2018/03/06/creative-audio-visualizers/
7.10: Sound Visualization: Radial Graph – p5.js Sound Tutorial https://www.youtube.com/watch?v=h_aTgOl9J5I&list=PLRqwX-V7Uu6aFcVjlDAkkGIixw70s7jpW&index=10