Drag and drop .mp3 into the audio playlist in the top left or allow Synth to use your computer’s microphone.
Click on an equalizer bar and then click on a fader control.
The gain on the frequency you selected now controls the audio.
Disable this behavior by clicking on the cancel button.
Manually override the audio controller by dragging the on the fader control.
Microphone audio is temporarily disabled from playing in the speakers to prevent feedback. A custom audio player in a future release will allow you to turn up the volume. For now, you can use the following command in the console:
s.gainNode.gain.value = 0.8;
The value of the gain is between 0-1.
Change the audio input in the System Preferences of your OS to an external source. Map the audio from another app to Google Chrome using an app like Soundflower for OS X.
Synth v.191 is a minor update that brings the following changes:
Use the sound from audio input or microphone to control visuals
New styling for audio controlled faders
Fixed a bug where the controlled fader was opposite values
Fixed when the video would disappear after closing the menu
Changed the controls to a fixed height
Added support for selection of audio input in the playlist
Deprecated Dancer.js, Synth now uses Web Audio API
There are three experimental geometry types that are not available in the GUI: ring, tetra, and octa. The standard geometry types are also available: plane, sphere, cube, torus, and cylinder. The second attribute is number of polygons, the third is the number of segments.
s.meshChange('cube',64,32) will make a cube that has 64 polygons and 32 segments.
You can achieve low polygon count geometry this way. s.meshChange('tetra',4,1)
You may have to scale the geometry a lot to even visualize low polygon shapes: s.scale = 30
Change Camera Position
s.cameraPos = 'x, y, z'
Move the camera to center of the scene: s.cameraPos = '0, 0, 0'
Move the camera to center but move it 1000 on the Z axis: s.cameraPos = '0, 0, 1000'
Change Distortion Position
The distortion point can be controlled the same way. Placing the distortion point at the very center of the scene (and the geometry) can create interesting results. Change it’s position like this: s.originPos = '0, 0, 0'
Toggle Geometry Wireframe
s.wire = true will turn on the wireframe while setting it to false will make the geometry solid.
Adjust Hue, Saturation and Opacity
Hue, saturation and opacity take values between 0 and 1.
Synth v.188 is a minor release that reenables your webcam in Google Chrome, reimplements support for Apple Safari, and includes minor bug fixes. The initial geometry is now limited to a lower polygon count for stability Safari. Support for iOS Safari is in the current roadmap for the launch of iOS 8. It will take possibly one or two more releases to clean up bugs from the refactor in v.186.
v.188 changes the keyboard command for switching to the webcam. Press the character ` on your keyboard (directly above tab). Switch back to the default video by pressing 1. If you’ve uploaded videos you can access them in sequence by pressing 1-9 on the keyboard.
The camera and warp can now be ‘zeroed’ out by pressing 0 on the keyboard or shift+0, respectively.
Controls got a some styling tweaks and labels.
Check previous posts for more keyboard commands. I want to diagram the keyboard commands out, but they change so frequently in versioning this app it makes little sense until a few more features are baked in. Still, I’d like to see keyboard commands to upload files and open a dialog and to read from the HTML5 filesystem.
The roadmap for the next release is to reintroduce preset states, which was a feature when the app used dat.gui. I want to make the process simple. It will probably involve a saved JSON file in your HTML5 filesystem and it will be up to you to save it locally outside of the sandboxed environment. There would then be a method to reimport it if you choose to reformat the HTML5 filesystem. Another high priority feature is to be able to use a computer’s microphone as an audio input.
The features that are being prioritized in releases are so the app can reach a milestone where it is reliable for live performance. Recent releases have made Synth perform well at resolutions as high as 1080p on my 3 year old Macbook Pro with 1GB video card. On the latest Macbook Pro with Retina Display the anti-aliasing is pretty nice. I imagine Synth performs very nicely on a gaming PC in Google Chrome. How well does the app look on your system?
Later this summer, I will also be working to make the app perform well in iOS8, as Apple has included WebGL support in the new Mobile Safari. Web Socket controllers, where an iPad controls the app in desktop is a huge wish, but Synth needs to be moved to a different server for that and well, I need funding to be able to implement it.
What do you want to see included in future releases? Comment below.
v.187 only contained minor bug fixes and fixed a crash in Google Chrome.
v.186 also adds the ability to change geometry on the fly with keyboard shortcuts while the menu is minified. To minify the menus, press ‘x’ then ‘m’. The geometries are mapped to the letters Y,U,I,O,P and toggle plane, cube, sphere, cylinder, and torus respectively. If you change the geometry too quickly while the geometry is controlled via audio, you may experience some glitches.
Audio controls have been remapped to enhance their effect on controls. Click on any bar in the equalizer and then click on the control you wish to map to. This will trigger that frequency of audio to control the effect you have chosen.
The new intro video is adapted from one of the segments found in Dreaming Past The Horizon, a collaboration between electronic artist Steve Belovarich and composer Ryan Rapsys currently on display at the Kinetic Light Exhibition. Purchase a digital copy today by following the link.
Synth underwent a complete refactor with release v.185. Before this release, Synth was a proof of concept and used a modified dat.gui to control the interface. A whole new GUI was written from the ground up for this release. The core of Synth was completely rewritten and given a Prototypal architecture that allows the video synthesizer to be extended with greater ease. This allows anyone to create custom controllers for the 3D effects. I have included a default interface that in subsequent releases will be refined.
The controls from left to right are as follows: equalizer, displacement z position, displacement x/y position, displacement, displacement multiplier, hue, saturation, opacity, camera x/y, camera z, scale.
You can still control effects with audio. While music is playing in the app, click on any bar of the equalizer then click on the control you want to change. Cancel this controller by clicking the close button. Override by dragging on the control.
Drag and drop .mp3 audio and .mp4 video to the wells to use your own audio and video sources.
All of the keyboard controls outlined in previous posts still work including video source selection via 0-9, toggle the menus using ‘x’ and hide them with ‘m’.
A series of video synthesis by electronic artist Steve Belovarich. This series is an extension of the photographic series “Kinetic Light”. The artist plays with our perception of space and time in an abstract landscape of light and color. This work is on display at the Kinetic Light Exhibition in San Pedro, CA. The series was created with Synth, a web based video synthesizer also created by the artist.
Lately I’ve been producing a series of video art pieces for my upcoming solo exhibition and made some tweaks to the UI to make it easier to capture fullscreen video samples from Synth. First, put Google Chrome in presentation mode which is available from the View menu. This will make Chrome fullscreen and the address bar and tabs will disappear.
Press ‘X’ on the keyboard to close the menus. Then, press ‘M’ to toggle the menus. You should then press ‘M’ and then ‘X’ to open the controls back up.
In the past, I used Quicktime X to make screen captures but have since switched to Snapz Pro X. Snapz Pro X is the only screen capture app I could find that is able to record fullscreen apps in OS X Mavericks and as a bonus will output at the framerate and 1920×1080 with ProRes codecs that I can easily pop into Final Cut Pro without a loss of frames. Sadly, none of this has been tested in Windows 8.1 yet and I would like to hear if anyone has any success recording Synth with a screen capture app in Windows.
Synth was tested on Google Chrome Version 31.0.1650.57. Synth currently only works in Google Chrome and partially in Apple Safari. Mozilla Firefox WebM video playback coming soon. IE11 is not supported and won’t be until Microsoft supports GLSL shaders in WebGL scenes.
Audio hangs when switching geometry, reserve for in between songs.
Clone the github repo to your local web server for a boost in performance.
On your local server, replace the contents of default.json with custom presets.
What features would you like to see added to Synth? Add requests and bugs to the comments of this build. Your requests could make it into a future release.
Report bugs and feature requests for this build in the comments.
I was recently accepted for my first solo exhibition in a gallery this coming February 2014 in Los Angeles at Gallery 381. Synth will be installed along with several of my photographic works I created in 2013. The show is called “Kinetic Light” and features my original video art and photography where light is captured in motion. I need your help to make this exhibition a reality!