Screen Shot 2014-09-30 at 2.58.58 AM

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 glitch medium

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 .188 reenables webcam support

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

Screen Shot 2014-05-24 at 12.04.28 AM

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.

Screen Shot 2014-05-13 at 1.03.34 AM

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

Screen Shot 2014-04-06 at 6.06.28 PM

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



Screen Shot 2014-03-02 at 4.46.15 PM

Recording Synth 1.8.1 Fullscreen with Snapz Pro X

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.

Saving a 1920x1980 movie with Snapz Pro X.

Synth v.18 Opening Video Sequence

Synth v.18 Released

Synth v.18 has the following features and bug fixes:

  • Save presets as JSON.
  • Press ‘x’ on keyboard to close drop zones and controls.
  • Created default looks as presets.
  • Fixed a bug that allowed the cancel button on controllers to display multiple times.
  • Fixed the hue controls, now works from 0 – 360.
  • Fixed a bug that prevented the default video from looping.
  • Optimized the way the geometry changes.
  • Fixed a bug preventing switching from video source to webcam.
  • Fixed video playlist, when kicking an item it wouldn’t play.
  • Fixed a bug causing NaN values when using the precision number box in dat.gui.
  • Enhanced antialiasing making the entire composition look better in Google Chrome.

Synth needs your help on Kickstarter!

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.

Known Issues:
Audio hangs when switching geometry, reserve for in between songs.

Pro Tips:
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.

Synth Needs Your Help On Kickstarter

synth on kickstarter

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!

Help fund the first public exhibition of Synth on Kickstarter.


Synth v.175 Released

This work of video art by Steve Belovarich used source footage shot with an iPhone.

Synth v.175 has the following features:

  • Added experimental support for Apple Safari.
  • Optimized video size, all videos uploaded should be 1280×720 or 640×360 h.264 M4V or MOV.
  • Adjusted lighting so that all sides are lit.
  • Fixed a bug that would crash or pause the renderer when switching geometry.

Synth v.175 also has the following features, enhancements and bug fixes released in v.17:

  • Drag and Drop video files supported by Google Chrome.
  • Use Keyboard shortcuts to control video playback.
  • Cut to video in playlist by pressing ‘1-9′ on keyboard.
  • Cut to webcam by pressing ‘0’ on keyboard.
  • Loop Current Video press ‘L’ key on keyboard.
  • Audio player now automatically plays next song in playlist.
  • Fixed: Audio waveform would quit when switching audio tracks.
  • Fixed: Audio playlist would stop playing audio after 3 songs.

Synth was tested on Google Chrome Version 29.0.1547.65. Synth currently only works in Google Chrome and partially in Apple Safari.

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.

Known Issues:
Apple Safari does not support the HTML5 filesystem, in future updates you will be able to specify web addresses of videos to stream.
Sometimes the video stops even though its set to loop. Changing the tab makes the video resume. Must be a bug in Safari?

Pro Tips:
In Apple Safari or Google Chrome, change the video to anything you want by typing this in the Javascript console: “videoInput.src=”path/to/file.m4v”, replacing path/to/file with the web address of the video. Type “” to playback video “videoInput.pause()” to pause the video.

Electronic Artist Steve Belovarich