added hex2rgb and getGradient, pretty much self-explanitory

css/example.css

@@ -112,7 +112,7 @@ a:hover { text-decoration: underline; }
 	width: 370px;
 }
 
-.img_submit, #hsv a, #hsl a {
+.img_submit, #hsv a, #hsl a, a.effect_button {
 	border: 1px solid #55a2c9;
 	background-color: #498fb2;
 	color: #fff;
@@ -121,7 +121,7 @@ a:hover { text-decoration: underline; }
 	-webkit-border-radius: 4px;
 }
 
-#hsv a, #hsl a {
+#hsv a, #hsl a, a.effect_button {
 	display: block;
 	width: 105px;
 	padding: 3px 0;
@@ -130,13 +130,21 @@ a:hover { text-decoration: underline; }
 	margin-right: 10px;
 	text-decoration: none;
 }
-
+a.effect_button {
+    padding: 0;
+}
 #options a:last-child { margin-right: 0px; }
 
 #try_these {
 	clear: both;
 }
 
+#core_function {
+    clear: both;
+    padding-top: 10px;
+    font: 1.2em/1.5em helvetica,sans-serif;
+}
+
 #logHSV {
 	border-top: 1px solid #6D7985;
 	clear: both;

foozy.html

@@ -31,6 +31,13 @@
 			$("#sort_hue").click( function() { lol.displayHue(); return false; });			
 			$("#sort_sat").click( function() { lol.displaySat(); return false; });
 			$("#sort_val").click( function() { lol.displayBright(); return false; });
+            $("#display_gradient").click( function() {
+                var hex1 = window.prompt("Enter the first color (hexidemical)");
+                var hex2 = window.prompt("Enter the second color (hexidemical)");
+                if (!hex1 || !hex2) return false;
+                
+                franz.prototype.displayColors(franz.util.getGradient(franz.util.HextoRGB(hex1),franz.util.HextoRGB(hex2),32*32))
+            });
         });
     </script>
 </head>
@@ -61,7 +68,14 @@
             <a href="#" title="awesome/1600.jpg">1600.jpg</a>, 
             <a href="#" title="awesome/fallout.jpg">fallout.jpg</a>
         </p>
+    </div>
 
+    <div id="core_function">
+	    <p><strong>Franz core functionality (not canvas related):</strong>
+            <div>
+               <a id="display_gradient" class="effect_button" href="#" title="gradient">Get Gradient</a>
+            </div>
+        </p>
     </div>
 </div>
 

js/franz.js

@@ -139,14 +139,14 @@ franz.prototype = {
         } else { return false; }
 	},
 
-	displayColors: function(order_array) {
+	displayColors: function(color_array, order_array) {
         var docStr = "";
         if (typeof order_array === 'undefined'){
-            for(var i = 0; i < this.rgba.length; i++) {
+            for(var i = 0; i < color_array.length; i++) {
-                docStr += '<div class="color_boxd" style="background-color: rgb(' + this.rgba[i][0] + ', ' + this.rgba[i][1] + ',' + this.rgba[i][2] + ');"></div>';
+                docStr += '<div class="color_boxd" style="background-color: rgb(' + color_array[i][0] + ', ' + color_array[i][1] + ',' + color_array[i][2] + ');"></div>';
             }
         } else {
-            for(var i = 0; i < this.rgba.length; i++) {
+            for(var i = 0; i < color_array.length; i++) {
                 docStr += '<div class="color_boxd" style="background-color: rgb(' + this.rgba[order_array[i]][0] + ', ' + this.rgba[order_array[i]][1] + ',' + this.rgba[order_array[i]][2] + ');"></div>';
             }
         }
@@ -162,7 +162,7 @@ franz.prototype = {
 	},
 
 	displayImg: function() {
-		this.displayColors();
+		this.displayColors(this.rgba);
 		return false;
 	},
 
@@ -172,7 +172,7 @@ franz.prototype = {
     displayOut: function(array) {
         var index = [];
         for(var i=0;i<array.length;i++){index[i] = array[i][3];}    /* rebuilding index */
-		this.displayColors(index);
+		this.displayColors(this.rgba,index);
 		return false;
     },
 
@@ -184,27 +184,6 @@ franz.prototype = {
      */
     sortArray: function(array,position) {
         array.sort(function(a,b){ return a[position] - b[position]; });
-    },
-	
-	/* calculates density of array data given interval and step size - both controlling data error
-		step size should ideally be < interval. Returns array with (# of intervals) as size */
-	getDensity: function(inputArray, step, interval, max) {
-		var size = max/step;
-		var densityArray = new Array(size);
-		
-		for (var i=0; i < size; i++) {
-			var count = 0;
-			
-			for (var j=0; j < inputArray.length; j++) {
-				// if entry is within current interval
-				if ((inputArray[j] > i*step) && (inputArray[j] < i*step + interval)){
-					count++;
-				}
-			}
-			densityArray[i] = count;
-		}
-		
-		return densityArray;
     }
 }
 
@@ -269,6 +248,43 @@ franz.util = {
         return '#' + hex.join('');
     },
 
+    HextoRGB: function(h) {
+        if (h.charAt(0)=="#") h = h.substring(1,7);
+        return [parseInt(h.substring(0,2),16), parseInt(h.substring(2,4),16),parseInt(h.substring(4,6),16)];
+    },
+    
+    /* Sample call: lol.displayColors(franz.util.getGradient([255,0,0],[255,255,0],32*32)) */
+    getGradient: function(rgb1,rgb2,steps) {
+        var grad = new Array();
+        var rgbSlope = [(rgb2[0]-rgb1[0])/steps,(rgb2[1]-rgb1[1])/steps,(rgb2[2]-rgb1[2])/steps];
+
+        for(var i=0; i<steps; i++){
+            grad.push([rgb1[0] + parseInt(i*rgbSlope[0]), rgb1[1] + parseInt(i*rgbSlope[1]), rgb1[2] + parseInt(i*rgbSlope[2])]);
+        }
+        return grad;
+    },
+
+	/* calculates density of array data given interval and step size - both controlling data error
+		step size should ideally be < interval. Returns array with (# of intervals) as size */
+	getDensity: function(inputArray, step, interval, max) {
+		var size = max/step;
+		var densityArray = new Array(size);
+
+		for (var i=0; i < size; i++) {
+			var count = 0;
+
+			for (var j=0; j < inputArray.length; j++) {
+				// if entry is within current interval
+				if ((inputArray[j] > i*step) && (inputArray[j] < i*step + interval)){
+					count++;
+				}
+			}
+			densityArray[i] = count;
+		}
+
+		return densityArray;
+	},
+
 	clone: function(obj) {
 		/* Utility function for deep cloning */
 		if(typeof obj !== "undefined") {