From 7f2454c5a86e21bb1a91f1a56c9965d2b875a452 Mon Sep 17 00:00:00 2001
From: Julie Lala <jules@okfoc.us>
Date: Fri, 22 Aug 2014 19:34:04 -0400
Subject: gradients

---
 README.md  | 11 ++++++++
 index.html | 87 ++++++++++++++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 79 insertions(+), 19 deletions(-)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..9085f36
--- /dev/null
+++ b/README.md
@@ -0,0 +1,11 @@
+cielab color picker
+===================
+
+Haha well that certainly is a misnomer... This is actually a Hunter Lab color picker.  CieL\*a\*b\* has gamut issues that make it more difficult to work with.  Lab color is more appealing in a picker than RGB or HSL, if only for the reason that it is not full of desaturated grays.
+
+Very little to note about this, except if you click in one place and then shift-click in another, it will generate a 6-part gradient.
+
+Uses the functions from [http://www.easyrgb.com/index.php?X=MATH](http://www.easyrgb.com/index.php?X=MATH)
+
+Gradient idea from [http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker](http://davidjohnstone.net/pages/lch-lab-colour-gradient-picker)
+
diff --git a/index.html b/index.html
index 2ddbab5..6713548 100644
--- a/index.html
+++ b/index.html
@@ -1,9 +1,18 @@
 <style>
-#cursor { position: fixed; top: -100px; left: -100px; margin-left: -5px; margin-top: -5px; width: 5px; height: 5px; border: 2px solid black; border-radius: 20px;
+#cursor_to,#cursor { position: fixed; top: -100px; left: -100px; margin-left: -5px; margin-top: -5px; width: 5px; height: 5px; border: 2px solid black; border-radius: 20px; pointer-events: none; }
+#cursor_to { border-color: #888; }
+#gradients { visibility: hidden; }
+.swatch { display: inline-block; width: 16px; height: 16px; border: 1px solid black; margin-right: 10px; }
+label { font-size: 90%; }
 </style>
 
-<canvas id="hunterlab"></canvas>
 <div id="cursor"></div>
+<div id="cursor_to"></div>
+
+<table border="0">
+<tr><td>
+<canvas id="hunterlab"></canvas>
+</td><td>
 
 <br>
 L <input type="range" min="0" max="100" value="100" id="hunter_L">
@@ -15,6 +24,19 @@ b <input type="range" min="-107.863" max="94.482" id="hunter_b">
 <br>
 <input type="text" id="selected">
 <input type="text" id="hex">
+<br>
+<br>
+
+<div id="gradients">
+  <div class="swatch"></div><label></label><br>
+  <div class="swatch"></div><label></label><br>
+  <div class="swatch"></div><label></label><br>
+  <div class="swatch"></div><label></label><br>
+  <div class="swatch"></div><label></label><br>
+  <div class="swatch"></div><label></label><br>
+</div>
+</td></tr>
+</table>
 
 <script>
 var xyz = [0,0,0]
@@ -31,46 +53,73 @@ b_range = [-107.863, 94.482]
 ctx = hunterlab.getContext('2d')
 
 ii = jj = -100
+iii = jjj = -100
 down = false
 
+hunter_a.value = hunter_b.value = 0
+
+mode = "L"
+imageData = ctx.createImageData(w,h)
+data = imageData.data
+axis('L')()
+
 hunter_L.oninput = axis('L')
 hunter_a.oninput = axis('a')
 hunter_b.oninput = axis('b')
 hunterlab.onmousedown = function (e){
   e.preventDefault()
   down = true
-  ii = e.clientX - hunterlab.offsetLeft
-  jj = e.clientY - hunterlab.offsetTop
+  read(e)
   pick()
 }
 hunterlab.onmousemove = function(e){
   if (! down) return
-  ii = e.clientX - hunterlab.offsetLeft
-  jj = e.clientY - hunterlab.offsetTop
+  read(e)
   pick()
 }
 document.body.onmouseup = function (e){
   down = false
 }
+function read(e) {
+  if (e.shiftKey) {
+    iii = e.clientX - hunterlab.offsetLeft
+    jjj = e.clientY - hunterlab.offsetTop
+  }
+  else {
+    ii = e.clientX - hunterlab.offsetLeft
+    jj = e.clientY - hunterlab.offsetTop
+  }
+}
 function pick () {
-  x = mix( ii/ww, x_range[0], x_range[1] )
-  y = mix( jj/hh, y_range[0], y_range[1] )
-  rgb = xyz2rgb(fn(val, x, y))
-  selected.value = "rgb(" + rgb.map(Math.round).join(",") + ")"
-  hex.value = "#" + rgb.map(Math.round).map(function(n){ var s = n.toString(16); return s.length == 1 ? "0"+s : s }).join("")
+  if (ii > -1) {
+    x = mix( ii/ww, x_range[0], x_range[1] )
+    y = mix( jj/hh, y_range[0], y_range[1] )
+    rgb = xyz2rgb(fn(val, x, y))
+    selected.value = rgb_string(rgb)
+    hex.value = hex_string(rgb)
+  }
   cursor.style.left = (ii + hunterlab.offsetTop) + "px"
   cursor.style.top = (jj + hunterlab.offsetTop) + "px"
+  cursor_to.style.left = (iii + hunterlab.offsetTop) + "px"
+  cursor_to.style.top = (jjj + hunterlab.offsetTop) + "px"
+  gradient()
 }
-
-hunter_a.value = hunter_b.value = 0
-
-mode = "L"
-imageData = ctx.createImageData(w,h)
-data = imageData.data
-axis('L')()
+function gradient () {
+  if (ii < -1 && iii < -1) return
+  swatches = document.querySelectorAll('.swatch')
+  labels = document.querySelectorAll('label')
+  for (var k = 0; k < 6; k++) {
+    x = mix( mix(k/5, ii, iii)/w, x_range[0], x_range[1] )
+    y = mix( mix(k/5, jj, jjj)/h, y_range[0], y_range[1] )
+    rgb = xyz2rgb(fn(val, x, y))
+    swatches[k].style.backgroundColor = labels[k].innerHTML = hex_string(rgb)
+  }
+  gradients.style.visibility = "visible"
+}
+function rgb_string (rgb) { return "rgb(" + rgb.map(Math.round).join(",") + ")" }
+function hex_string (rgb) { return "#" + rgb.map(Math.round).map(function(n){ var s = n.toString(16); return s.length == 1 ? "0"+s : s }).join("") }
 
 function axis (c) { return function(){ mode = c; paint() } }
-
 function paint () {
   var fn_body = (hunterlab2xyz + "").split("{")[1].split("}")[0]
   var fn_body = (hunterlab2xyz + "").split("{")[1].split("}")[0]
-- 
cgit v1.2.3-70-g09d2