https://www.codedex.io/community/monthly-challenge/submission/vdHXBjCTZ8CUHp86e0ea
When I saw this month’s challenge theme, I knew my rhythm visualizer had to be heart-themed! Since I had never used p5.js before, I started by watching the p5.js coding workshop and taking the beginner course on Codedex to learn the basics.
My project is an audio-reactive rhythm visualizer built with p5.js that pulses a large heart, based on the music’s mid-frequency energies. I made this with Barbie’s “What If I Shine” from Rock N’ Royals in mind, but you can upload any song you want and watch the heart and waveform dance along with it! ƪ(˘⌣˘)ʃ
- Heart shape pulses dynamically using p5.FFT and p5.Amplitude
- Waveform reacts using p5.FFT
- Floating heart particles that dodge the mouse cursor
- Clickable medium hearts that grow, pop, then respawn after a delay
- Pause/play button to control the music
- To work with Bezier vertices to create a heart shape (this was so frustrating omg)
- To create interactive elements that respond to user input
- To manage multiple elements like mini heart particles using arrays
- Making the 5 hearts float a little to give them life
- Create multiple themes so the colors can change based on user preference
- Maybe make the waveform a lot more curvy so it doesn't look as scary😂
Thanks to Sophi333 for the helpful code examples that taught me how to control the audio’s mid energies and amplitude and for getting me started on this project! (￣︶￣*))