git add webcam

author: Jules <jules@asdf.us> 2015-04-15 23:12:53 -0400
committer: Jules <jules@asdf.us> 2015-04-15 23:12:53 -0400
commit: e56f2ca44bdbf620b36829886399891f83cf3624 (patch)
tree: 5c51d2a0dfced3ab763f37608af91643cf9f8f42
parent: 5e65d978e92eaea43b4439cd64eee8344cf19d65 (diff)
1 files changed, 153 insertions, 0 deletions
diff --git a/webcam.html b/webcam.html
new file mode 100644
index 0000000..4d352d8
--- /dev/null
+++ b/webcam.html
@@ -0,0 +1,153 @@
+<style>
+label { min-width: 70px; display: inline-block; }
+</style>
+<body>
+  <div>
+    <input type="text" id="url_el" placeholder="enter a url">
+    <br>
+    <label for="width_el">width</label> <input type="range" min="1" max="120" value="40" id="width_el">
+    <span id="width_span"></span>x<span id="height_span"></span>
+    <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="hue_el">hue</label> <input type="range" min="-1" max="1" value="0" step="0.005" id="hue_el"><br>
+    <label for="sat_el">saturation</label> <input type="range" min="-1" max="1" value="0" step="0.005" id="sat_el"><br>
+    <label for="lum_el">luminance</label> <input type="range" min="-1" max="1" value="0" step="0.005" id="lum_el"><br>
+    <label for="quant_el">quantize</label> <input type="range" min="1" max="255" value="1" step="1" id="quant_el"><br>
+    <label></label>&nbsp;<input type="checkbox" id="invert_el"> <label for="invert_el"  style="padding-top: 7px;">invert</label>
+    <br>
+    <label for="palette_el" style="padding-top: 5px;">palette</label>
+    <select id="palette_el">
+      <option default value="colors">all colors</label>
+      <option value="hues">hues only</label>
+      <option value="grays">grayscale</label>
+      <option value="reds">reds</label>
+      <option value="yellows">yellows</label>
+      <option value="blues">blues</label>
+    </select>
+    <br>
+    <label></label>&nbsp;<input type="checkbox" checked id="nn_el"> <label for="nn_el"  style="padding-top: 7px;">nearest neighbor</label>
+    <br>
+    <br>
+  </div>
+  <div id="image_style"></div>
+  <br>
+  <input type="text" id="text_style">
+  <button id="save_el">SAVE</button>
+</body>
+
+<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+<script src="/dither/js/color.js"></script>
+<script src="/dither/js/util.js"></script>
+<script src="js/color_code.js"></script>
+<script>
+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 width_timeout
+
+navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia;
+function getStream(cb){
+  var constraints = {
+    video: true,
+    audio: false
+  }
+  navigator.getUserMedia(constraints, success, error);
+  function success (stream) {
+    var video = document.createElement("video")
+    video.src = window.URL.createObjectURL(stream)
+    video.play()
+    cb(video)
+  }
+  function error(error){
+    console.log('navigator.getUserMedia error: ', error);
+  }
+}
+
+var camera
+getStream(function(video){
+  camera = video
+  animate()
+})
+function animate () {
+  requestAnimationFrame(animate)
+  if (! camera.videoWidth) return
+  MircColor.fromCanvas(camera, toCanvas, { width: width, ratio: ratio, neighbor: nn })
+}
+
+MircColor.set_recolor_fn(function(rgb){
+  var hsl = rgb2hsl(rgb)
+  hsl[0] = mod(hsl[0] + hue, 1.0)
+  hsl[1] = clamp(hsl[1] + sat, 0.0, 1.0)
+  hsl[2] = clamp(hsl[2] + lum, 0.0, 1.0)
+  rgb = hsl2rgb.apply(this, hsl)
+  if (quant > 1) {
+    rgb[0] = quantize(rgb[0], quant)
+    rgb[1] = quantize(rgb[1], quant)
+    rgb[2] = quantize(rgb[2], quant)
+  }
+  if (invert) {
+    rgb[0] = 255 - rgb[0]
+    rgb[1] = 255 - rgb[1]
+    rgb[2] = 255 - rgb[2]
+  }
+  return rgb
+})
+
+var hue = 0, sat = 0, lum = 0, quant = 1
+listen(hue_el, window, "hue")
+listen(sat_el, window, "sat")
+listen(lum_el, window, "lum")
+listen(quant_el, window, "quant")
+
+save_el.addEventListener('click', function(){
+  MircColor.fromCanvas(camera, saveText, { width: width, ratio: ratio, neighbor: nn })
+  function saveText(rows) {
+    text_style.value = MircColor.ascii(rows)
+  }
+})
+nn_el.addEventListener('change', function(){
+  nn = $(nn_el).prop('checked')
+})
+invert_el.addEventListener('change', function(){
+  invert = $(invert_el).prop('checked')
+})
+palette_el.addEventListener('change', function(){
+  var palette = $(palette_el).val()
+  MircColor.set_colors( MircColor[palette] )
+})
+ratio_el.addEventListener("input", function(){
+  ratio = parseFloat( ratio_el.value )
+  if (ratio < 0.03) ratio = 0
+  width_span.innerHTML = width
+  height_span.innerHTML = "..."
+})
+width_el.addEventListener("input", function(){
+  width = parseInt( width_el.value )
+  width_span.innerHTML = width
+  height_span.innerHTML = "..."
+})
+function listen (el, obj, val) {
+  el.addEventListener("input", function(){
+    obj[val] = parseFloat( el.value )
+  })
+}
+var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d')
+function toCanvas(rows){
+  var wpx = 6, hpx = 12
+  var rgb_colors = MircColor.colors.map(function(c){ return "rgb(" + c + ")" })
+  canvas.width = rows[0].length * wpx
+  canvas.height = rows.length * hpx
+  rows.forEach(function(row, j){
+    row.forEach(function(lex, i){
+      ctx.fillStyle = rgb_colors[lex]
+      ctx.fillRect(i*wpx,j*hpx,wpx,hpx)
+    })
+  })
+  height_span.innerHTML = rows.length
+  image_style.innerHTML = ""
+  image_style.appendChild(canvas)
+}
+
+</script>
+
author	Jules <jules@asdf.us>	2015-04-15 23:12:53 -0400
committer	Jules <jules@asdf.us>	2015-04-15 23:12:53 -0400
commit	e56f2ca44bdbf620b36829886399891f83cf3624 (patch)
tree	5c51d2a0dfced3ab763f37608af91643cf9f8f42
parent	5e65d978e92eaea43b4439cd64eee8344cf19d65 (diff)