Overview
Sketch link: https://editor.p5js.org/ChloeYan/sketches/7-2p1KNWs
One sentence description
The 3D sphere and background color change according to the music’s frequency and amplitude.
Process
My idea is to draw many points and let the overall shape change with the rhythm of the music. Then, I saw this shape on YouTube, and I found it very interesting, so I followed this tutorial to create the initial shape: https://www.youtube.com/watch?v=SGHWZz5Mrsw. I then made some modifications to the code. The change in the shape of the figure is controlled using a slider bar.
The initial shape:
According to some resources, when analyzing a piece of music, the extractable values are: Frequency / FFT, Amplitude, Beats Per Minute, and Spectral Peak. I chose to analyze the FFT and Amplitude of the music and then use these data to alter the shape of the graphics.
The parts that change based on the music data are: the size of the figure, the color of the figure, the shape of the figure, the style of the figure, the rotation angle of the figure, and the background color.
Shape Size Change: The size changes based on Amplitude using the scale() function.
Shape Color Change: Change color based on frequency. Since I wanted to change the brightness, I switched the color mode to HSB.
Shape Change: Change shape based on frequency. For this process, the main task was to map the music values to the slider bar values and then control the shape transformation of the figure.
Shape Style Change: The style changes based on Amplitude. I used console.log() to print out the Amplitude values, which were mostly around 0.2. So, I set the shape to consist of points when the Amplitude level > 0.2 and to consist of lines when the Amplitude level < 0.2.