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 /webcam.html | |
slitscan project stuff
Diffstat (limited to 'webcam.html')
| -rw-r--r-- | webcam.html | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/webcam.html b/webcam.html new file mode 100644 index 0000000..50d88c8 --- /dev/null +++ b/webcam.html @@ -0,0 +1,129 @@ +<!doctype html> +<html> +<style> +html,body{width:100%;height:100%;margin:0;padding:0; background: #000} +canvas { + position: absolute;top:0;left:0;width:100%;height:100%; +} +#state{display:none} +#stuff { opacity: 1.0; position: fixed; z-index: 2; } +#dither { + position: absolute;top:0;left:0;width:100%;height:100%; + z-index: 2; + background: url(http://dump.fm/static/img/bg.dither.gif); + opacity: 0.5; +} +#enable { + position: absolute; + top:20px;right:30px; + background:white; + padding:10px; + font-family:sans-serif; +} +</style> +<body> +<div id="enable">click allow to enable your webcam! <img src="http://www.your3dsource.com/images/colorchangearrowup.gif" width="20"></div> +<div id="stuff"> +<div id="state"></div> frames: <input type="text" id="frameCount"> +<div id="buttons"></div> +<video id="vid" style="display: none"></video> +<button id="camera" style="display:none">camera</button> +</div> +<div id="dither"></div> +</body> +<script src="/js/jquery.js"></script> +<script src="canvasquery.js"></script> +<script src="http://asdf.us/dither/js/camera.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"); +var frameCount = frameCountEl.value = 100 +frameCountEl.addEventListener("keyup", function(){ + var _this = this; + setTimeout(function(){ + frameCount = parseInt( _this.value.replace(/[^0-9]/g,"") ) + }); +}, false) + +var cc = cq(1,1) +min = Math.min +$("#camera").trigger("click") +var checker = setInterval(function(){ + if (window.cam) { + clearInterval(checker) + video = cam + loaded() + } +}, 200) +function loaded () { + $("#enable").html("loading...") + src = cq(w, h) + dest = cq(w, h).appendTo("body"); + loadImage( images[4] ) + video.play() +} + +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 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> + |