Synth is a video synthesizer for the web

The web app will give artists and developers easy access to tools like WebRTC, the Web Audio API and touch based controls. Synth includes a collection of UI components like equalizers, waveform generators, timelines, step sequencers, faders and joysticks. Import data from various sources to use in your visualization. The web app can display full screen on a TV or computer monitor and be controlled by mobile devices like iPhones, iPad and Android. Developers will also be able to import their Three.js, Babylon.js, and Famous projects. For instance, this will allow a developer to easily connect the position of the scene’s camera to touch based joystick controls. The goal of the web app is to give users the opportunity to interact with projects uploaded by developers, with a streamlined interface anyone can understand.

Synth needs your help on Kickstarter! Donate today to become a beta tester of the web app.

Donate To Synth On Kickstarter!

Synth needs your help to move into Beta. Big plans are in motion to make this Chrome Experiment into a full fledged web app! Help out the project on Kickstarter and receive Early Beta Access to the new version of Synth in 2015.

Fund the Kickstarter Project Today!

Synth v.192 Released

Synth v.192 is a minor update that brings the following changes:

  • Control audio volume in app using the gain control

Synth can now visualize audio from the microphone input on your computer.

  1. Connect external device to microphone input
  2. Configure Google Chrome to use audio input instead of microphone in chrome://settings/
  3. Visit
  4. Allow access to your microphone in Google Chrome
  5. Adjust gain slider to hear the audio
  6. Click on a frequency bar in the equalizer then click on a control

See what’s new at

Synth v.191 Released

See what’s new at

Use Audio to Control The Effects

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

See what’s new at

Synth V.190 Released

See what’s new at

Synth v.190 is a major update that brings the following features and bug fixes:

  • Limited feature support for iPads running iOS 8.
  • UI elements refined with new styling.
  • Equalizer is slightly more intuitive with hover states.
  • Geometry titles replaced with icons.
  • Presets are now available in the main controller.
  • Presets can be saved to the HTML5 filesystem in Google Chrome to a file named presets.json.
  • Created default presets for users to start playing with different looks and for backwards compatibility with Safari and Firefox.
  • Added keyboard shortcuts for switching presets (0-9), defining a new preset is modified with the option key (Ctrl + 0-9).
  • Removed support for switching video clips via keyboard shortcuts anymore, use the file menu instead.
  • Updated keypress plugin to latest.
  • Changed available attributes when instantiating Synth, now its canvas (element), controls (true/false), webcam (true/false) and default settings (json).
  • Added support to define defaults via external .json for user’s who do not have access to the HTML5 filesystem API, will fallback to localStorage in upcoming release.
  • Fixed a bug where wireframe was highlighted by mistake.
  • Fixed a bug that would load mp3s from the video file menu.
  • Discovered iPhone support will be impossible with just Safari in iOS8 because videos cannot play inline, will fallback to another experience in upcoming release.
  • Fixed a big preventing default video from playing on Firefox.
  • Temporarily removed webcam support for Firefox, will return with default videos in upcoming release.
  • Refined webcam experience for Google Chrome, now selectable in the video file menu.
  • Refined messaging timing on load.
  • Styled controls for smaller screens.
  • Added input that changes the polygon count of the mesh, also called “detail”.

See what’s new at

Synth Advanced Digital Effects Guide

You may have seen my recent experiments with Synth over on the Tumblr blog. This post explains how I achieve some of these looks by manipulating the Synthesizer in the Javascript Console.

Synth has several advanced features that become available by opening the Developer Tools in Google Chrome or by including your own Javascript after Synth has been instantiated. Fork the repo to start scripting your own visual exploration of Synth or you can start playing around now with Synth already running. Open the Javascript Console in Google Chrome by Selecting View -> Developer -> Javascript Console. You may enter any of the commands below now in the console.

This effect was created by programmatically positioning the camera and switching to a low polygon count plane geometry.
This effect was created by programmatically positioning the camera and switching to a low polygon count plane geometry.

Set values in the Javascript Console at your own risk. Entering invalid values may crash Google Chrome. If so, open the app again and try a different command.

Change Geometry


Low polygon count Tetrahedron
This is a low polygon count Tetrahedron

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)

Scale Geometry

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'

Setting the distortion position to the center of the scene can make geometry implode and fold in on itself.
Setting the distortion position to the center of the scene can make geometry implode and fold in on itself.

Toggle Geometry Wireframe

s.wire = true will turn on the wireframe while setting it to false will make the geometry solid.

Setting the wireframe to false and bumping up the saturation to 1.0 can create interesting hard gradients in low polygon count geometry.
Setting the wireframe to false and bumping up the saturation to 1.0 can create interesting hard gradients in low polygon count geometry.

Adjust Hue, Saturation and Opacity

Hue, saturation and opacity take values between 0 and 1.

Hue: s.hue = 0.45
Saturation: s.saturation = 0.9
Opacity: s.transparency = 0.75

Adjust Background Color

Another feature ignored in the GUI until a color picker is built is the ability to change background color. It’s value must be set with hexadecimal.

s.hex = '#FFFFFF' changes the background color to white.

By scripting your own functions after Synth is instantiated you can build camera movements, change the value of any attribute over time, make automatic switchers for geometry types, etc.

Read how to go fullscreen and record what you create with Synth using a screen capture app. Link to what you create with custom scripting in the comments below.

Synth v.188 Released

See what’s new at

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.

See what’s new at

Synth v.186 Released

Synth v.186 is a minor release and contains bug fixes, including one that would make Google Chrome crash. Changing the geometry is now limited to a low polygon count for stability.

See what’s new at

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.

Screen Shot 2014-05-24 at 4.34.11 AM

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 v.185 Released

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.

Most of the features that were part of Synth before have made it into this release, with the exception of changing the background color and using the mouse as a controller for any effect. Also absent is the ability to use a webcam. This increases the cross browser compatibility and decreases loading time. The webcam can be enabled by cloning the repo from Github and setting the second option when calling Synth via Javascript.

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’.

Screen Shot 2014-05-13 at 1.21.01 AM

Dreaming Past The Horizon

$29.99 – Purchase Includes 7.5% tax

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.

More info about Dreaming Past The Horizon


Screen Shot 2014-04-06 at 6.04.55 PM

Screen Shot 2014-04-06 at 6.06.28 PM

Screen Shot 2014-04-06 at 6.07.13 PM


$29.99 – Purchase Includes 7.5% tax



Electronic Artist Steve Belovarich