I want to create a personalized DJ experience that allows users to choose different music genres, with the environment adapting accordingly. The idea is to present an interactive space where visuals, lighting, and animations react dynamically to the music and make it feel like a real party.
When the experience starts, a button launches the animation, and clicking anywhere switches songs while updating the environment to match the new song. The visuals rely on p5.Amplitude() to analyze the music’s intensity and adjust the movement of butterfly-like shapes accordingly (I reused my previous code to draw the butterflies).
One of the biggest challenges was managing these transitions without them feeling too sudden or chaotic. Initially, switching between songs resulted in jarring color and lighting changes, breaking the immersion. To fix this, I used lerpColor() to gradually shift the background and object colors rather than having them change instantly. Another issue was synchronizing the visuals with the audio in a meaningful way, at first, the amplitude mapping was too sensitive, making the animations look erratic -this still needs improvement maybe I will try modifying the amplitude scaling.
Moving forward, I plan to expand the genre selection with more styles and refine how users interact with the interface. I want each environment to reflect the music’s vibe.
Looking at your self-reflection I agree with your points. You could fade the audio in/out – see https://editor.p5js.org/allison.parrish/sketches/Ec52_8YEb
You could also use lerp() to do some something for smoothing changes to the drawing – see https://editor.p5js.org/lorraine.wang/sketches/BmWJwbO08
I didn’t see so much difference in terms of the visuals between the different songs. One goal for you would be to make the audiovisualizer such that the different songs create different moods.