diff options
| author | Jules <jules@asdf.us> | 2015-05-23 13:14:15 -0400 |
|---|---|---|
| committer | Jules <jules@asdf.us> | 2015-05-23 13:14:15 -0400 |
| commit | 35f96715b73deff4b26963a0ee34cce7cb6b7ec5 (patch) | |
| tree | a3a87afd11219bfa4c1546c2ce1d0a411826b6c9 /video.html | |
slitscan project stuff
Diffstat (limited to 'video.html')
| -rw-r--r-- | video.html | 100 |
1 files changed, 100 insertions, 0 deletions
diff --git a/video.html b/video.html new file mode 100644 index 0000000..513649c --- /dev/null +++ b/video.html @@ -0,0 +1,100 @@ +<!doctype html> +<html> +<body> +<div id="state"></div><br> +frames: <input type="text" id="frameCount"> +<div id="buttons"></div> +<video id="vid" style="display: none"></video> +</body> +<script src="canvasquery.js"></script> +<script> +var images = "gradient_top.png gradient_bot.png gradient_left.png gradient_right.png gradient_radial.png gradient_bands.png gradient_radial_bands.png swoosh.png swoosh_blur.png louisvuitton.jpg".split(" ") +var state = document.getElementById('state') +for (var i in images) { + button(images[i]); +} +function button (src) { + var el = document.createElement("button"); + el.innerHTML = src; + el.onclick = function(){ loadImage(src) } + document.getElementById("buttons").appendChild( el ); +} +var frameCountEl = document.getElementById("frameCount"); +frameCountEl.value = "20" +frameCountEl.addEventListener("keyup", function(){ + var _this = this; + setTimeout(function(){ + frameCount = parseInt( _this.value.replace(/[^0-9]/g,"") ) + }); +}, false) + + +var video = document.getElementById("vid"); +video.addEventListener('loadedmetadata', loaded, false); +function loaded () { + w = Math.floor( video.videoWidth / 1 ) + h = Math.floor( video.videoHeight / 1 ) + src = cq(w, h) + dest = cq(w, h).appendTo("body"); + loadImage( images[0] ) + video.play() +} +video.src = "57126054.mp4"; +// video.src = "174708-1c2pRjKN-aI.mp4"; +// video.src = "ad.mp4"; + +state.innerHTML = "loading"; + +function loadImage(src){ + var image = new Image (); + image.addEventListener("load", function(){ + var iq = cq(w, h) + .drawImage( image, 0, 0, image.naturalWidth, image.naturalHeight, 0, 0, w, h ) + imageData = iq.getImageData( 0, 0, w, h ) + mask = iq.grayscaleToMask() + console.log('got it') + }, false); + image.src = src; +} + +var src, dest, mask, fill, imageData; +var frames = []; +var frameCount = 20; +var ready = false; +(function animate(){ + requestAnimationFrame(animate); + if (! src || ! mask) return; + storeFrame(); + if (ready) render(); +})(); +function storeFrame(){ + src.drawImage(video, 0, 0, video.videoWidth, video.videoHeight, 0, 0, w, h) + var data = src.getImageData(0, 0, w, h) + if (frames.length > frameCount) { + frames.shift() + if (! ready) { + ready = true; + state.innerHTML = "playing" + } + } + else { + state.innerHTML = "buffering " + frames.length; + } + frames.push(data.data) +} +function render(){ + data = imageData.data + buffered = frames.length - 1 + for (var i = 0; i < mask.length; i++) { + var j = i * 4; + var n = Math.min(buffered, Math.floor( frameCount * mask[i] / 255 )) + data[j] = frames[n][j] + data[j+1] = frames[n][j+1] + data[j+2] = frames[n][j+2] + } + dest.putImageData(imageData, 0, 0) +} + +</script> +</html> + |