Merging with Dominicks most recent work...
This commit is contained in:
Veno Server
commit
6dd80339fb
4 changed files with 216 additions and 105 deletions
164
js/franz.js
164
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,54 +76,31 @@ var franz = {
|
|||
}
|
||||
|
||||
/* get hue sat val array */
|
||||
franz.RGBtoHSV();
|
||||
franz.RGBtoHSVHL();
|
||||
|
||||
/* 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;
|
||||
/* 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));
|
||||
|
|
@ -147,19 +125,47 @@ var franz = {
|
|||
return hue;
|
||||
},
|
||||
|
||||
displayHue: function() {
|
||||
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) {
|
||||
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 += '<div class="color_box" style="background-color: rgb(' + franz.red[franz.origIndex[i]] + ', ' + franz.green[franz.origIndex[i]] + ',' + franz.blue[franz.origIndex[i]] + ');"></div>';
|
||||
docString += '<div class="color_box" style="background-color: rgb(' + franz.red[order_array[i]] + ', ' + franz.green[order_array[i]] + ',' + franz.blue[order_array[i]] + ');"></div>';
|
||||
}
|
||||
|
||||
document.getElementById("log_colors").innerHTML = docString;
|
||||
|
|
@ -167,51 +173,53 @@ 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 += '<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.clone(franz.val), 0, franz.alpha.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");
|
||||
|
||||
|
||||
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;
|
||||
},
|
||||
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 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);
|
||||
|
|
|
|||
Reference in a new issue