diff options
Diffstat (limited to 'webcam.html')
| -rw-r--r-- | webcam.html | 104 |
1 files changed, 89 insertions, 15 deletions
diff --git a/webcam.html b/webcam.html index 7f76131..375a00d 100644 --- a/webcam.html +++ b/webcam.html @@ -2,17 +2,19 @@ <link rel="stylesheet" href="css/sally.css" type="text/css" charset="utf-8" /> <style> #controls { width: 220px; float: left; padding: 10px; } -label { min-width: 70px; display: inline-block; } +input { cursor: pointer; } +label { min-width: 70px; display: inline-block; cursor: pointer; } #text_style { width: 100px; } label.cbox { min-width: 50px; } +canvas { cursor: pointer; } </style> <body class="transparent"> <div id="controls"> <label></label> <span id="width_span"></span>x<span id="height_span"></span> <br> - <label for="width_el">width</label><input type="range" min="1" max="120" value="40" id="width_el"> + <label for="width_el">width</label><input type="range" min="1" max="120" value="80" id="width_el"> <br> - <label for="ratio_el">ratio</label><input type="range" min="0.0" max="8" value="2" step="0.005" id="ratio_el"><br> + <label for="ratio_el">ratio</label><input type="range" min="0.0" max="8" value="2.43" step="0.005" id="ratio_el"><br> <label for="hue_el">hue</label><input type="range" min="-1" max="1" value="0" step="0.005" id="hue_el"><br> <label for="sat_el">sat</label><input type="range" min="-1" max="1" value="0" step="0.005" id="sat_el"><br> <label for="lum_el">lum</label><input type="range" min="-1" max="1" value="0" step="0.005" id="lum_el"><br> @@ -39,16 +41,18 @@ label.cbox { min-width: 50px; } <div id="image_style"></div> </body> -<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> -<script src="http://asdf.us/dither/js/color.js"></script> -<script src="http://asdf.us/dither/js/util.js"></script> +<script src="js/vendor/color.js"></script> +<script src="js/util.js"></script> <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') -var invert = $(invert_el).prop('checked') +var nn = nn_el.checked +var invert = invert_el.checked var width_timeout navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia; @@ -99,6 +103,69 @@ 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) + } + }, + { name: "four-corners", + shader: function(d, p, x, y, w, h){ + rgbpixel(d, p, + Math.round(Math.abs(w*(2*(x/w-0.5)))), + Math.round(Math.abs(h*(2*((y+0.5)/h-0.5)))), + 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 @@ -118,13 +185,13 @@ function save (){ } } nn_el.addEventListener('change', function(){ - nn = $(nn_el).prop('checked') + nn = nn_el.checked }) invert_el.addEventListener('change', function(){ - invert = $(invert_el).prop('checked') + invert = invert_el.checked }) palette_el.addEventListener('change', function(){ - var palette = $(palette_el).val() + var palette = palette_el.value Photo.set_colors( Photo[palette] ) }) ratio_el.addEventListener("input", function(){ @@ -143,7 +210,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 +233,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 +248,3 @@ timer_el.addEventListener("click", function(){ })() }) </script> - |