Projects & Labs

Media Booster

Video/Image manipulation using experimental CSS3 Filters (currently only supported in Chrome). Accesses user’s webcam (HTML5). Click on the controls to apply filters to the video/photo. Several filters can be combined.

Media Booster Lab Preview

Supported Browsers: Chrome

Techniques:
getUserMedia()
CSS3 Filters

Media Booster >>


WebGL 3D World

A rotating 3D cube of an office. Click on the bubbles to pop them. Video is added as a texture. A 3D model of a dancing horse.

Bubbles in 3D lab preview

Supported Browsers:
Chrome and other modern browers that support WebGL.
No IE support (IE will add WebGL support in version 11).

Techniques:
WebGL
3D model of a horse
A series of photos stitched to a cubemap

WebGL 3D World >>


Motion Detector

Uses HTML5 getUserMedia() to access user’s webcam. Detects motion by comparing two video frames and displaying the difference.

Motion Detection Lab Preview

Supported Browsers: Modern browsers

Techniques:
HTML5 Canvas getUserMedia()
requestAnimationFrame()

Motion Detector >>


Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to Top