1 files changed, 40 insertions, 3 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')