add basic webcam shaders

2 files changed, 77 insertions, 5 deletions

diff --git a/js/photo.js b/js/photo.js
index ae4558e..3f72cfc 100644
--- a/js/photo.js
+++ b/js/photo.js
@@ -108,12 +108,15 @@ var Photo = (function(){
     null,
     null,
   ]
-  var colors = COLORS, recolor_fn = null
+  var colors = COLORS, recolor_fn = null, shade_fn = null
   var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d'), pixels
 
   function set_colors (a) {
     colors = a
   }
+  function set_shade_fn (fn) {
+    shade_fn = fn
+  }
   function set_recolor_fn (fn) {
     recolor_fn = fn
   }
@@ -154,6 +157,9 @@ var Photo = (function(){
         pixel[1] = data[t+1]
         pixel[2] = data[t+2]
         pixel[3] = data[t+3]
+        if (shade_fn) {
+          shade_fn(data, pixel, j, i, w, h)
+        }
         if (Photo.denoise) { denoise_pixel(data, w, h, i, j, pixel, Photo.denoise) }
         row[j] = closest_to(pixel)
       }
@@ -289,6 +295,7 @@ var Photo = (function(){
     reds: REDS,
     yellows: YELLOWS,
     blues: BLUES,
+    set_shade_fn: set_shade_fn,
     set_recolor_fn: set_recolor_fn,
     set_colors: set_colors,
     closest_to: closest_to,
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>
-