Experiment 1: Interactive Audio Visualizer

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)

Programming Language: JavaScript(p5.js and sound.min.js)

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.

Project Description: 

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.

Creative Audio Visualizers

circle_

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.

Sketch Documentation:

visualizer

visualizer-2 visualizer-3 visualizer-4

Code Documentation: 

code-1 code-2 code-3 code-4

Refrences:

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

https://p5js.org/reference/#/libraries/p5.sound

 

 

 

 

Leave a Reply