merging from my fork

css/example.css

@@ -84,7 +84,7 @@ a:hover { text-decoration: underline; }
 	width: 370px;
 }
 
-#img_submit {
+#img_submit, #hsv a {
 	border: 1px solid #55a2c9;
 	background-color: #498fb2;
 	color: #fff;
@@ -92,6 +92,18 @@ a:hover { text-decoration: underline; }
 	-moz-border-radius: 4px;
 	-webkit-border-radius: 4px;
 }
+#hsv a {
+	display: block;
+	width: 104px;
+	padding: 0 5px;
+	text-align: center;
+	float: left;
+	margin-right: 15px;
+	text-decoration: none;
+}
+#try_these {
+	clear: both;
+}
 
 #log_colors { padding-left: 4px; }
 
@@ -103,3 +115,7 @@ a:hover { text-decoration: underline; }
     -moz-border-radius: 2px;
     margin: 2px 6px 3px 0;
 }
+
+.hideme {
+	display: none;
+}

index.html

@@ -15,6 +15,27 @@
             img_input = document.getElementById("img_input");
 		    $("#franz_form").submit(function() {
 			    franz.loadImg(img_input.value);
+				$("#hsv").removeClass("hideme");
+			    return false;
+		    });
+			
+			$("#try_these a").click(function(event){
+				img_input.value = this.innerHTML;
+				return false;
+			}); 
+			
+			$("#sort_hue").click(function(event){
+				franz.displayHue();
+				return false;
+			}); 
+			
+			$("#sort_sat").click(function(event){
+				franz.displaySat();
+				return false;
+			}); 
+			
+			$("#sort_val").click(function(event){
+				franz.displayVal();
 				return false;
 			}); 
         });
@@ -35,7 +56,9 @@
 			<input type="text" id="img_input" value="lol.png">
 			<input type="submit" id="img_submit" value="Go for it!">
 		</form>
-	    <p><strong>Try out:</strong> lol.png, testjubs.jpg, stars.jpg, 1600.jpg, fallout.jpg</p>
+		<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="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>
 </div>
 

js/franz.js

@@ -3,6 +3,14 @@ var franz = {
 	ctx: {},
     img: {},
     final_colors: [],
+	red: [],
+	green: [],
+	blue: [],
+	alpha: [],
+	hue: [],
+	sat: [],
+	val: [],
+	origIndex: [],
 
 	init: function(canvas_id) {
 		franz.canvas = document.getElementById(canvas_id);
@@ -22,23 +30,176 @@ var franz = {
 
 	getColors: function() {
         var hidden_canvas = document.getElementById("lol_hidden"),
-            extra_ctx = hidden_canvas.getContext('2d'),
+            extra_ctx = hidden_canvas.getContext('2d');
-            docString = "";
         
         extra_ctx.drawImage(franz.img, 0, 0, 19, 19);
-		var imageData = extra_ctx.getImageData(1, 1, 18, 18).data,
+		var imageData = extra_ctx.getImageData(1, 1, 18, 18).data;
-            arr = [];
        
-        for(var i = 0; i < imageData.length; i = i + 4) {
+        for(var i = 0; i*4 < imageData.length; i++) {
-            arr[0] = imageData[i];
+            franz.red[i] = imageData[i*4];
-            arr[1] = imageData[i + 1];
+            franz.green[i] = imageData[i*4 + 1];
-            arr[2] = imageData[i + 2];
+            franz.blue[i] = imageData[i*4 + 2];
-            // Ugly 4AM method, don't ask
+			franz.alpha[i] = imageData[i*4 + 3];
-            docString += '<div class="color_box" style="background-color: rgb(' + arr[0] + ', ' +  arr[1] + ',' + arr[2] + ');"></div>';
+        }
+		
+		/* get hue sat val array */
+		franz.RGBtoHSV();
+		
+		/* show original image */
+		franz.displayImg();
+		
+		return false;
+	},
+	displayImg: function() {
+		var docString = "";
+		
+		for(var i = 0; i < franz.alpha.length; i++) {
+			docString += '<div class="color_box" style="background-color: rgb(' + franz.red[i] + ', ' +  franz.green[i] + ',' + franz.blue[i] + ');"></div>';
 		}
         
         document.getElementById("log_colors").innerHTML = docString;
         $("#container_bottom").fadeIn("slow");
+		
 		return false;
+	},
+	
+	
+	
+	/* Converts RGB to the Hue/Saturation/Value model */
+	RGBtoHSV: function() {
+		var min, max, delta;
+		
+		for(var i = 0; i < franz.alpha.length; i++) {
+			
+			min = Math.min(franz.red[i],Math.min(franz.green[i],franz.blue[i]));
+			max = Math.max(franz.red[i],Math.max(franz.green[i],franz.blue[i]));
+			franz.val[i] = max;
+			
+			delta = max - min;
+			
+			if (max != 0)
+				franz.sat[i] = delta / max;
+			else {
+				// max val is 0, you have black
+				franz.sat[i] = 0;
+				franz.hue[i] = -1;
+				return;
 			}
+			
+			if (franz.red[i] == max)
+				franz.hue[i] = ( franz.green[i] - franz.blue[i]) / delta;	//between yellow & magenta
+			else if (franz.green[i] == max)
+				franz.hue[i] = 2 + (franz.blue[i] - franz.red[i]) / delta;	//between cyan & yellow
+			else
+				franz.hue[i] = 4 + (franz.red[i] - franz.green[i]) / delta;	//between magenta & cyan
+			
+			// hue degrees
+			franz.hue[i] = franz.hue[i] * 60;
+			if (franz.hue[i] < 0)		franz.hue[i] += 360;
+		}
+	},
+	
+	displayHue: function() {	
+		var docString = "";
+		
+		/* keep track of original index so we don't have to revert
+			back to RGB just to display output */
+		for (var i=0; i < franz.alpha.length; i++) {
+			franz.origIndex[i] = i;
+		}
+		
+		franz.qsort(franz.hue, 0, franz.hue.length);
+		
+		for(var i = 0; i < franz.alpha.length; i++) {
+			docString += '<div class="color_box" style="background-color: rgb(' + franz.red[franz.origIndex[i]] + ', ' +  franz.green[franz.origIndex[i]] + ',' + franz.blue[franz.origIndex[i]] + ');"></div>';
+		}
+        
+        document.getElementById("log_colors").innerHTML = docString;
+        $("#container_bottom").fadeIn("slow");
+		
+		return false;
+	},
+	
+	displaySat: function() {	
+		var docString = "";
+		
+		/* keep track of original index so we don't have to revert
+			back to RGB just to display output */
+		for (var i=0; i < franz.alpha.length; i++) {
+			franz.origIndex[i] = i;
+		}
+		
+		franz.qsort(franz.sat, 0, franz.sat.length);
+		
+		for(var i = 0; i < franz.alpha.length; i++) {
+			docString += '<div class="color_box" style="background-color: rgb(' + franz.red[franz.origIndex[i]] + ', ' +  franz.green[franz.origIndex[i]] + ',' + franz.blue[franz.origIndex[i]] + ');"></div>';
+		}
+        
+        document.getElementById("log_colors").innerHTML = docString;
+        $("#container_bottom").fadeIn("slow");
+		
+		return false;
+	},
+	
+	displayVal: function() {	
+		var docString = "";
+		
+		/* keep track of original index so we don't have to revert
+			back to RGB just to display output */
+		for (var i=0; i < franz.alpha.length; i++) {
+			franz.origIndex[i] = i;
+		}
+		
+		franz.qsort(franz.val, 0, franz.val.length);
+		
+		for(var i = 0; i < franz.alpha.length; i++) {
+			docString += '<div class="color_box" style="background-color: rgb(' + franz.red[franz.origIndex[i]] + ', ' +  franz.green[franz.origIndex[i]] + ',' + franz.blue[franz.origIndex[i]] + ');"></div>';
+		}
+        
+        document.getElementById("log_colors").innerHTML = docString;
+        $("#container_bottom").fadeIn("slow");
+		
+		return false;
+	},
+	
+	
+	/* quicksort algorithm with that also swaps original index */
+	sort_Partition: function(array, begin, end, pivot) {
+		var piv=array[pivot];
+		array.swap(pivot, end-1);
+		franz.origIndex.swap(pivot, end-1);
+		var store=begin;
+		var ix;
+		for(ix=begin; ix<end-1; ++ix) {
+			if(array[ix]<=piv) {
+				array.swap(store, ix);
+				franz.origIndex.swap(store, ix);
+				++store;
+			}
+		}
+		array.swap(end-1, store);
+		franz.origIndex.swap(end-1, store);
+
+		return store;
+	},
+	
+	qsort: function(array, begin, end) {
+		if(end-1>begin) {
+			var pivot=begin+Math.floor(Math.random()*(end-begin));
+
+			pivot=franz.sort_Partition(array, begin, end, pivot);
+
+			franz.qsort(array, begin, pivot);
+			franz.qsort(array, pivot+1, end);
+		}
+	}
+	
+}
+
+/* define swap method for Array object */
+Array.prototype.swap=function(a, b)
+{
+	var tmp=this[a];
+	this[a]=this[b];
+	this[b]=tmp;
 }