We Keep Coding

How to Optimize execution time for RGB to HSL conversion function?

I've created this function to convert RGB color to HSL color. It works perfect.
But I need to make it run faster, because it's used to replace colors on a canvas, and I need to reduce the time of replacement. Since the image contains 360k pixels (600x600px) anything can make it faster.
That's my current implementation:
/**
* Convert RGB Color to HSL Color
* #param {{R: integer, G: integer, B: integer}} rgb
* #returns {{H: number, S: number, L: number}}
*/
Colorize.prototype.rgbToHsl = function(rgb) {
var R = rgb.R/255;
var G = rgb.G/255;
var B = rgb.B/255;
var Cmax = Math.max(R,G,B);
var Cmin = Math.min(R,G,B);
var delta = Cmax - Cmin;
var L = (Cmax + Cmin) / 2;
var S = 0;
var H = 0;
if (delta !== 0) {
S = delta / (1 - Math.abs((2*L) - 1));
switch (Cmax) {
case R:
H = ((G - B) / delta) % 6;
break;
case G:
H = ((B - R) / delta) + 2;
break;
case B:
H = ((R - G) / delta) + 4;
break;
}
H *= 60;
}
// Convert negative angles from Hue
while (H < 0) {
H += 360;
}
return {
H: H,
S: S,
L: L
};
};

tl;dr
Define everything, before calculations
Switch is bad for performance
Loops are bad
Use Closure Compiler for automated optimizations
MEMOIZE! (this one is not available in the benchmark because it uses only one color at the time)
Compare pairs in Math.max and Math.min (if-else works better for bigger numbers as far as I can see)
Benchmark
The benchmark is quite basic; I'm generating a random RGB color every time and use it for the test suit.
The same color for all implementations of a converter.
I'm currently using a fast computer, so your numbers may differ.
At this point it is hard to optimize further, because performance differs, depending on the data.
Optimisations
Define the object for the result value at the very beginning. Allocating memory for the objects upfront somehow improves the performance.
var res = {
H: 0,
S: 0,
L: L
}
// ...
return res;
Not using switch will yield easy performance improvement.
if (delta !== 0) {
S = delta / (1 - Math.abs((2 * L) - 1));
if (Cmax === R) {
H = ((G - B) / delta) % 6;
} else if (Cmax === G) {
H = ((B - R) / delta) + 2;
} else if (Cmax === B) {
H = ((R - G) / delta) + 4;
}
H *= 60;
}
While loop is easily removable by:
if (H < 0) {
remainder = H % 360;
if (remainder !== 0) {
H = remainder + 360;
}
}
I have also applied Closure Compiler to remove redundant operations inside of the code.
You should memoize the results!
Consider refactoring the function to use three arguments so it's possible to have a multi-dimensional hash-map for memozing cache. Alternatively you can try using WeakMap, but the performance of this solution is unknown.
See the article Faster JavaScript Memoization For Improved Application Performance
Results
Node.js
The best one is rgbToHslOptimizedClosure.
node -v
v6.5.0
rgbToHsl x 16,468,872 ops/sec ±1.64% (85 runs sampled)
rgbToHsl_ x 15,795,460 ops/sec ±1.28% (84 runs sampled)
rgbToHslIfElse x 16,091,606 ops/sec ±1.41% (85 runs sampled)
rgbToHslOptimized x 22,147,449 ops/sec ±1.96% (81 runs sampled)
rgbToHslOptimizedClosure x 46,493,753 ops/sec ±1.55% (85 runs sampled)
rgbToHslOptimizedIfElse x 21,825,646 ops/sec ±2.93% (85 runs sampled)
rgbToHslOptimizedClosureIfElse x 38,346,283 ops/sec ±9.02% (73 runs sampled)
rgbToHslOptimizedIfElseConstant x 30,461,643 ops/sec ±2.68% (81 runs sampled)
rgbToHslOptimizedIfElseConstantClosure x 40,625,530 ops/sec ±2.70% (73 runs sampled)
Fastest is rgbToHslOptimizedClosure
Slowest is rgbToHsl_
Browser
Chrome Version 55.0.2883.95 (64-bit)
rgbToHsl x 18,456,955 ops/sec ±0.78% (62 runs sampled)
rgbToHsl_ x 16,629,042 ops/sec ±2.34% (63 runs sampled)
rgbToHslIfElse x 17,177,059 ops/sec ±3.85% (59 runs sampled)
rgbToHslOptimized x 27,552,325 ops/sec ±0.95% (62 runs sampled)
rgbToHslOptimizedClosure x 47,659,771 ops/sec ±3.24% (47 runs sampled)
rgbToHslOptimizedIfElse x 26,033,751 ops/sec ±2.63% (61 runs sampled)
rgbToHslOptimizedClosureIfElse x 43,430,875 ops/sec ±3.55% (59 runs sampled)
rgbToHslOptimizedIfElseConstant x 33,696,558 ops/sec ±3.97% (58 runs sampled)
rgbToHslOptimizedIfElseConstantClosure x 44,529,209 ops/sec ±3.56% (60 runs sampled)
Fastest is rgbToHslOptimizedClosure
Slowest is rgbToHsl_
Run the benchmark yourself
Note, that browser will freeze for a moment.
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var RGB = { R: getRandomInt(0, 255), G: getRandomInt(0, 255), B: getRandomInt(0, 255) }
// http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c
/**
* Converts an RGB color value to HSL. Conversion formula
* adapted from http://en.wikipedia.org/wiki/HSL_color_space.
* Assumes r, g, and b are contained in the set [0, 255] and
* returns h, s, and l in the set [0, 1].
*
* #param {number} r The red color value
* #param {number} g The green color value
* #param {number} b The blue color value
* #return {Array} The HSL representation
*/
function rgbToHsl_(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return [ h, s, l ];
}
function rgbToHsl(rgb) {
var R = rgb.R / 255;
var G = rgb.G / 255;
var B = rgb.B / 255;
var Cmax = Math.max(R, G, B);
var Cmin = Math.min(R, G, B);
var delta = Cmax - Cmin;
var L = (Cmax + Cmin) / 2;
var S = 0;
var H = 0;
if (delta !== 0) {
S = delta / (1 - Math.abs((2 * L) - 1));
switch (Cmax) {
case R:
H = ((G - B) / delta) % 6;
break;
case G:
H = ((B - R) / delta) + 2;
break;
case B:
H = ((R - G) / delta) + 4;
break;
}
H *= 60;
}
// Convert negative angles from Hue
while (H < 0) {
H += 360;
}
return {
H: H,
S: S,
L: L
};
};
function rgbToHslIfElse(rgb) {
var R = rgb.R / 255;
var G = rgb.G / 255;
var B = rgb.B / 255;
var Cmax = Math.max(R, G, B);
var Cmin = Math.min(R, G, B);
var delta = Cmax - Cmin;
var L = (Cmax + Cmin) / 2;
var S = 0;
var H = 0;
if (delta !== 0) {
S = delta / (1 - Math.abs((2 * L) - 1));
if (Cmax === R) {
H = ((G - B) / delta) % 6;
} else if (Cmax === G) {
H = ((B - R) / delta) + 2;
} else if (Cmax === B) {
H = ((R - G) / delta) + 4;
}
H *= 60;
}
// Convert negative angles from Hue
while (H < 0) {
H += 360;
}
return {
H: H,
S: S,
L: L
};
};
function rgbToHslOptimized(rgb) {
var R = rgb.R / 255;
var G = rgb.G / 255;
var B = rgb.B / 255;
var Cmax = Math.max(Math.max(R, G), B);
var Cmin = Math.min(Math.min(R, G), B);
var delta = Cmax - Cmin;
var S = 0;
var H = 0;
var L = (Cmax + Cmin) / 2;
var res = {
H: 0,
S: 0,
L: L
}
var remainder = 0;
if (delta !== 0) {
S = delta / (1 - Math.abs((2 * L) - 1));
switch (Cmax) {
case R:
H = ((G - B) / delta) % 6;
break;
case G:
H = ((B - R) / delta) + 2;
break;
case B:
H = ((R - G) / delta) + 4;
break;
}
H *= 60;
}
if (H < 0) {
remainder = H % 360;
if (remainder !== 0) {
H = remainder + 360;
}
}
res.H = H;
res.S = S;
return res;
}
function rgbToHslOptimizedIfElse(rgb) {
var R = rgb.R / 255;
var G = rgb.G / 255;
var B = rgb.B / 255;
var Cmax = Math.max(Math.max(R, G), B);
var Cmin = Math.min(Math.min(R, G), B);
var delta = Cmax - Cmin;
var S = 0;
var H = 0;
var L = (Cmax + Cmin) / 2;
var res = {
H: 0,
S: 0,
L: L
}
var remainder = 0;
if (delta !== 0) {
S = delta / (1 - Math.abs((2 * L) - 1));
if (Cmax === R) {
H = ((G - B) / delta) % 6;
} else if (Cmax === G) {
H = ((B - R) / delta) + 2;
} else if (Cmax === B) {
H = ((R - G) / delta) + 4;
}
H *= 60;
}
if (H < 0) {
remainder = H % 360;
if (remainder !== 0) {
H = remainder + 360;
}
}
res.H = H;
res.S = S;
return res;
}
function rgbToHslOptimizedIfElseConstant(rgb) {
var R = rgb.R * 0.00392156862745;
var G = rgb.G * 0.00392156862745;
var B = rgb.B * 0.00392156862745;
var Cmax = Math.max(Math.max(R, G), B);
var Cmin = Math.min(Math.min(R, G), B);
var delta = Cmax - Cmin;
var S = 0;
var H = 0;
var L = (Cmax + Cmin) * 0.5;
var res = {
H: 0,
S: 0,
L: L
}
var remainder = 0;
if (delta !== 0) {
S = delta / (1 - Math.abs((2 * L) - 1));
if (Cmax === R) {
H = ((G - B) / delta) % 6;
} else if (Cmax === G) {
H = ((B - R) / delta) + 2;
} else if (Cmax === B) {
H = ((R - G) / delta) + 4;
}
H *= 60;
}
if (H < 0) {
remainder = H % 360;
if (remainder !== 0) {
H = remainder + 360;
}
}
res.H = H;
res.S = S;
return res;
}
function rgbToHslOptimizedIfElseConstantClosure(c) {
var a = .00392156862745 * c.h, e = .00392156862745 * c.f, f = .00392156862745 * c.c, g = Math.max(Math.max(a, e), f), d = Math.min(Math.min(a, e), f), h = g - d, b = c = 0, k = (g + d) / 2, d = {
a: 0,
b: 0,
g: k
};
0 !== h && (c = h / (1 - Math.abs(2 * k - 1)), g === a ? b = (e - f) / h % 6 : g === e ? b = (f - a) / h + 2 : g === f && (b = (a - e) / h + 4), b *= 60);
0 > b && (a = b % 360, 0 !== a && (b = a + 360));
d.a = b;
d.b = c;
return d;
};
function rgbToHslOptimizedClosure(c) {
var a = c.f / 255, e = c.b / 255, f = c.a / 255, k = Math.max(Math.max(a, e), f), d = Math.min(Math.min(a, e), f), g = k - d, b = c = 0, l = (k + d) / 2, d = {
c: 0,
g: 0,
h: l
};
if (0 !== g) {
c = g / (1 - Math.abs(2 * l - 1));
switch (k) {
case a:
b = (e - f) / g % 6;
break;
case e:
b = (f - a) / g + 2;
break;
case f:
b = (a - e) / g + 4;
}
b *= 60;
}
0 > b && (a = b % 360, 0 !== a && (b = a + 360));
d.c = b;
d.g = c;
return d;
}
function rgbToHslOptimizedClosureIfElse(c) {
var a = c.f / 255, e = c.b / 255, f = c.a / 255, g = Math.max(Math.max(a, e), f), d = Math.min(Math.min(a, e), f), h = g - d, b = c = 0, l = (g + d) / 2, d = {
c: 0,
g: 0,
h: l
};
0 !== h && (c = h / (1 - Math.abs(2 * l - 1)), g === a ? b = (e - f) / h % 6 : g === e ? b = (f - a) / h + 2 : g === f && (b = (a - e) / h + 4), b *= 60);
0 > b && (a = b % 360, 0 !== a && (b = a + 360));
d.c = b;
d.g = c;
return d;
}
new Benchmark.Suite()
.add('rgbToHsl', function () {
rgbToHsl(RGB);
})
.add('rgbToHsl_', function () {
rgbToHsl_(RGB.R, RGB.G, RGB.B);
})
.add('rgbToHslIfElse', function () {
rgbToHslIfElse(RGB);
})
.add('rgbToHslOptimized', function () {
rgbToHslOptimized(RGB);
})
.add('rgbToHslOptimizedClosure', function () {
rgbToHslOptimizedClosure(RGB);
})
.add('rgbToHslOptimizedIfElse', function () {
rgbToHslOptimizedIfElse(RGB);
})
.add('rgbToHslOptimizedClosureIfElse', function () {
rgbToHslOptimizedClosureIfElse(RGB);
})
.add('rgbToHslOptimizedIfElseConstant', function () {
rgbToHslOptimizedIfElseConstant(RGB);
})
.add('rgbToHslOptimizedIfElseConstantClosure', function () {
rgbToHslOptimizedIfElseConstantClosure(RGB);
})
// add listeners
.on('cycle', function (event) {
console.log(String(event.target));
})
.on('complete', function () {
console.log('Fastest is ' + this.filter('fastest').map('name'));
console.log('Slowest is ' + this.filter('slowest').map('name'));
})
// run async
.run({ 'async': false });
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<script src="https://cdn.rawgit.com/bestiejs/benchmark.js/master/benchmark.js"></script>

Avoid the divisions by all means. You can probably eliminate a few by rescaling the relevant variables and constants.
You can also avoid divisions by using a lookup-table of inverses.
I don't think that the switch case is very efficient. I would advise to replace the max/min/switch by a single discussion using a triply nested if where you compare the RGB components, ending in the 6 possible orderings and applying ad-hoc processing to each.

Use a rough approximation instead:
third = Math.PI * 2 / 3;
ctx.fillStyle = 'rgb('+ [
127 + 127 * Math.cos(time - third),
127 + 127 * Math.cos(time),
127 + 127 * Math.cos(time + third)
] +')';
Based on:
http://www.p01.org/artjs_at_ffconf/
http://www.p01.org/artjs_at_ffconf/talk.html

how to set contrast and saturation using fabric.js

I want to set contrast, saturation and hue in my image editor. for this i use fabric.js but it have only brightness option..
Here is the my fabric js code
(function() {
fabric.Object.prototype.transparentCorners = false;
var $ = function(id){return document.getElementById(id)};
console.log($);
function applyFilter(index, filter) {
console.log(filter);
var obj = canvas.getActiveObject();
obj.filters[index] = filter;
obj.applyFilters(canvas.renderAll.bind(canvas));
}
function applyFilterValue(index, prop, value) {
var obj = canvas.getActiveObject();
if (obj.filters[index]) {
obj.filters[index][prop] = value;
obj.applyFilters(canvas.renderAll.bind(canvas));
}
}
fabric.Object.prototype.padding = 5;
fabric.Object.prototype.transparentCorners = false;
var canvas = this.__canvas = new fabric.Canvas('c'),
f = fabric.Image.filters;
fabric.Image.fromURL('../lib/bg.png', function(img) {
canvas.backgroundImage = img;
canvas.backgroundImage.width = 400;
canvas.backgroundImage.height = 400;
});
canvas.on({
'object:selected': function() {
fabric.util.toArray(document.getElementsByTagName('input'))
.forEach(function(el){ el.disabled = false; })
var filters = ['brightness',];
// var filters = ['grayscale', 'invert', 'remove-white', 'sepia', 'sepia2',
// 'brightness', 'noise', 'gradient-transparency', 'pixelate',
// 'blur', 'sharpen', 'emboss', 'tint', 'multiply', 'blend'];
for (var i = 0; i < filters.length; i++) {
$(filters[i]).checked = !!canvas.getActiveObject().filters[i];
}
applyFilter(5, true && new f.Brightness({
brightness: parseInt($('brightness-value').value, 10)
}));
},
'selection:cleared': function() {
fabric.util.toArray(document.getElementsByTagName('input'))
.forEach(function(el){ el.disabled = true; })
}
});
fabric.Image.fromURL('../upload/Chrysanthemum.jpg', function(img) {
var oImg = img.set({ left: 50, top: 100, angle: 0 }).scale(0.9);
canvas.add(oImg).renderAll();
canvas.setActiveObject(oImg);
});
$('brightness').onclick = function () {
applyFilter(5, this.checked && new f.Brightness({
brightness: parseInt($('brightness-value').value, 10)
}));
};
$('brightness-value').onchange = function() {
applyFilterValue(5, 'brightness', parseInt(this.value, 10));
};
})();

Last year I wrote a HSL plugin which might be of use:
fabric.Image.filters.HSL = fabric.util.createClass(fabric.Image.filters.BaseFilter, {
type: 'HSL',
initialize: function(options) {
options || (options = {});
this.hue = options.hue || 0;
this.saturation = options.saturation || 0;
this.lightness = options.lightness || 0;
},
rgbToHsl: function(r, g, b) {
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if (max == min) {
h = s = 0;
} else {
var d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r: h = (g - b) / d + (g < b ? 6 : 0); break;
case g: h = (b - r) / d + 2; break;
case b: h = (r - g) / d + 4; break;
}
h /= 6;
}
return [h, s, l];
},
hslToRgb: function(h, s, l) {
var r, g, b;
if (s == 0) {
r = g = b = l;
} else {
function hue2rgb(p, q, t){
if (t < 0) t += 1;
if (t > 1) t -= 1;
if (t < 1/6) return p + (q - p) * 6 * t;
if (t < 1/2) return q;
if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return [r * 255, g * 255, b * 255];
},
applyTo: function(canvasEl) {
var context = canvasEl.getContext('2d'),
imageData = context.getImageData(0, 0, canvasEl.width, canvasEl.height),
data = imageData.data;
for (var i=0; i<data.length; i+=4)
{
// Convert RGB to HSL
var hsl = this.rgbToHsl(data[i], data[i+1], data[i+2]);
// Apply HSL values
if (this.hue ) hsl[0] = this.hue;
if (this.saturation) hsl[1] = this.saturation;
if (this.lightness ) hsl[2] = this.lightness;
// Convert HSL back to RGB
var rgb = this.hslToRgb(hsl[0], hsl[1], hsl[2]);
// Update data
data[i] = rgb[0];
data[i+1] = rgb[1];
data[i+2] = rgb[2];
}
context.putImageData(imageData, 0, 0);
},
toObject: function() {
return extend(this.callSuper('toObject'), {
hue: this.hue,
saturation: this.saturation,
lightness: this.lightness
});
}
});
Add to your page after FabricJS has loaded and call like this:
var hue = 1; // Range: 0 to 1
var brightness = 1; // Range: 0 to 1
var lightness = 1; // Range: 0 to 1
var filterHSL = new img.filters.HSL({
hue: hue,
saturation: saturation,
lightness: lightness
});
img.filters = [filterHSL];
img.applyFilters(canvas.renderAll.bind(canvas));
...where canvas is your FabricJS canvas object.
I hope this helps.

You can now do this with the latest Fabricjs release, 1.6.6
fabric.Image.filters.Contrast and fabric.Image.filters.Saturate were added in this release.
I made a fiddle to show you how to achieve it (note: change the applyFilter() function to achieve different filters):
DEMO

Getting error in jquery

My code is giving me this error:
Uncaught TypeError: Cannot read property 'left' of undefined
Code:
function responsiveSlider() {
jQuery(".slider-bloc").each(function() {
var a = jQuery(this),
b = this;
if (1 != a.data("is_slider")) {
a.data("is_slider", 1);
var c = a.find(".nav-slider .item-nav"),
d = jQuery(a.find(".content-rel-slider")[0]),
e = jQuery(a.find(".content-abs-slider")[0]);
a.find(".item-slider").each(function(a) {
jQuery(this).attr("data-inc", a + 1)
}), a.find(".item-slider").clone().appendTo(e), a.find(".item-slider").clone().appendTo(e);
var f = a.find(".item-slider"),
g = a.hasClass("full-slider"),
h = 0,
i = function(a) {
e.css({
width: "100%"
}), g && f.css({
width: d.width()
}), e.css({
width: jQuery(f[0]).width() * f.length
});
Math.ceil(d.width() / jQuery(f[0]).width());
f.length * jQuery(f[0]).width() < d.width() ? e.css({
left: 0
}) : 0 == a && e.css({
left: -jQuery(f[0]).width()
})
},
j = function(b) {
var c = Math.ceil(d.width() / jQuery(f[0]).width());
durationanim = 2 >= c ? 300 : 800;
var g = jQuery(f[0]).width();
if (b + c - 1 >= f.length ? b = 0 : 0 > b && (b = f.length - c), f[b]) {
if (f.length * g < d.width()) return;
if (a.hasClass("moving")) return;
a.addClass("moving"), a.find(".item-slider").removeClass("current"), jQuery(a.find(".item-slider")[1]).addClass("current");
var i = "next",
j = 1,
k = e.position().left,
l = -g * c - g;
if (1 > b) {
i = "prev";
for (var m = 0; c > m; m++) jQuery(a.find(".item-slider")[f.length - 1]).prependTo(e);
k -= g * c, l = -g
} else j += c;
f = a.find(".item-slider"), h = 1;
var o = e.find(".item-slider.current").index();
if (!isMobile && c > 1) {
"next" == i ? (initforfirstslide = o, lastforfirstslide = o + c - 1, initforsecondslide = o + c, lastforsecondslide = o + 2 * c - 1) : (initforfirstslide = o - c, lastforfirstslide = o - 1, initforsecondslide = o, lastforsecondslide = o + c - 1);
for (var m = initforfirstslide; m <= lastforfirstslide; m++) {
var p = durationanim / 2,
q = durationanim / 2;
"next" == i ? movexfirstslide = -jQuery(f[m]).width() * (c - (m - o + 1)) / 4 : movexfirstslide = jQuery(f[m]).width() * (m - o + 1) / 4;
var r = new TimelineLite({
paused: !0
});
r.fromTo(jQuery(f[m]), p / 1e3, {
x: 0,
force3D: !0,
ease: Cubic.easeInOut
}, {
x: movexfirstslide,
force3D: !0,
ease: Cubic.easeInOut
}), r.to(jQuery(f[m]), q / 1e3, {
x: 0,
force3D: !0,
ease: Cubic.easeInOut
}), r.play()
}
for (var m = initforsecondslide; m <= lastforsecondslide; m++) {
var p = durationanim / 2,
q = durationanim / 2;
"next" == i ? movexsecondslide = jQuery(f[m]).width() * (m - o - c + 1) / 4 : movexsecondslide = jQuery(f[m]).width() * (m - o + 1) / 4;
var r = new TimelineLite({
paused: !0
});
r.fromTo(jQuery(f[m]), p / 1e3, {
x: 0,
force3D: !0,
ease: Cubic.easeInOut
}, {
x: movexsecondslide,
force3D: !0,
ease: Cubic.easeInOut
}), r.to(jQuery(f[m]), q / 1e3, {
x: 0,
force3D: !0,
ease: Cubic.easeInOut
}), r.play()
}
}
if (TweenMax.fromTo(e, durationanim / 1e3, {
left: k,
force3D: !0,
ease: n
}, {
left: l,
force3D: !0,
ease: n,
onComplete: function() {
if ("next" == i) {
h--;
for (var b = 0; c > b; b++) jQuery(a.find(".item-slider")[0]).appendTo(e);
e.css({
left: -g
})
}
f.removeClass("current"), jQuery(f[1]).addClass("current"), f = a.find(".item-slider"), a.removeClass("moving")
}
}), a.find(".nav-bullet").length > 0) {
var s = a.find(".nav-bullet .bullet").length - 1,
t = jQuery(a.find(".item-slider")[j]).attr("data-inc"),
u = t * s / (f.length / 4);.5 == u && (u = .4), currentbullet = Math.round(u), a.find(".nav-bullet .bullet").removeClass("current"), jQuery(a.find(".nav-bullet .bullet")[currentbullet]).addClass("current")
}
}
};
c.each(function() {
var a = jQuery(this);
a.on({
click: function() {
var b = a.hasClass("prev-button") ? 0 : 2;
return j(b), !1
}
})
}), _touchstart = !1, swipedirection = !1, _lastcoord = 0, coord = 0, initmoveposition = 0, touchmove = !1;
var k = new Hammer(b),
l = e.position().left,
m = l,
n = Cubic.easeInOut;
k.on("panstart", function(b) {
a.hasClass("moving") || (n = Strong.easeOut, l = e.position().left, m = l)
}), k.on("panend", function(b) {
a.hasClass("moving") || (2 == b.direction && j(1), 4 == b.direction && j(0), 1 == b.direction && TweenMax.to(e, .6, {
left: m,
force3D: !0,
ease: Strong.easeOut,
throwProps: !0
}))
}), k.on("panleft panright", function(b) {
a.hasClass("moving") || (0 == l && (l = e.position().left), TweenMax.to(e, .6, {
left: l + b.deltaX,
force3D: !0,
ease: Strong.easeOut,
throwProps: !0
}))
}), jQuery(window).on("resize", function() {
i(!1)
}), jQuery(a.find(".item-slider")[f.length - 1]).appendTo(e), e.css({
left: -jQuery(f[0]).width() * (h + 1)
}), f = a.find(".item-slider"), jQuery(f[1]).addClass("current"), h++, i(!0)
}
})}
This is the code of my responsive slider but sometimes it gave me the error
l = e.position().left, on this line, i tried to remove this line but then slider stops working, i don't know why sometimes it doesn't gave me the error please explain this to me will be very thankful to you.

Just place this line :
var e = jQuery(a.find(".content-abs-slider")[0]);
after or within
j = function(b) {

transition of images with javascript as a video

as the effect of bottom of this page
I tried several ways but have not succeeded
http://larealpari.com/?
function () {
(function (e) {
var n, r, i, s, o, u, a, f, l, c, h, p, d, v, m;
return e.gc.active = !0, s = parseInt(t.delay), n = parseInt(t.count), v = parseInt(t.width), h = 0, l = 0, c = 0, u = parseInt(t.height), p = s, o = !0, window.timeout = null, window.interval = null, a = 0, m = 0, d = function () {
var t, r, i;
return i = e(window).width() / e(window).height(), r = v / u, i > r ? (h = e(window).width(), t = Math.ceil(u * (h / v)), c = parseInt((t - e(window).height()) / 2), l = 0) : (t = e(window).height(), h = Math.ceil(v * (t / u)), l = parseInt((h - e(window).width()) / 2), c = 0), e("#frame").css({
"background-size": "" + h * n + "px " + t + "px",
"background-position": "-" + (a * h + l) + "px -" + c + "px"
})
})(jQuery
);

Need to add jQuery function below an automatically-added script

I'm currently trying to add this fun little crawling fly script to my website, and want to customize it so that you can kill it when it's clicked. The script automatically places the image right above the tag, and I can't seem to get my jQuery .click function below it.
This is the script that I put in the head (sorry it's minified, but the unminified version doesn't work for some reason)
/* WWW: http://screen-bug.googlecode.com/git/index.html Released under WTFPL license. */
(function () {
function y() {
0 >= --s && t();
if (!j) {
var b;
if (b = 0 >= --u) d = 0, 50 > a.top ? d |= 1 : a.top > document.documentElement.clientHeight - 50 && (d |= 2), 50 > a.left ? d |= 4 : a.left > document.documentElement.clientWidth - 50 && (d |= 8), b = d;
if (b && (c %= 360, 0 > c && (c += 360), 15 < g(q[d] - c))) {
b = q[d] - c;
var k = 360 - c + q[d];
f = g(b) < g(k) ? b : k;
u = 10;
l = 100;
m = 30
}
0 >= --l && (f = e(1, 150), l = h(40 * Math.random()));
if (0 >= --m) c += e(1, 10), m = h(10 * Math.random());
else {
b = e(1, 5);
if (0 < f && 0 > b || 0 > f && 0 < b) b = -b;
f -= b;
c += b
}
r = c * v;
b = 2 * Math.cos(r);
k = 2 * -Math.sin(r);
a.style.top = (a.top += k) + "px";
a.style.left = (a.left += b) + "px";
n("rotate(" + (90 - c) + "deg)")
}
}
function e(b, a) {
var c = h(b + Math.random() * a);
return 0.5 < Math.random() ? c : -c
}
function t() {
j = !j;
s = e(50, 300);
j ? (a.src = "https://screen-bug.googlecode.com/git/fruitfly.png", a.id = "bedbug", document.addEventListener ? document.addEventListener("mousemove", p, !1) : document.attachEvent && document.attachEvent("onmousemove", p)) : (a.src = "https://screen-bug.googlecode.com/git/fruitfly.png", w())
}
function w() {
document.removeEventListener ? document.removeEventListener("mousemove", p, !1) : document.detachEvent && document.detachEvent("onmousemove", p)
}
function p(b) {
b = b || window.event;
b.clientX ? (posx = b.clientX, posy = b.clientY) : b.pageX && (posx = b.pageX - (document.body.scrollLeft + document.documentElement.scrollLeft), posy = b.pageY - (document.body.scrollTop + document.documentElement.scrollTop));
40 > g(a.top - posy) + g(a.left - posx) && (t(), w())
}
var c = 90,
r = c * v,
f = 0,
q = {
1: 270,
2: 90,
4: 0,
8: 180,
5: 315,
9: 225,
6: 45,
10: 135
}, d = 0,
u = 10,
m = 0,
l = 0,
s = 50 * Math.random(),
j = !1,
a = null,
n = void 0,
x = {
Moz: function (b) {
a.style.MozTransform = b
},
Webkit: function (b) {
a.style.WebkitTransform = b
},
O: function (b) {
a.style.OTransform = b
},
Ms: function (b) {
a.style.msTransform = b
},
Khtml: function (b) {
a.style.KhtmlTransform = b
},
w3c: function (b) {
a.style.transform = b
}
}, h = Math.round,
g = Math.abs,
v = Math.PI / 180;
setTimeout(function () {
a = document.createElement("img");
a.src = "https://screen-bug.googlecode.com/git/fruitfly.png";
(new Image).src = "https://screen-bug.googlecode.com/git/fruitfly.png";
a.style.position = "fixed";
a.style.zIndex = "99";
a.top = e(50, document.documentElement.clientHeight - 50);
a.top = 0 < a.top ? a.top : -a.top;
a.left = e(50, document.documentElement.clientWidth - 50);
a.left = 0 < a.left ? a.left : -a.left;
a.style.top = a.top + "px";
a.style.left = a.left + "px";
document.body.appendChild(a);
m = h(10 * Math.random());
l = h(40 * Math.random());
"transform" in a.style && (n = x.w3c);
var b = ["Moz", "Webkit", "O", "Ms", "Khtml"];
for (i in b) if (b[i] + "Transform" in a.style) {
n = x[b[i]];
break
}
c = e(0, 360);
n && setInterval(y, 100)
}, 2E3)
})();
And I want to put this below it:
<script type="text/javascript">
$("#bedbug").click(function() {
alert("ARGHHH!!!!");
});
</script>
Eventually once it works, I'm going to have the click function do a lot more, but I just need to get it working first.
Thanks to all in advance, I appreciate all the assistance you guys (and gals) provide. Cheers!

It is not loaded when you try to reference it. Use on() to your advantage
$(document).on("click", "#bedbug", function() {
alert("ARGHHH!!!!");
});