add basic webcam shaders

1 files changed, 69 insertions, 4 deletions

diff --git a/webcam.html b/webcam.html
index 7f76131..d80985e 100644
--- a/webcam.html
+++ b/webcam.html
@@ -45,6 +45,9 @@ label.cbox { min-width: 50px; }
 <script src="js/photo.js"></script>
 <script>
 
+var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d')
+image_style.appendChild(canvas)
+
 var width = parseInt( width_span.innerHTML = width_el.value )
 var ratio = parseFloat( ratio_el.value )
 var nn = $(nn_el).prop('checked')
@@ -99,6 +102,61 @@ Photo.set_recolor_fn(function(rgb){
   return rgb
 })
 
+var shader_index = 0
+
+var SHADERS = [
+  { name: "none",
+    shader: null
+  },
+  { name: "pixelate",
+    shader: function(d, p, x, y, w, h){
+      rgbpixel(d, p, x - (x%2), y, w, h)
+    }
+  },
+  { name: "flop",
+    shader: function(d, p, x, y, w, h){
+      rgbpixel(d, p, w-x-1, y, w, h)
+    }
+  },
+  { name: "flip",
+    shader: function(d, p, x, y, w, h){
+      rgbpixel(d, p, x, h-y-1, w, h)
+    }
+  },
+  { name: "flip-flop",
+    shader: function(d, p, x, y, w, h){
+      rgbpixel(d, p, w-x-1, h-y-1, w, h)
+    }
+  },
+  { name: "left-mirror",
+    shader: function(d, p, x, y, w, h){
+      rgbpixel(d, p, x < w/2 ? x : w-x-1, y, w, h)
+    }
+  },
+  { name: "right-mirror",
+    shader: function(d, p, x, y, w, h){
+      rgbpixel(d, p, x > w/2 ? x : w-x-1, y, w, h)
+    }
+  },
+  { name: "top-mirror",
+    shader: function(d, p, x, y, w, h){
+      rgbpixel(d, p, x, y > h/2 ? y : h-y-1, w, h)
+    }
+  },
+  { name: "bottom-mirror",
+    shader: function(d, p, x, y, w, h){
+      rgbpixel(d, p, x, y < h/2 ? y : h-y-1, w, h)
+    }
+  },
+]
+
+function rgbpixel(d, p, x, y, w, h) {
+  var t = 4 * (x + y*w)
+  p[0] = d[t]
+  p[1] = d[t+1]
+  p[2] = d[t+2]
+}
+
 // Photo.denoise = 2
 
 var hue = 0, sat = 0, lum = 0, quant = 1
@@ -143,7 +201,17 @@ function listen (el, obj, val) {
     obj[val] = parseFloat( el.value )
   })
 }
-var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d')
+canvas.addEventListener("click", function(e){
+  if (e.shiftKey) {
+    shader_index = (shader_index-1 + SHADERS.length) % SHADERS.length
+  }
+  else {
+    shader_index = (shader_index+1) % SHADERS.length
+  }
+  console.log("using shader", SHADERS[shader_index].name)
+  Photo.set_shade_fn(SHADERS[shader_index].shader)
+})
+
 function toCanvas(rows){
   var wpx = 6, hpx = 12
   var rgb_colors = Photo.colors.map(function(c){ return "rgb(" + c + ")" })
@@ -156,8 +224,6 @@ function toCanvas(rows){
     })
   })
   height_span.innerHTML = rows.length
-  image_style.innerHTML = ""
-  image_style.appendChild(canvas)
 }
 timer_el.addEventListener("click", function(){
   var secs = 5;
@@ -173,4 +239,3 @@ timer_el.addEventListener("click", function(){
   })()
 })
 </script>
-