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 /cam.html | |
slitscan project stuff
Diffstat (limited to 'cam.html')
| -rw-r--r-- | cam.html | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/cam.html b/cam.html new file mode 100644 index 0000000..25eb177 --- /dev/null +++ b/cam.html @@ -0,0 +1,104 @@ +<!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> +<button id="camera" style="display:none">camera</button> +</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 = 255 +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 () { + src = cq(w, h) + dest = cq(w, h).appendTo("body"); + loadImage( images[0] ) + 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> + |