code/franz
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added hex2rgb and getGradient, pretty much self-explanitory

Browse source
This commit is contained in:
Dominick Pham 2010-05-08 17:02:47 -04:00
parent fdffdafca8
commit 8efb996d1c
3 changed files with 70 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

14
css/example.css
View file

@ -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;

16
foozy.html
View file

@ -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>

72
js/franz.js
View file

@ -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++) {
docStr += '<div class="color_boxd" style="background-color: rgb(' + this.rgba[i][0] + ', ' + this.rgba[i][1] + ',' + this.rgba[i][2] + ');"></div>';
for(var i = 0; i < color_array.length; i++) {
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,28 +184,7 @@ 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;
}
}
}
franz.util = {
@ -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") {