adding hsl functions to image.html

author: Jules <jules@asdf.us> 2015-04-15 22:44:58 -0400
committer: Jules <jules@asdf.us> 2015-04-15 22:44:58 -0400
commit: 5e65d978e92eaea43b4439cd64eee8344cf19d65 (patch)
tree: 124ef539367e345e13cd1ae33cc4fc2a1f0f664d
parent: 9398dd9b760c2c48e96daf7c6751f50776cd75cf (diff)
2 files changed, 106 insertions, 33 deletions
diff --git a/image.html b/image.html
index 9ed6f1e..33457c4 100644
--- a/image.html
+++ b/image.html
@@ -1,5 +1,5 @@
 <style>
-label { min-width: 50px; display: inline-block; }
+label { min-width: 70px; display: inline-block; }
 </style>
 <body>
   <div>
@@ -8,8 +8,11 @@ label { min-width: 50px; display: inline-block; }
     <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="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></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>
@@ -30,6 +33,8 @@ label { min-width: 50px; display: inline-block; }
 
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 <script src="js/color_code.js"></script>
+<script src="js/util.js"></script>
+<script src="/dither/js/color.js"></script>
 <script>
 var basehref_partz = window.location.href.split("/")
 basehref_partz.pop()
@@ -38,7 +43,29 @@ var url = 'img/rainwagon.gif'
 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
+
+MircColor.set_recolor_fn(function(rgb){
+  if (invert) {
+    rgb[0] = 255 - rgb[0]
+    rgb[1] = 255 - rgb[1]
+    rgb[2] = 255 - rgb[2]
+  }
+  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)
+  return hsl2rgb.apply(this, hsl)
+})
+
+var hue = 0, sat = 0, lum = 0
+listen(hue_el, window, "hue")
+listen(sat_el, window, "sat")
+listen(lum_el, window, "lum")
+
+
+
 MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn })
 
 url_el.addEventListener('change', function(){
@@ -50,6 +77,10 @@ nn_el.addEventListener('change', function(){
   nn = $(nn_el).prop('checked')
   MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn })
 })
+invert_el.addEventListener('change', function(){
+  invert = $(invert_el).prop('checked')
+  MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn })
+})
 palette_el.addEventListener('change', function(){
   var palette = $(palette_el).val()
   MircColor.set_colors( MircColor[palette] )
@@ -74,6 +105,12 @@ width_el.addEventListener("input", function(){
     MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn })
   }, 50)
 })
+function listen (el, obj, val) {
+  el.addEventListener("input", function(){
+    obj[val] = parseFloat( el.value )
+    MircColor.fromUrl(url, toCanvas, { width: width, ratio: ratio, neighbor: nn })
+  })
+}
 function toCanvas(rows){
   var wpx = 6, hpx = 12
   var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d')
diff --git a/js/color_code.js b/js/color_code.js
index 7c5f236..c27f2bb 100644
--- a/js/color_code.js
+++ b/js/color_code.js
@@ -72,6 +72,24 @@ var MircColor = (function(){
     null,
     null,
   ]  
+  var YELLOWS = [
+    [255,255,255],
+    [0,0,0],
+    null,
+    [0,147,0],
+    null,
+    null,
+    null,
+    [252,127,0],
+    [255,255,0],
+    [0,252,0],
+    null,
+    [0,255,255],
+    null,
+    null,
+    null,
+    null,
+  ]
   var BLUES = [
     [255,255,255],
     [0,0,0],
@@ -91,6 +109,8 @@ var MircColor = (function(){
     null,
   ]
   var colors = COLORS, recolor_fn = null
+  var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d'), pixels
+
   function set_colors (a) {
     colors = a
   }
@@ -99,7 +119,9 @@ var MircColor = (function(){
   }
   
   function closest_to(pixel){
-    recolor_fn && recolor_fn(pixel)
+    if (recolor_fn) {
+      pixel = recolor_fn(pixel)
+    }
     return colors.reduce(function(prev, curr, index) {
       var d = distance(pixel, curr)
       if (prev[0] > d) {
@@ -139,12 +161,22 @@ var MircColor = (function(){
     else cb (rows)
   }
 
+  function getNaturalDimensions (img) {
+    if (img.naturalWidth) {
+      return { naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight }
+    }
+    if (img.videoWidth) {
+      return { naturalWidth: img.videoWidth, naturalHeight: img.videoHeight }
+    }
+    return { naturalWidth: img.width, naturalHeight: img.height }
+  }
   function neighbor (canvas, ctx, img) {
+    var dims = getNaturalDimensions(img)
     var scratch = document.createElement("canvas")
     var scratchCtx = scratch.getContext('2d')
-    scratch.width = img.naturalWidth
-    scratch.height = img.naturalHeight
-    scratchCtx.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight)
+    scratch.width = dims.naturalWidth
+    scratch.height = dims.naturalHeight
+    scratchCtx.drawImage(img, 0, 0, dims.naturalWidth, dims.naturalHeight)
     var srcImageData = scratchCtx.getImageData(0,0,scratch.width,scratch.height)
     var destImageData = ctx.createImageData(canvas.width,canvas.height)
     var src = srcImageData.data, dest = destImageData.data
@@ -162,43 +194,45 @@ var MircColor = (function(){
         dest[dt+3] = src[st+3]
       }
     }
-
     return destImageData
   }
   var img = new Image ()
   function fromUrl (url, cb, opt) {
     img.onload = function(){
-      var canvas = document.createElement("canvas"), ctx = canvas.getContext('2d'), pixels
-      if (opt.width) {
-        canvas.width = opt.width
-        if (opt.height) {
-          canvas.height = opt.height
-        } else if (opt.ratio) {
-          canvas.height = opt.width / opt.ratio
-        } else {
-          canvas.height = (img.naturalHeight * width / img.naturalWidth) / 2
-        }
-      }
-      else {
-        canvas.width = img.naturalWidth * 2
-        canvas.height = img.naturalHeight
-      }
-      if (opt.neighbor) {
-        pixels = neighbor(canvas, ctx, img)
-      }
-      else {
-        ctx.drawImage(img,0,0,img.naturalWidth,img.naturalHeight,0,0,canvas.width,canvas.height)
-        pixels = ctx.getImageData(0,0,canvas.width,canvas.height)
-      }
-      fromImageData(pixels, cb)
+      fromCanvas(img, cb, opt)
     }
     if (img.src == url) { return img.onload() }
     img.src = url
     if (img.complete) { return img.onload() }
   }
+  function fromCanvas (img, cb, opt) {
+    var dims = getNaturalDimensions(img)
+    if (opt.width) {
+      canvas.width = opt.width
+      if (opt.height) {
+        canvas.height = opt.height
+      } else if (opt.ratio) {
+        canvas.height = opt.width / opt.ratio
+      } else {
+        canvas.height = (dims.naturalHeight * width / dims.naturalWidth) / 2
+      }
+    }
+    else {
+      canvas.width = dims.naturalWidth * 2
+      canvas.height = dims.naturalHeight
+    }
+    if (opt.neighbor) {
+      pixels = neighbor(canvas, ctx, img)
+    }
+    else {
+      ctx.drawImage(img,0,0,dims.naturalWidth,dims.naturalHeight,0,0,canvas.width,canvas.height)
+      pixels = ctx.getImageData(0,0,canvas.width,canvas.height)
+    }
+    fromImageData(pixels, cb)
+  }
   function ascii (rows) {
     var lines = rows.map(function(str){
-      return str.map(function(index){ return "\\x03," + index + " " }).join("")
+      return str.map(function(index){ return "\\x031," + index + " " }).join("")
     }).join("\\n")
     var txt = '/exec -out printf "' + lines + '"\n'
     return txt
@@ -211,7 +245,7 @@ var MircColor = (function(){
   function stringFromUrl (url, cb, opt) {
     fromUrl(url, function(rows){
       cb(rows.map(function(str){
-        return str.map(function(index){ return "\C-c," + index + " " }).join("")
+        return str.map(function(index){ return "\C-c1," + index + " " }).join("")
       }).join("\n"))
     }, width)
   }
@@ -221,12 +255,14 @@ var MircColor = (function(){
     hues: HUES,
     grays: GRAYS,
     reds: REDS,
+    yellows: YELLOWS,
     blues: BLUES,
     set_recolor_fn: set_recolor_fn,
     set_colors: set_colors,
     closest_to: closest_to,
     distance: distance,
     fromUrl: fromUrl,
+    fromCanvas: fromCanvas,
     fromImageData: fromImageData,
     stringFromUrl: stringFromUrl,
     asciiFromUrl: asciiFromUrl,
author	Jules <jules@asdf.us>	2015-04-15 22:44:58 -0400
committer	Jules <jules@asdf.us>	2015-04-15 22:44:58 -0400
commit	5e65d978e92eaea43b4439cd64eee8344cf19d65 (patch)
tree	124ef539367e345e13cd1ae33cc4fc2a1f0f664d
parent	9398dd9b760c2c48e96daf7c6751f50776cd75cf (diff)