This project combines music playback with dynamic wave visualization using p5.js. It analyzes the frequency spectrum of a loaded audio file in real-time and creates a mesmerizing visual representation that pulsates with the music.

• Real-time analysis of frequency spectrum using Fast Fourier Transform (FFT)
• Dynamic wave visualization that responds to the music's bass, mid, and treble frequencies
• Trailing effect achieved with a low alpha background
• Interactive start: press the mouse to begin music playback and visualization

1. Clone the repository or download the source files.
2. Place your desired music file (in .mp3 format) in the project directory and name it music.mp3.
3. Open the index.html file in a web browser.
4. Click and hold the mouse to start the music playback and visualize the dynamic wave.

• Adjust the alpha value increment in the draw() function to control the fading effect.
• Experiment with the map() function parameters in the drawDynamicWave() function to modify the wave's behavior and appearance.
• Explore additional p5.js features to add more visual elements or effects.

• p5.js: A JavaScript library for creative coding, providing a full set of drawing functionality.

A code project by Wong Jo-Hann

23/24 Creative Making: Design and Coding Visuals

Creative Computing BSc class

UAL CCI University Of the Arts London