FUTURESCALE

Sinewav3, a Music Visualizer for Artists

In a discussion with business partner and long time friend, Adam Houghton, we noticed that independent artists were uploading their music to YouTube in droves.

That may seem odd, since YouTube is a video site, and usually, the videos have just a static image that shows while the music plays. Adam, a member of the electronic duo Splatinum, saw an opportunity here.

Last year, Adam put out a call to his sizable community of artists and friends to see what they thought. The response was an overwhelming YES! He began to put together a proof of concept built on Three.js, and soon put out another call, this time for artists to play with this toy and give constructive feedback.

Scaling a Proof of Concept

We were impressed and intrigued at the possibilities. But Adam needed some help building this application out. He works full time as a multimedia content strategist for Amazon, but has always had a strong entrepreneurial spirit. In the past we'd worked together on 3D graphics and artwork, so when he asked who'd like to help, we were first to raise a hand.

Taking the original demo and refactoring it into an application with an architecture that can be built out is our specialty, and soon, we had it under source control and looking like a modular enterprise app on the inside.

Sinewav3 uses Three.js / WebGL, PureMVC, Socket.io, React, Node.js, Firebase, FFMpeg and a number of other supporting libraries to allow artists to create unique visuals for their music, render HD videos, and upload them to YouTube.

Still a Work in Progress

Users can twiddle various options like adding different objects to the scene, tweaking their appearance, cloning them, tying their position to different bands of the audio spectrum or an LFO. But before taking on a user base, we needed to do a functionality spike all the way through creating an HD video that could be uploaded to YouTube.

We've been chronicling the technical challenges we're facing and overcoming on a semi-regular basis in these articles:

• Should I Render Three.js to Video on the Client or Server?
• Creating Video on the Server in Node.js
• Persistent Connections With Node.js and Socket.io
• Attempt to Render Thirty Frames per Second and Send Them to the Server
• Break Free of the Realtime Jail: Creating Audio-modulated HD Video With Three.js

More to Come

Eventually, you'll be able to create an account, upload some music (and assets like logos, your own meshes, album cover art, etc.), put together a fun and unique video, and upload it to YouTube all in one go.

But beyond that, we plan to add an API, creating a marketplace that allows developers to add visualization plugins to the system, and get paid each time someone uses them in a video. Likewise, we'll also allow 3D modelers to add custom meshes and textures that expand the universe of options available to the user. If you're an artist who'd like to work with us to add features or test the system, please do get in touch!