Sonic Bloom

Sonic Bloom is an interactive visual soundboard built with p5.js that turns your keyboard into a playable musical instrument. The project presents a grid of twelve colorful pads on screen, each mapped to a key on your keyboard. Press a key or click a pad and you'll hear a note and see an immediate visual response: a flash of color and an expanding ripple or a burst of particles. The idea behind Sonic Bloom came from wanting to make music creation feel approachable and visual. Traditional music software is powerful but intimidating, and most online soundboards are fun for about ten seconds before they get boring. I wanted something in between. The visual layer is what makes the difference. When every note you play produces something you can see, it creates a feedback loop that encourages you to keep experimenting. The application features two switchable sound kits (Synth and 8-Bit), each with its own distinct visual style. Synth mode plays smooth wave tones accompanied by ripple ring animations that expand outward from each pad. 8-Bit mode plays retro beeps with particle bursts and a scale bounce effect. Switching kits changes both the sound and the entire visual personality of the interface. On the technical side, the project uses the Web Audio API for sound synthesis and p5.js for the display and interaction. Every note is generated in real time using oscillators rather than pre-recorded samples, which keeps the project lightweight and gives full control over pitch and tone. The interface scales to fit any screen size, capping at a square shape so the grid always looks balanced. Sonic Bloom sits at the intersection of music, visual art, and interaction design. It is a small instrument that's as fun to watch as it is to play.