For the final project, I decided to make a music tuner and visualizer. I broke it down to different functions and tried to realize them one by one.
The first function was making a music player. Here is the link to the first prototype:
https://editor.p5js.org/WentaoWang/sketches/xSZdhb9Ls
I looked into the codes in p5 reference pages and example pages. In this sketch, I managed to upload the music, preload and play the music when pressing the button. I add four sliders to play with the music, one changes the volume, one changes the frequency of a low pass filter, one changes the rate of the music, and one changes the panning of the music. I also added for buttons at the bottom of the canvas, when pressing each button, a particular sound effect will be played. I created a class for creating the sound effect players.
My second goal was to visualize the sound. Here is the link to prototype 2.0:
https://editor.p5js.org/WentaoWang/sketches/7_xixnmWC
To visualize the music, I looked into the coding train videos about music visualization. I managed to create a wavey visualization that shows the changes of the amplitude over time.
Then I looked into visualizing sound frequency, that’s when I got to prototype 3.0:
https://editor.p5js.org/WentaoWang/sketches/F2gAOI_sH
I referred to the example from p5 example page, and I was able to visualize the frequency using fft function.
I was trying to incorporate the techniques from interface lab to this project. So I add the communication between Arduino and p5. Here is the link to my prototype 4.0.
https://editor.p5js.org/WentaoWang/sketches/GfO_MLWPL
I also switched to using physical sensors to control the different parameters in the p5 sketch. I used potentiometers to realize the functions of the sliders. And I used push buttons to realize the functions of the sound effect buttons.
After I got everything working, I tried to improve the music visualization part of my project. And here is the link to my final version:
https://editor.p5js.org/WentaoWang/sketches/pGkACfokI
I used 3d functions in p5 to visualize the frequency bands, and I also added color changing based on time and mouse position to it. Although the 3d looked amazing, something weird happened. The four sound effect buttons in p5 couldn’t show up. I didn’t have time to fix that problem. But since I was also using physical sensors to control the music tuning, this project was still able to work properly.