dr-data / vidcode

VidCode Demo

Vidcode is an online coding platform that teaches computer programming through video processing. The platform utilizes a live code editor, a webGL canvas, and a HTML5 video player, so users can write custom scripts that change their videos in realtime.

Vidcode runs JavaScript in the editor and exposes a number of custom objects for the end user to play with. In addition to the the Vidcode objects listed here, any functional JavaScript can be run in the editor as well to create infinite combinations of scripts that produce video magic!

Below are the custom objects that can be manipulated on the platform.

FILTERS //The effects object exposes the filters that can be applied to the videos. The filters include: vignette exposure blur noise fader*

Each filter has an “amount” property that controls the amount of each effect you can apply. Most of the filters accept values between 1 and 20 before they get really abstract-looking. *fader also has a “color” property that accepts strings or hex codes as color values.

example code snippet: effect.vignette.amount = 5

2. STOP MOTION //The stopMotion object takes a series of images as an input the populate a frame array. stopmotion.interval → property that controls the speed of the animation in milliseconds

stopmotion.frames → array that holds the selected images

stopmotion.reverse() => method that reverses the frames

example code snippet: stopmotion.interval = 500

3. PIXELATE //The pixelate object exposes the pixels of the video, frame by frame.

pixelate.x & pixelate.y → draws the pixel grid. The lower the number, the more pixels drawn and therefore, the smoother the video appears

pixelate.size → size of each indiviual pixel instance. Defaults to 5.

pixelate.motionDetection → boolean that controls whether motion detetion is ON or OFF. when set to TRUE, any change detected in the pixels from frame to frame will rotate those pixels for a cool animation effect.

4. REPEAT // the repeat object adds a looping effect to your video. repeat.start(functionName, interval)

repeat.stop() will end the looping

example code snippet:

var i = 40; effects.vignette.amount = i; var dimmer = function() { effects.vignette.amount = i+1; i = i-1; };

repeat.start(dimmer,50);