From 3ab509a368a58319657162252b37abae634f4c86 Mon Sep 17 00:00:00 2001 From: Dominick Pham Date: Tue, 11 Aug 2009 21:26:37 -0400 Subject: [PATCH 1/2] condensed the display method to be reusable - would really come in handy after I create the RGB to HSL transformation --- js/franz.js | 87 ++++++++++++++++++----------------------------------- 1 file changed, 29 insertions(+), 58 deletions(-) diff --git a/js/franz.js b/js/franz.js index 98bc9bc..41bc155 100644 --- a/js/franz.js +++ b/js/franz.js @@ -82,19 +82,6 @@ var franz = { return false; }, - - displayImg: function() { - var docString = ""; - - for(var i = 0; i < franz.alpha.length; i++) { - docString += '
'; - } - - document.getElementById("log_colors").innerHTML = docString; - $("#container_bottom").fadeIn("slow"); - - return false; - }, /* Converts RGB to the Hue/Saturation/Value model */ RGBtoHSV: function() { @@ -147,19 +134,13 @@ var franz = { return hue; }, - displayHue: function() { + + /* routines to display color swatches */ + displayColors: function(order_array) { 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.clone(franz.hue), 0, franz.alpha.length); - for(var i = 0; i < franz.alpha.length; i++) { - docString += '
'; + docString += '
'; } document.getElementById("log_colors").innerHTML = docString; @@ -167,51 +148,41 @@ var franz = { return false; }, - - displaySat: function() { - var docString = ""; - + resetIndex: function() { /* keep track of original index so we don't have to revert - back to RGB just to display output */ + back to RGB just to display output */ for (var i=0; i < franz.alpha.length; i++) { franz.origIndex[i] = i; } - - franz.qsort(franz.clone(franz.sat), 0, franz.alpha.length); - - for(var i = 0; i < franz.alpha.length; i++) { - docString += '
'; - } - - 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.clone(franz.val), 0, franz.alpha.length); - - for(var i = 0; i < franz.alpha.length; i++) { - docString += '
'; - } - - document.getElementById("log_colors").innerHTML = docString; - $("#container_bottom").fadeIn("slow"); - + + displayImg: function() { + franz.resetIndex(); + franz.displayColors(franz.origIndex); + return false; + }, + displayHue: function() { + franz.resetIndex(); + franz.qsort(franz.clone(franz.hue), 0, franz.alpha.length); + franz.displayColors(franz.origIndex); + return false; + }, + displaySat: function() { + franz.resetIndex(); + franz.qsort(franz.clone(franz.sat), 0, franz.alpha.length); + franz.displayColors(franz.origIndex); + return false; + }, + displayVal: function() { + franz.resetIndex(); + franz.qsort(franz.clone(franz.val), 0, franz.alpha.length); + franz.displayColors(franz.origIndex); return false; }, - /* quicksort algorithm with that also swaps original index */ + /* quicksort algorithm that also swaps an index array */ sort_Partition: function(array, begin, end, pivot) { var piv=array[pivot]; array.swap(pivot, end-1); From 5f11169ef1278c0ec48e5ac7d1533d3a868200b4 Mon Sep 17 00:00:00 2001 From: Dominick Pham Date: Tue, 11 Aug 2009 22:09:19 -0400 Subject: [PATCH 2/2] Added the Saturation and Lightness transformation for HSL color scheme --- css/example.css | 8 +++-- index.html | 12 ++++++-- js/franz.js | 77 ++++++++++++++++++++++++++++++++++++------------- 3 files changed, 73 insertions(+), 24 deletions(-) diff --git a/css/example.css b/css/example.css index dfe3cea..10218ab 100644 --- a/css/example.css +++ b/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; } diff --git a/index.html b/index.html index b76563f..a5be9f7 100644 --- a/index.html +++ b/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; + }); }); @@ -57,6 +64,7 @@

Sort Hue Sort Saturation Sort Value

+

Sort Saturation HSL Sort Lightness

Try out: lol.png, testjubs.jpg, stars.jpg, 1600.jpg, fallout.jpg

diff --git a/js/franz.js b/js/franz.js index 41bc155..adcd27f 100644 --- a/js/franz.js +++ b/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 */