An HTML5 VJing Tool
Video material created by @acidbeat.
Background from Subte Patterns.
Every content to be shown on screen is contained on a layer. Right now there are three types of content: Video, Image and Text.
You can add a layer at any time by clicking the buttons on the Add section. You can sort them freely by dragging each layer box from the handler. The showing order is from top to bottom. You can remove a layer by clicking "Delete".
Each layer has a set of parameters that can be modified: opacity, scale and rotation. You can modify those values using the slide controls.
There's also real-time audio processing (using dsp.js) so you can sync any parameter to the sound by checking the "Sync with FFT" box. This feature only works on Firefox!
Additionally, there are parameters that are exclusive to each content type. Video and Image layers have a source box where you can drop a video file, or an image file, straight from your desktop. A Text layer has a text box so you can write messages.
If it gets too cluttered, you can collapse layers by clicking the handler.
- Audio API
- Fonts & type
- Drag and drop
- Files API
Lots of things to do! Just to name a few:
- Implement the detach-window mode, so you can VJ with two screens, using messages between both windows.
- Add BPM control/detector and allow syncing to the beat, and possibly choose a function to play.
- Add a sync to specific frequencies selector.
- Allow for drag and drop music files (since the FFT has to access the audio buffer, it triggers a security exception).
- Add more effects, possibly in a WebGL context (having issues with Cross-domain, which can be solved.)
- Add more parameters, like 3D transforms and blending modes.
- Add post-processing layers.
- Have an FFT visualizer