Added the Saturation and Lightness transformation for HSL color scheme

css/example.css

@@ -84,7 +84,7 @@ a:hover { text-decoration: underline; }
 	width: 370px;
 }
 
-#img_submit, #hsv a {
+#img_submit, #hsv a, #hsl a {
 	border: 1px solid #55a2c9;
 	background-color: #498fb2;
 	color: #fff;
@@ -92,7 +92,7 @@ a:hover { text-decoration: underline; }
 	-moz-border-radius: 4px;
 	-webkit-border-radius: 4px;
 }
-#hsv a {
+#hsv a, #hsl a {
 	display: block;
 	width: 104px;
 	padding: 0 5px;
@@ -101,6 +101,10 @@ a:hover { text-decoration: underline; }
 	margin-right: 15px;
 	text-decoration: none;
 }
+#hsl a {
+	width: 150px;
+}
+
 #try_these {
 	clear: both;
 }

index.html

@@ -16,6 +16,7 @@
 		    $("#franz_form").submit(function() {
 			    franz.loadImg(img_input.value);
 				$("#hsv").removeClass("hideme");
+				$("#hsl").removeClass("hideme");
 			    return false;
 		    });
 			
@@ -28,16 +29,22 @@
 				franz.displayHue();
 				return false;
 			}); 
-			
 			$("#sort_sat").click(function(event){
 				franz.displaySat();
 				return false;
 			}); 
-			
 			$("#sort_val").click(function(event){
 				franz.displayVal();
 				return false;
 			});
+			$("#sort_light").click(function(event){
+				franz.displayLight();
+				return false;
+			});
+			$("#sort_satL").click(function(event){
+				franz.displaySatL();
+				return false;
+			});
         });
     </script>
 </head>
@@ -57,6 +64,7 @@
 			<input type="submit" id="img_submit" value="Go for it!">
 		</form>
 		<p id="hsv" class="hideme"><a href="#" id="sort_hue">Sort Hue</a> <a href="#" id="sort_sat">Sort Saturation</a> <a href="#" id="sort_val">Sort Value</a> </p>
+		<p id="hsl" class="hideme"><a href="#" id="sort_satL">Sort Saturation HSL</a> <a href="#" id="sort_light">Sort Lightness</a> </p>
 	    <p id="try_these"><strong>Try out:</strong> <a href="#">lol.png</a>, <a href="#">testjubs.jpg</a>, <a href="#">stars.jpg</a>, <a href="#">1600.jpg</a>, <a href="#">fallout.jpg</a></p>
 		
     </div>

js/franz.js

@@ -18,7 +18,6 @@ var franz = {
 	canvas: {},
 	ctx: {},
     img: {},
-    final_colors: [],
 	red: [],
 	green: [],
 	blue: [],
@@ -26,6 +25,8 @@ var franz = {
 	hue: [],
 	sat: [],
 	val: [],
+	satL: [],
+	light: [],
 	origIndex: [],
 
 	init: function(canvas_id) {
@@ -75,7 +76,7 @@ var franz = {
         }
 		
 		/* get hue sat val array */
-		franz.RGBtoHSV();
+		franz.RGBtoHSVHL();
 
 		/* show original image */
 		franz.displayImg();
@@ -83,33 +84,23 @@ var franz = {
 		return false;
 	},
 	
-	/* Converts RGB to the Hue/Saturation/Value model */
-	RGBtoHSV: function() {
-		var min, max, delta;
+	/* Converts RGB to the Hue/Saturation/Value, Saturation/Lightness model */
+	RGBtoHSVHL: function() {
+		var min, max;
 		
 		for(var i = 0; i < franz.alpha.length; i++) {
 			franz.val[i] = franz.getValHSV(franz.red[i],franz.green[i],franz.blue[i]);
 			franz.sat[i] = franz.getSatHSV(franz.red[i],franz.green[i],franz.blue[i]);
-			franz.hue[i] = franz.getHueHSV(franz.red[i],franz.green[i],franz.blue[i]);
+			franz.hue[i] = franz.getHue(franz.red[i],franz.green[i],franz.blue[i]);
+			
+			franz.satL[i] = franz.getSatHSL(franz.red[i],franz.green[i],franz.blue[i]);
+			franz.light[i] = franz.getLightHSL(franz.red[i],franz.green[i],franz.blue[i]);
 		}
 		
 		return false
 	},
-	
-	getValHSV: function(red, green, blue) { return Math.max(red,Math.max(green,blue)); },
-	
-    getSatHSV: function(red, green, blue) {
-		var min, max, delta, sat;
-		
-		min = Math.min(red,Math.min(green,blue));
-		max = Math.max(red,Math.max(green,blue));
-		delta = max - min;
-		sat = delta / max;
-		
-		return sat;
-	},
 
-	getHueHSV: function(red,green,blue) {
+	getHue: function(red,green,blue) {
 		var min, max, delta, hue;
 		
 		min = Math.min(red,Math.min(green,blue));
@@ -134,6 +125,40 @@ var franz = {
 		return hue;
 	},
 	
+    getSatHSV: function(red, green, blue) {
+		var min, max, delta, sat;
+		
+		min = Math.min(red,Math.min(green,blue));
+		max = Math.max(red,Math.max(green,blue));
+		delta = max - min;
+		sat = delta / max;
+		
+		return sat;
+	},
+	
+	getValHSV: function(red, green, blue) { return Math.max(red,Math.max(green,blue)); },
+	
+	getSatHSL: function(red, green, blue) {
+		var min, max, sat;
+		var lightness = franz.getLightHSL();
+		
+		min = Math.min(red,Math.min(green,blue));
+		max = Math.max(red,Math.max(green,blue));
+		
+		if (min == max)	return 0;
+		
+		if (lightness < 1/2)	sat = (max-min)/(max+min);
+		else	sat = (max-min)/(2 - (max+min));
+		
+		return sat;		
+	},
+	
+	getLightHSL: function(red, green, blue) {
+		var min, max;
+		min = Math.min(red,Math.min(green,blue));
+		max = Math.max(red,Math.max(green,blue));
+		return 1/2*(min+max);
+	},
 	
 	/* routines to display color swatches */
 	displayColors: function(order_array) {
@@ -180,6 +205,18 @@ var franz = {
 		franz.displayColors(franz.origIndex);
 		return false;
 	},
+	displaySatL: function() {
+		franz.resetIndex();
+		franz.qsort(franz.clone(franz.satL), 0, franz.alpha.length);	
+		franz.displayColors(franz.origIndex);
+		return false;
+	},
+	displayLight: function() {
+		franz.resetIndex();
+		franz.qsort(franz.clone(franz.light), 0, franz.alpha.length);	
+		franz.displayColors(franz.origIndex);
+		return false;
+	},
 	
 	
 	/* quicksort algorithm that also swaps an index array */