HTML5 video and mapping it into 3D space

http://www.craftymind.com/2010/04/20/blowing-up-html5-video-and-mapping-it-into-3d-space

by Tushar Gupta

HTML

<div style="display:none">
    <video id="sourcevid" autoplay="true" loop="true">
        <source src="http://craftymind.com/factory/html5video/BigBuckBunny_640x360.mp4" type="video/mp4" />
        <source src="http://craftymind.com/factory/html5video/BigBuckBunny_640x360.ogv" type="video/ogg" />
    </video>
    <canvas id="sourcecopy" width="640" height="360"></canvas>
</div>
<div>
    <center>
        <div style="z-index:1;position:relative;text-align:center;font-size:16px;font-weight:bold;width:1000px;top:60px;">Click video to blow it up!</div>
        <canvas id="output" width="1000" height="600" onmousedown="dropBomb(event, this)" style="border: solid 5px #666666"></canvas>
        <br/>You may need to reload the page if video isn't streaming properly. Video courtesy of <a href="http://www.bigbuckbunny.org/">Big Buck Bunny</a>

    </center>
</div>

JavaScript

var video;
var copy;
var copycanvas;
var draw;

var TILE_WIDTH = 32;
var TILE_HEIGHT = 24;
var TILE_CENTER_WIDTH = 16;
var TILE_CENTER_HEIGHT = 12;
var SOURCERECT = {
    x: 0,
    y: 0,
    width: 0,
    height: 0
};
var PAINTRECT = {
    x: 0,
    y: 0,
    width: 1000,
    height: 600
};

function init() {
    video = document.getElementById('sourcevid');
    copycanvas = document.getElementById('sourcecopy');
    copy = copycanvas.getContext('2d');
    var outputcanvas = document.getElementById('output');
    draw = outputcanvas.getContext('2d');
    setInterval("processFrame()", 33);
}

function createTiles() {
    var offsetX = TILE_CENTER_WIDTH + (PAINTRECT.width - SOURCERECT.width) / 2;
    var offsetY = TILE_CENTER_HEIGHT + (PAINTRECT.height - SOURCERECT.height) / 2;
    var y = 0;
    while (y < SOURCERECT.height) {
        var x = 0;
        while (x < SOURCERECT.width) {
            var tile = new Tile();
            tile.videoX = x;
            tile.videoY = y;
            tile.originX = offsetX + x;
            tile.originY = offsetY + y;
            tile.currentX = tile.originX;
            tile.currentY = tile.originY;
            tiles.push(tile);
            x += TILE_WIDTH;
        }
        y += TILE_HEIGHT;
    }
}

var RAD = Math.PI / 180;
var randomJump = false;
var tiles = [];
var debug = false;

function processFrame() {
    if (!isNaN(video.duration)) {
        if (SOURCERECT.width == 0) {
            SOURCERECT = {
                x: 0,
                y: 0,
                width: video.videoWidth,
                height: video.videoHeight
            };
            createTiles();
        }
        //this is to keep my sanity while developing
        if (randomJump) {
            randomJump = false;
            video.currentTime = Math.random() * video.duration;
        }
        //loop
        if (video.currentTime == video.duration) {
            video.currentTime = 0;
        }
    }
    var debugStr = "";
    //copy tiles
   ...