From 1ae918870899d905e0f1cd65de79fd681fbcdd98 Mon Sep 17 00:00:00 2001 From: ippo615 Date: Mon, 15 Jul 2013 20:09:36 -0400 Subject: [PATCH] Improved 'colorizing' - now any color --- src/filters/Colors.js | 139 ++++++++++++++++---------------------- tests/js/visualTests.js | 144 ++-------------------------------------- 2 files changed, 63 insertions(+), 220 deletions(-) diff --git a/src/filters/Colors.js b/src/filters/Colors.js index 53ee6b52..abf46a31 100644 --- a/src/filters/Colors.js +++ b/src/filters/Colors.js @@ -1,6 +1,26 @@ (function() { - function pixelShiftHue(r,g,b,deg){ + var rgb_to_hsl = function(r,g,b){ + // Input colors are in 0-255, calculations are between 0-1 + r /= 255; g /= 255; b /= 255; + + // http://en.wikipedia.org/wiki/HSL_and_HSV + // Convert to HSL + var max = Math.max(r,g,b), + min = Math.min(r,g,b), + chroma = max - min, + luminance = chroma / 2, + saturation = chroma / (1 - Math.abs(2*luminance-1)), + hue = 0; + + if( max == r ){ hue = ((g-b)/chroma) % 6; }else + if( max == g ){ hue = (b-r)/chroma + 2; }else + if( max == b ){ hue = (r-g)/chroma + 4; } + + return [(hue*60+360) % 360, saturation, luminance]; + }; + + var pixelShiftHue = function(r,g,b,deg){ // Input colors are in 0-255, calculations are between 0-1 r /= 255; g /= 255; b /= 255; @@ -46,7 +66,18 @@ rB = (255*rB); return [rR,rG,rB]; - } + }; + + var shift_hue = function(imageData,deg){ + var data = imageData.data, + pixel; + for(var i = 0; i < data.length; i += 4) { + pixel = pixelShiftHue(data[i+0],data[i+1],data[i+2],deg); + data[i+0] = pixel[0]; + data[i+1] = pixel[1]; + data[i+2] = pixel[2]; + } + }; /** * shift hue @@ -55,15 +86,7 @@ * @param {Object} imageData */ Kinetic.Filters.ShiftHue = function(imageData) { - var data = imageData.data, - deg = this.getFilterHueShiftDeg(), - pixel; - for(var i = 0; i < data.length; i += 4) { - pixel = pixelShiftHue(data[i+0],data[i+1],data[i+2],deg); - data[i+0] = pixel[0]; - data[i+1] = pixel[1]; - data[i+2] = pixel[2]; - } + shift_hue(imageData,this.getFilterHueShiftDeg()); }; Kinetic.Node.addFilterGetterSetter(Kinetic.Image, 'filterHueShiftDeg', 0); @@ -81,85 +104,39 @@ * @memberof Kinetic.Image.prototype */ - /** - * show only red - * @function - * @memberof Kinetic.Filters - * @param {Object} imageData - */ - Kinetic.Filters.OnlyRed = function(imageData) { - var data = imageData.data; - for(var i = 0; i < data.length; i += 4) { - data[i + 1] = 0; // green - data[i + 2] = 0; // blue - } - }; - /** - * show only green - * @function - * @memberof Kinetic.Filters - * @param {Object} imageData - */ - Kinetic.Filters.OnlyGreen = function(imageData) { - var data = imageData.data; - for(var i = 0; i < data.length; i += 4) { - data[i + 0] = 0; // red - data[i + 2] = 0; // blue - } - }; - /** - * show only blue - * @function - * @memberof Kinetic.Filters - * @param {Object} imageData - */ - Kinetic.Filters.OnlyBlue = function(imageData) { + Kinetic.Filters.Colorize = function(imageData) { var data = imageData.data; - for(var i = 0; i < data.length; i += 4) { - data[i + 0] = 0; // red - data[i + 1] = 0; // green - } - }; - /** - * removes all red from an image - * @function - * @memberof Kinetic.Filters - * @param {Object} imageData - */ - Kinetic.Filters.NoRed = function(imageData) { - var data = imageData.data; - for(var i = 0; i < data.length; i += 4) { - data[i + 0] = 0; - } - }; + // First we'll colorize it red, then shift by the hue specified + var color = this.getFilterColorizeColor(), + hsl = rgb_to_hsl(color[0],color[1],color[2]), + hue = hsl[0]; - /** - * removes all green from an image - * @function - * @memberof Kinetic.Filters - * @param {Object} imageData - */ - Kinetic.Filters.NoGreen = function(imageData) { - var data = imageData.data; + // Color it red for(var i = 0; i < data.length; i += 4) { data[i + 1] = 0; - } - }; - - /** - * removes all blue from an image - * @function - * @memberof Kinetic.Filters - * @param {Object} imageData - */ - Kinetic.Filters.NoBlue = function(imageData) { - var data = imageData.data; - for(var i = 0; i < data.length; i += 4) { data[i + 2] = 0; } + + // Shift by the hue + shift_hue(imageData,hue); }; + Kinetic.Node.addFilterGetterSetter(Kinetic.Image, 'filterColorizeColor', [255,0,0] ); + /** + * Gets the colorizing color. + * @name getFilterColorizeColor + * @method + * @memberof Kinetic.Image.prototype + */ + + /** + * Gets the colorizing color. Should be an array [r,g,b] ie [255,0,128]. + * @name setFilterColorizeColor + * @method + * @memberof Kinetic.Image.prototype + */ + })(); diff --git a/tests/js/visualTests.js b/tests/js/visualTests.js index a8527ac6..27f41007 100644 --- a/tests/js/visualTests.js +++ b/tests/js/visualTests.js @@ -1432,7 +1432,7 @@ Test.Modules.IMAGE = { }; imageObj.src = '../assets/darth-vader.jpg'; }, - 'no red filter': function(containerId) { + 'colorizing filter': function(containerId) { var imageObj = new Image(); imageObj.onload = function() { var stage = new Kinetic.Stage({ @@ -1451,146 +1451,12 @@ Test.Modules.IMAGE = { layer.add(darth); stage.add(layer); - darth.setFilter(Kinetic.Filters.NoRed); + darth.setFilter(Kinetic.Filters.Colorize); + darth.setFilterColorizeColor([255,0,128]); layer.draw(); var dataUrl = layer.toDataURL(); //console.log(dataUrl); - testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.'); - }; - imageObj.src = '../assets/darth-vader.jpg'; - }, - 'no green filter': function(containerId) { - var imageObj = new Image(); - imageObj.onload = function() { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ - x: 10, - y: 10, - image: imageObj, - draggable: true - }); - - layer.add(darth); - stage.add(layer); - - darth.setFilter(Kinetic.Filters.NoGreen); - layer.draw(); - var dataUrl = layer.toDataURL(); - //console.log(dataUrl); - testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.'); - }; - imageObj.src = '../assets/darth-vader.jpg'; - }, - 'no blue filter': function(containerId) { - var imageObj = new Image(); - imageObj.onload = function() { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ - x: 10, - y: 10, - image: imageObj, - draggable: true - }); - - layer.add(darth); - stage.add(layer); - - darth.setFilter(Kinetic.Filters.NoBlue); - layer.draw(); - var dataUrl = layer.toDataURL(); - //console.log(dataUrl); - testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.'); - }; - imageObj.src = '../assets/darth-vader.jpg'; - }, - 'only red filter': function(containerId) { - var imageObj = new Image(); - imageObj.onload = function() { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ - x: 10, - y: 10, - image: imageObj, - draggable: true - }); - - layer.add(darth); - stage.add(layer); - - darth.setFilter(Kinetic.Filters.OnlyRed); - layer.draw(); - var dataUrl = layer.toDataURL(); - //console.log(dataUrl); - testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.'); - }; - imageObj.src = '../assets/darth-vader.jpg'; - }, - 'only green filter': function(containerId) { - var imageObj = new Image(); - imageObj.onload = function() { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ - x: 10, - y: 10, - image: imageObj, - draggable: true - }); - - layer.add(darth); - stage.add(layer); - - darth.setFilter(Kinetic.Filters.OnlyGreen); - layer.draw(); - var dataUrl = layer.toDataURL(); - //console.log(dataUrl); - testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.'); - }; - imageObj.src = '../assets/darth-vader.jpg'; - }, - 'only blue filter': function(containerId) { - var imageObj = new Image(); - imageObj.onload = function() { - var stage = new Kinetic.Stage({ - container: containerId, - width: 578, - height: 200 - }); - var layer = new Kinetic.Layer(); - darth = new Kinetic.Image({ - x: 10, - y: 10, - image: imageObj, - draggable: true - }); - - layer.add(darth); - stage.add(layer); - - darth.setFilter(Kinetic.Filters.OnlyBlue); - layer.draw(); - var dataUrl = layer.toDataURL(); - //console.log(dataUrl); - testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.'); + testDataUrl(dataUrl, 'colorizing filter', 'problem with colorizing filter.'); }; imageObj.src = '../assets/darth-vader.jpg'; }, @@ -1618,7 +1484,7 @@ Test.Modules.IMAGE = { layer.draw(); var dataUrl = layer.toDataURL(); //console.log(dataUrl); - testDataUrl(dataUrl, 'blur filter', 'problem with Blur filter.'); + testDataUrl(dataUrl, 'shift hue filter', 'problem with hue shifting filter.'); }; imageObj.src = '../assets/lion.png'; },