This interactive music visualizer was crafted using p5.js for real-time graphics rendering and p5.sound for audio analysis (FFT & Amplitude). The retro arcade aesthetic is achieved entirely with semantic HTML5 and custom CSS, leveraging features like CSS Variables for dynamic themes and box-shadows to simulate neon glow.
The core, fluid movement of the columns is driven by Perlin Noise, which generates the evolving wave patterns you see even when the music is quiet. The sketch uses frameCount to scroll the noise field, making the terrain appear to move and evolve smoothly over time.
The p5.FFT Fast Fourier Transform (FFT) breaks the music into frequency bands. The height of the columns is determined primarily by the energy of the bass band, causing the entire noise-driven terrain to surge dramatically on heavy beats.
This effect is achieved by calculating the column height as the "Noise Height" multiplied by an "Audio Scale Factor" derived from bassEnergy. Furthermore, the trebleEnergy dynamically controls the "shininess" of the boxes, making them more silvery and metallic during high-frequency sounds.
The visuals are rendered using the WEBGL mode in p5.js. The columns are drawn using nested loops that center the grid on the origin (0, 0), while the camera() function provides a fixed, angled perspective. The look of the boxes (color and shadow) is determined by the theme's directional and point lights, which are adjusted in real-time based on the audio energy.
This Visualizer was built with huge help from a block demo posted on Youtube by Hannah of phase.space.