Share and Embed Sinewav3 Projects
A Long Row to Hoe
As you may know, we’ve been working steadily for sometime toward achieving a platform to allow musicians and developers to create awesome visual accompanyment to their sonic creations, with an end goal of outputting video and uploading it to YouTube and other services.
Recently we reached a milestone where developers could begin evaluating the system by creating plugins that are combined and configured by the music producer to create music-responsive 3D worlds.
However, the video production pipeline isn’t fully in place yet and it is irrelevant to the purpose of creating plugins and viewing realtime visualizations. So right now, we’re focusing on making the system as capable for plugin developers as possible. After all, there’s no need to create and upload videos of nothing.
We. Need. Plugins.
Sure, but… TANSTAFL, yo
Even though it’s free and fun, why would a coder want to sign up and create plugins for a video creation system that isn’t completely baked?
Good question, I’m glad you asked.
It only takes a short time to convert a typical Three.js demo into a plugin, a simple process that reveals the lay of the land and prepares you for building your own plugins from scratch.
You can publish plugins as examples for other developers to learn from and improve upon, a great mentoring opportunity.
When the system is fully online and accepting paying customers for video creation, you’ll get a cut of the transaction for every video that uses one or more of your non-example plugins.
That’s all well and good, but the road to hell is paved with good intentions, amirite?
Ayup. That y’are, pard.
That’s why it seemed important to give coders more than promises in exchange for the investment of their valuable time. We needed a way for them to show off their work to folks outside of the system, too.
Sharable Visualizations
The visualizer component of our system is sufficiently standalone that it can be given a JSON representation of a project and it just does its thing. We just wrap a much larger application shell around it in order to provide you with the ability to create plugins and visualizations. As such, we were able to create a very lightweight player that can run any visualization project in any WebGL enabled browser.
Sharing is as easy as you would expect
After clicking the share button on a project in your list, a small dialog is shown and most likely you’ll just hit ‘Copy to Clipboard and go merrily off to tweet it to your homies.
1. Click the project’s share button
2. Click ‘Copy to Clipboard’
3. Share the URL or Embed the code
The URL will look similar to this:
While the embed code looks something like this:
<iframe type=”text/html” width=”640" height=”360" src=”https://app.sinewav3.com/visualize/psylight" frameborder=”0"></iframe>
What’s up with this alias thing?
Yeah, that.
Rather than have a gobbldy-gook (but unique) project id in the URL, we thought it’d be nice if it was easy to remember, in case you wanted to type it by hand. By default the alias will be your project name, lower-cased, with dashes instead of spaces (coders call this kebab case).
That’s more legible, but there’s always the chance you’ve named your project the same as someone else’s, so we need to let you edit it in case we determine you can’t use that alias. We could just tack a ‘-2’ on the end or some nonsense, but that’d defeat the point of making the URL memorable, wouldn’t it?
Tracking view count
As you may have noticed on the screenshot above, we track the number of views your shares get, and show that count to you each time you return to the share dialog for a project.
Using multiple aliases
You can create more than one alias for a project, so you could, for instance track the view counts on different sharing platforms, or between the one you embed on your blog and one you share.
For instance these aliases all take you to the same project:
https://app.sinewav3.com/visualize/psylight
https://app.sinewav3.com/visualize/psylight-blog
Embedding in a blog
Here’s what it looks like embedded in a Wordpress blog:
More to come
The Sinewav3 player gives users a way to share the work they do before we make the video pipeline available for use. But that doesn’t mean we’re done with the player.
Coming soon, are a fullscreen toggle, volume controls, and pause/stop buttons. Also, we’ll add the ability to take a snapshot of the project at any point and have that used as the sharing image on Twitter, Facebook, Instagram, etc.
