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. http://kck.st/1zt4JgM
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.
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.