An interactive 3D piano experience designed to bridge casual music exploration and musician-focused controls through responsive audio, tactile interaction, and web-based performance tools.
Interaction Design
The project was designed to be approachable enough for someone who just wants to poke random keys while still offering the controls, feedback, and flexibility that musicians would expect from a digital piano. The experience needed to feel approachable enough for someone with no musical background while still providing the controls and flexibility that musicians would expect from a digital instrument.
Because of that, the piano supports multiple interaction methods including mouse and touch input, musical typing with a standard keyboard, and MIDI controller keyboards. Demo playback is available as well, allowing casual users to immediately explore the instrument without needing to know how to play piano first. Users more on the musically experienced demographic can modify the volume, tempo, transposition, reverb, instrument voices, and piano behavior through soft, sustain, and sostenuto pedals.
Mobile devices introduced a different set of UX challenges. Smaller screens make the piano keys more difficult to interact with, and there were also iOS conflicts with Tone.js at the time of development. Rather than forcing feature parity across every platform, I chose to clearly communicate those limitations and disable some of the heavier functionality where appropriate. Users can still interact with the piano on mobile devices if they choose to, but the experience is intentionally optimized around the strengths and limitations of each platform.
Production
& Assets
After establishing improvements to the user experience and programming came the inevitable creative rabbit hole: if I was already rebuilding the project, why stop there? That mindset eventually led me into 3D modeling, texture optimization, audio production, MIDI editing, sample processing, and a handful of seemingly unrelated skillsets that ended up becoming some of the most enhancing resources for the web experience.
On the visual side, the 3D piano model was optimized for the web using Blender, while texture maps and shader assets were refined in Photoshop. Several interface elements were modified, redesigned, or removed entirely as new functionality was added and the overall experience evolved. 3D modeling was a relatively new discipline for me at the time, which made it equally challenging and rewarding. It also gave me a much greater appreciation for the amount of work required to create interactive 3D experiences that feel polished while still performing well on the web.
The audio side of the project opened up a completely different set of opportunities. Logic Pro was used to clean up and optimize MIDI tracks for web playback, helping ensure consistent timing and performance across the demo songs. Up to seven songs were included not only as a showcase of my music work, but also to test polyphony limits, automated BPM changes, pedal behavior, and other musical interactions within the application. The collection includes instrumental covers from animated television series, and OPM.
Samples were also processed specifically for the project, including bark samples from my dog Mochi that somehow became one of the available voice presets. Those recordings required a surprising amount of editing before implementation. Mochi, unfortunately, remains completely unimpressed by her contribution to the project.