Add layers

An HTML5 VJing Tool

It's a very basic HTML5 VJing tool, based on tools such as Threepixels' Zelsius or XPLSV/Jordi Ros's Neon, coded in Javascript, all client-side.

Coded by @thespite for July 2011 Dev Derby Challenge - HTML5 <video>.

Video material created by @acidbeat.

Music track: Revolve by His Boy Elroy (Licensed under Creative Commons Noncommercial Sampling Plus).

Background from Subte Patterns.

Playing around

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.

Technologies used:

To Do

Lots of things to do! Just to name a few: