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>
+