VSS-3D

Problem & Solution 🤝

I love playing with these old synthesizers. I had a VSS-30 in the 2000s and used it to live-sample cassettes as part of my live performance act. There is something so satisfying about pushing a button, making noise and immediately being able to start mangling the sound.

Watch a demonstration/overview of VSS-3D

Goals/Requirements: • I wanted to use web technology so that anyone could use it. • No user login and minimal tracking. • As true to reality as I could make it.

Process 🛣

The creation of this project was done in 4 phases. Phase 1) I created a Web Audio API JavaScript library called Scream to handle all the synthesis, effects and sequencing. I also created a Web Midi API JavaScript library called Mizzy that handled MIDI input in Chrome. Mizzy also looped back the user's computer keyboard in case they weren't using a Web Midi-enabled browser, allowing for 'keyjazz' playback. The two libraries work together to make fully functional Web Audio-based synthesizers. Phase 2) I coded a barebones synthesizer sampler using Scream that mimicked the behaviour of the VSS-30. Phase 3) I modelled the VSS-3D in Blender and created the textures in Affinity Designer. Phase 4) I put it into a Threejs scene and added a few UI enhancements not present in the original.

Results 🎁

An impeccable, irreplaceable yet simple sound design tool. It will not win any usability awards as it is true to the design. You might need to google the manual if you're serious!

Takeaways 📣

WebGL and the Web Audio API are fully featured APIs allowing for rich web experiences.