Efforts to speed up application; initially ran around ~50ms on initial data loops, now runs in the ~30ms range. Doing division in JS over large loops == insane, I'm guessing because everything is floating point. Multiply by 0.5 instead and we get some nice speedups (odd, I know; best answer I can muster...).
This commit is contained in:
parent
70dfb93447
commit
4fe6ed90ca
2 changed files with 38 additions and 43 deletions
14
index.php
14
index.php
|
|
@ -41,7 +41,7 @@
|
||||||
});
|
});
|
||||||
|
|
||||||
$("#try_these a").click(function() {
|
$("#try_these a").click(function() {
|
||||||
img_input.value = this.innerHTML;
|
img_input.value = "awesome/" + $(this)[0].innerHTML;
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -95,15 +95,15 @@
|
||||||
<input type="submit" class="img_submit" value="Upload and be awesome">
|
<input type="submit" class="img_submit" value="Upload and be awesome">
|
||||||
</form>
|
</form>
|
||||||
<form method="post" action="#" id="franz_form">
|
<form method="post" action="#" id="franz_form">
|
||||||
<input type="text" id="img_input" value="lol.png">
|
<input type="text" id="img_input" value="awesome/lol.png">
|
||||||
<input type="submit" class="img_submit" value="Go for it!">
|
<input type="submit" class="img_submit" value="Go for it!">
|
||||||
</form>
|
</form>
|
||||||
<p id="try_these"><strong>Try out:</strong>
|
<p id="try_these"><strong>Try out:</strong>
|
||||||
<a href="#" title="lol.png">lol.png</a>,
|
<a href="#" title="awesome/lol.png">lol.png</a>,
|
||||||
<a href="#" title="testjubs.jpg">testjubs.jpg</a>,
|
<a href="#" title="awesome/testjubs.jpg">testjubs.jpg</a>,
|
||||||
<a href="#" title="stars.jpg">stars.jpg</a>,
|
<a href="#" title="awesome/stars.jpg">stars.jpg</a>,
|
||||||
<a href="#" title="1600.jpg">1600.jpg</a>,
|
<a href="#" title="awesome/1600.jpg">1600.jpg</a>,
|
||||||
<a href="#" title="fallout.jpg">fallout.jpg</a>
|
<a href="#" title="awesome/fallout.jpg">fallout.jpg</a>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
67
js/franz.js
67
js/franz.js
|
|
@ -100,76 +100,71 @@ var franz = {
|
||||||
return false
|
return false
|
||||||
},
|
},
|
||||||
|
|
||||||
getHue: function(red,green,blue) {
|
getHue: function(red, green, blue) {
|
||||||
var min, max, delta, hue;
|
var min = Math.min(red, Math.min(green, blue)),
|
||||||
|
max = Math.max(red, Math.max(green, blue)),
|
||||||
|
delta = max - min,
|
||||||
|
hue;
|
||||||
|
|
||||||
min = Math.min(red,Math.min(green,blue));
|
if(max == 0)
|
||||||
max = Math.max(red,Math.max(green,blue));
|
|
||||||
delta = max - min;
|
|
||||||
|
|
||||||
if (max == 0)
|
|
||||||
return -1;
|
return -1;
|
||||||
else {
|
else {
|
||||||
if (red == max)
|
if(red == max)
|
||||||
hue = (green - blue) / delta; //between yellow & magenta
|
hue = (green - blue) / delta; //between yellow & magenta
|
||||||
else if (green == max)
|
else if(green == max)
|
||||||
hue = 2 + (blue - red) / delta; //between cyan & yellow
|
hue = 2 + (blue - red) / delta; //between cyan & yellow
|
||||||
else
|
else
|
||||||
hue = 4 + (red - green) / delta; //between magenta & cyan
|
hue = 4 + (red - green) / delta; //between magenta & cyan
|
||||||
|
|
||||||
// hue degrees
|
// hue degrees
|
||||||
hue = hue * 60;
|
hue = hue * 60;
|
||||||
if (hue < 0) hue += 360;
|
if(hue < 0) hue += 360;
|
||||||
}
|
}
|
||||||
|
|
||||||
return hue;
|
return hue;
|
||||||
},
|
},
|
||||||
|
|
||||||
getSatHSV: function(red, green, blue) {
|
getSatHSV: function(red, green, blue) {
|
||||||
var min, max, delta, sat;
|
var min = Math.min(red, Math.min(green, blue)),
|
||||||
|
max = Math.max(red, Math.max(green, blue)),
|
||||||
min = Math.min(red,Math.min(green,blue));
|
delta = max - min,
|
||||||
max = Math.max(red,Math.max(green,blue));
|
sat = delta / max;
|
||||||
delta = max - min;
|
|
||||||
sat = delta / max;
|
|
||||||
|
|
||||||
return sat;
|
return sat;
|
||||||
},
|
},
|
||||||
|
|
||||||
getValHSV: function(red, green, blue) { return Math.max(red,Math.max(green,blue)); },
|
getValHSV: function(red, green, blue) { return Math.max(red, Math.max(green,blue)); },
|
||||||
|
|
||||||
getSatHSL: function(red, green, blue) {
|
getSatHSL: function(red, green, blue) {
|
||||||
var min, max, sat;
|
var min = Math.min(red, Math.min(green, blue)),
|
||||||
var lightness = franz.getLightHSL();
|
max = Math.max(red, Math.max(green, blue)),
|
||||||
|
lightness = franz.getLightHSL(),
|
||||||
|
sat;
|
||||||
|
|
||||||
min = Math.min(red,Math.min(green,blue));
|
if(min == max) return 0;
|
||||||
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));
|
||||||
if (lightness < 1/2) sat = (max-min)/(max+min);
|
|
||||||
else sat = (max-min)/(2 - (max+min));
|
|
||||||
|
|
||||||
return sat;
|
return sat;
|
||||||
},
|
},
|
||||||
|
|
||||||
getLightHSL: function(red, green, blue) {
|
getLightHSL: function(red, green, blue) {
|
||||||
var min, max;
|
var min = Math.min(red, Math.min(green, blue)),
|
||||||
min = Math.min(red,Math.min(green,blue));
|
max = Math.max(red, Math.max(green, blue));
|
||||||
max = Math.max(red,Math.max(green,blue));
|
return 0.5 * (min + max);
|
||||||
return 1/2*(min+max);
|
|
||||||
},
|
},
|
||||||
|
|
||||||
/* routines to display color swatches */
|
|
||||||
displayColors: function(order_array) {
|
displayColors: function(order_array) {
|
||||||
var docString = "";
|
var docStr = "";
|
||||||
|
|
||||||
for(var i = 0; i < franz.alpha.length; i++) {
|
for(var i = 0; i < franz.alpha.length; i++) {
|
||||||
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>';
|
docStr += '<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;
|
document.getElementById("log_colors").innerHTML = docStr;
|
||||||
$("#container_bottom").fadeIn("slow");
|
if(typeof jQuery != "undefined") $("#container_bottom").fadeIn("slow");
|
||||||
|
else document.getElementById("container_bottom").style.display = "block";
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Reference in a new issue