From 6ddefa05b5b54e5fcd1796cf2ea01765b8cd83e3 Mon Sep 17 00:00:00 2001 From: Eric Rowell Date: Fri, 3 Jan 2014 11:22:25 -0800 Subject: [PATCH] removed flip and mirror filters because the same effect can be achieved with transforms, cloning, caching, etc. --- Gruntfile.js | 2 - src/filters/Flip.js | 101 ------------ src/filters/Mirror.js | 92 ----------- test/runner.html | 5 +- test/unit/filters/Flip-test.js | 269 ------------------------------- test/unit/filters/Mirror-test.js | 238 --------------------------- 6 files changed, 2 insertions(+), 705 deletions(-) delete mode 100644 src/filters/Flip.js delete mode 100644 src/filters/Mirror.js delete mode 100644 test/unit/filters/Flip-test.js delete mode 100644 test/unit/filters/Mirror-test.js diff --git a/Gruntfile.js b/Gruntfile.js index 576fce31..25326730 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -18,9 +18,7 @@ module.exports = function(grunt) { 'src/filters/ColorPack.js', 'src/filters/ConvolvePack.js', 'src/filters/Enhance.js', - 'src/filters/Flip.js', 'src/filters/Levels.js', - 'src/filters/Mirror.js', 'src/filters/Noise.js', 'src/filters/Pixelate.js', 'src/filters/Polar.js', diff --git a/src/filters/Flip.js b/src/filters/Flip.js deleted file mode 100644 index 8ba6adf8..00000000 --- a/src/filters/Flip.js +++ /dev/null @@ -1,101 +0,0 @@ -(function () { - - /** - * FlipX Filter. Flips the image horizontally so that the - * left-most pixels become the right-most pixels and vice-versa. - * Performs w*h pixel reads, 0 computations, and w*h pixel writes. - * @function - * @author ippo615 - * @memberof Kinetic.Filters - * @param {ImageData} src, the source image data (what will be transformed) - * @param {ImageData} dst, the destination image data (where it will be saved) - * @param {Object} opt, There are no options for this filter - */ - - var FlipX = function (src, dst, opt) { - var srcPixels = src.data, - dstPixels = dst.data, - xSize = src.width, - xEnd = Math.ceil(0.5*xSize), - ySize = src.height, - i, m, x, y, r,g,b,a; - for (x = 0; x < xEnd; x += 1) { - for (y = 0; y < ySize; y += 1) { - i = (y * xSize + x) * 4; // original - m = (y * xSize + (xSize-1) - x) * 4; // flipped - // Instead of copying each row from the source to the destiation - // swap rows - this let's us achive a full flip in a single buffer - r = srcPixels[m + 0]; - g = srcPixels[m + 1]; - b = srcPixels[m + 2]; - a = srcPixels[m + 3]; - dstPixels[m + 0] = srcPixels[i + 0]; - dstPixels[m + 1] = srcPixels[i + 1]; - dstPixels[m + 2] = srcPixels[i + 2]; - dstPixels[m + 3] = srcPixels[i + 3]; - dstPixels[i + 0] = r; - dstPixels[i + 1] = g; - dstPixels[i + 2] = b; - dstPixels[i + 3] = a; - } - } - }; - - /** - * FlipY Filter. Flips the image vertically so that the top-most - * pixels become the bottom-most pixels and vice-versa. - * Performs w*h pixel reads, 0 computations, and w*h pixel writes. - * @function - * @author ippo615 - * @memberof Kinetic.Filters - * @param {ImageData} src, the source image data (what will be transformed) - * @param {ImageData} dst, the destination image data (where it will be saved) - * @param {Object} opt, There are no options for this filter - */ - - var FlipY = function (src, dst, opt) { - var srcPixels = src.data, - dstPixels = dst.data, - xSize = src.width, - ySize = src.height, - yEnd = Math.ceil(0.5*ySize), - i, m, x, y, r,g,b,a; - for (x = 0; x < xSize; x += 1) { - for (y = 0; y < yEnd; y += 1) { - i = (y * xSize + x) * 4; // original - m = ((ySize-1 - y) * xSize + x) * 4; // flipped - // Instead of copying each row from the source to the destiation - // swap rows - this let's us achive a full flip in a single buffer - r = srcPixels[m + 0]; - g = srcPixels[m + 1]; - b = srcPixels[m + 2]; - a = srcPixels[m + 3]; - dstPixels[m + 0] = srcPixels[i + 0]; - dstPixels[m + 1] = srcPixels[i + 1]; - dstPixels[m + 2] = srcPixels[i + 2]; - dstPixels[m + 3] = srcPixels[i + 3]; - dstPixels[i + 0] = r; - dstPixels[i + 1] = g; - dstPixels[i + 2] = b; - dstPixels[i + 3] = a; - } - } - }; - - Kinetic.Filters.FlipX = function(src,dst,opt){ - if( this === Kinetic.Filters ){ - FlipX(src, dst||src, opt ); - }else{ - FlipX.call(this, src, dst||src, opt); - } - }; - - Kinetic.Filters.FlipY = function(src,dst,opt){ - if( this === Kinetic.Filters ){ - FlipY(src, dst||src, opt ); - }else{ - FlipY.call(this, src, dst||src, opt); - } - }; - -})(); diff --git a/src/filters/Mirror.js b/src/filters/Mirror.js deleted file mode 100644 index 2de1fd88..00000000 --- a/src/filters/Mirror.js +++ /dev/null @@ -1,92 +0,0 @@ -(function () { - - /** - * MirrorX Filter. Copies and flips the left half of the image - * to the right side of the image - * Performs w*h pixel reads and w*h pixel writes. - * @function - * @author ippo615 - * @memberof Kinetic.Filters - * @param {ImageData} src, the source image data (what will be transformed) - * @param {ImageData} dst, the destination image data (where it will be saved) - * @param {Object} opt, There are no options for this filter - */ - - var MirrorX = function (src, dst, opt) { - var srcPixels = src.data, - dstPixels = dst.data, - xSize = src.width, - ySize = src.height, - xMid = Math.ceil(xSize / 2), - i, m, x, y; - for (x = 0; x <= xMid; x += 1) { - for (y = 0; y < ySize; y += 1) { - // copy the original - i = (y * xSize + x) * 4; - dstPixels[i + 0] = srcPixels[i + 0]; - dstPixels[i + 1] = srcPixels[i + 1]; - dstPixels[i + 2] = srcPixels[i + 2]; - dstPixels[i + 3] = srcPixels[i + 3]; - // copy the mirrored - m = (y * xSize + xSize - x) * 4; - dstPixels[m + 0] = srcPixels[i + 0]; - dstPixels[m + 1] = srcPixels[i + 1]; - dstPixels[m + 2] = srcPixels[i + 2]; - dstPixels[m + 3] = srcPixels[i + 3]; - } - } - }; - - /** - * MirrorY Filter. Copies and flips the top half of the image - * to the bottom of the image - * Performs w*h pixel reads and w*h pixel writes. - * @function - * @author ippo615 - * @memberof Kinetic.Filters - * @param {ImageData} src, the source image data (what will be transformed) - * @param {ImageData} dst, the destination image data (where it will be saved) - * @param {Object} opt, There are no options for this filter - */ - var MirrorY = function (src, dst, opt) { - var srcPixels = src.data, - dstPixels = dst.data, - xSize = src.width, - ySize = src.height, - yMid = Math.ceil(ySize / 2), - i, m, x, y; - for (x = 0; x < xSize; x += 1) { - for (y = 0; y <= yMid; y += 1) { - // copy the original - i = (y * xSize + x) * 4; - dstPixels[i + 0] = srcPixels[i + 0]; - dstPixels[i + 1] = srcPixels[i + 1]; - dstPixels[i + 2] = srcPixels[i + 2]; - dstPixels[i + 3] = srcPixels[i + 3]; - // copy the mirrored - m = ( (ySize-y) * xSize + x) * 4; - dstPixels[m + 0] = srcPixels[i + 0]; - dstPixels[m + 1] = srcPixels[i + 1]; - dstPixels[m + 2] = srcPixels[i + 2]; - dstPixels[m + 3] = srcPixels[i + 3]; - } - } - }; - - Kinetic.Filters.MirrorX = function(src,dst,opt){ - if( this === Kinetic.Filters ){ - MirrorX(src, dst||src, opt ); - }else{ - MirrorX.call(this, src, dst||src, opt); - } - }; - - Kinetic.Filters.MirrorY = function(src,dst,opt){ - if( this === Kinetic.Filters ){ - MirrorY(src, dst||src, opt ); - }else{ - MirrorY.call(this, src, dst||src, opt); - } - }; - -})(); diff --git a/test/runner.html b/test/runner.html index 20d664d9..80dd8718 100644 --- a/test/runner.html +++ b/test/runner.html @@ -94,9 +94,8 @@ - diff --git a/test/unit/filters/Flip-test.js b/test/unit/filters/Flip-test.js deleted file mode 100644 index d1750cbb..00000000 --- a/test/unit/filters/Flip-test.js +++ /dev/null @@ -1,269 +0,0 @@ -suite('Flip', function () { - // ====================================================== - test('both', function (done) { - var stage = addStage(); - - var shapesLayer = new Kinetic.Layer(); - - // The important line! - shapesLayer.on('draw', function () { - var imageData = this.getContext().getImageData(0,0,this.getCanvas().width,this.getCanvas().height); - var scratchData = this.getContext().createImageData(imageData); // only size copied - Kinetic.Filters.FlipX(imageData,scratchData,{}); - Kinetic.Filters.FlipY(scratchData,imageData,{}); - this.getContext().putImageData(imageData,0,0); - - // repeat for hit canvas - var hit = this.getHitCanvas(); - //console.info(hit); - imageData = hit.getContext().getImageData(0,0,hit.getWidth(),hit.getHeight()); - //imageData = hit.context.getImageData(0,0,hit.getWidth(),hit.getHeight()); - Kinetic.Filters.FlipX(imageData,scratchData,{}); - Kinetic.Filters.FlipY(scratchData,imageData,{}); - hit.getContext().putImageData(imageData,0,0); - - imageData = null; - scratchData = null; - }); - - var triangle = new Kinetic.RegularPolygon({ - x: stage.getWidth() / 4, - y: stage.getHeight() / 2, - sides: 3, - radius: 80, - fillRadialGradientStartPoint: 0, - fillRadialGradientStartRadius: 0, - fillRadialGradientEndPoint: 0, - fillRadialGradientEndRadius: 70, - fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'], - stroke: 'black', - strokeWidth: 4, - draggable: true - }); - - var circle = new Kinetic.Circle({ - x: 3 * stage.getWidth() / 4, - y: stage.getHeight() / 2, - radius: 70, - fill: '#880000', - stroke: 'black', - strokeWidth: 4, - draggable: true, - id: 'myCircle' - }); - - for( var i=0; i<10; i+=1 ){ - for( var j=0; j<10; j+=1 ){ - var rect = new Kinetic.Rect({ - x: i/10*stage.getWidth(), - y: j/10*stage.getHeight(), - width: stage.getWidth()/10, - height: stage.getHeight()/10, - fill: (i+j)%2===0?'#FF0000':'#FFFF00', - stroke: 'black', - strokeWidth: 4, - draggable: true - }); - shapesLayer.add(rect); - } - } - - shapesLayer.add(circle); - shapesLayer.add(triangle); - - stage.add(shapesLayer); - - done(); - }); - - // ====================================================== - test('horizontal', function (done) { - var stage = addStage(); - - var shapesLayer = new Kinetic.Layer(); - - // The important line! - shapesLayer.on('draw', function () { - var imageData = this.getContext().getImageData(0,0,this.getCanvas().width,this.getCanvas().height); - var scratchData = this.getContext().createImageData(imageData); // only size copied - Kinetic.Filters.FlipX(imageData,scratchData,{}); - this.getContext().putImageData(scratchData,0,0); - - // repeat for hit canvas - var hit = this.getHitCanvas(); - imageData = hit.getContext().getImageData(0,0,hit.getWidth(),hit.getHeight()); - //imageData = hit.context.getImageData(0,0,hit.getWidth(),hit.getHeight()); - Kinetic.Filters.FlipX(imageData,scratchData,{}); - hit.getContext().putImageData(scratchData,0,0); - - imageData = null; - scratchData = null; - }); - - var triangle = new Kinetic.RegularPolygon({ - x: stage.getWidth() / 4, - y: stage.getHeight() / 2, - sides: 3, - radius: 80, - fillRadialGradientStartPoint: 0, - fillRadialGradientStartRadius: 0, - fillRadialGradientEndPoint: 0, - fillRadialGradientEndRadius: 70, - fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'], - stroke: 'black', - strokeWidth: 4, - draggable: true - }); - - var circle = new Kinetic.Circle({ - x: 3 * stage.getWidth() / 4, - y: stage.getHeight() / 2, - radius: 70, - fill: '#880000', - stroke: 'black', - strokeWidth: 4, - draggable: true, - id: 'myCircle' - }); - - for( var i=0; i<10; i+=1 ){ - for( var j=0; j<10; j+=1 ){ - var rect = new Kinetic.Rect({ - x: i/10*stage.getWidth(), - y: j/10*stage.getHeight(), - width: stage.getWidth()/10, - height: stage.getHeight()/10, - fill: (i+j)%2===0?'#FF0000':'#FFFF00', - stroke: 'black', - strokeWidth: 4, - draggable: true - }); - shapesLayer.add(rect); - } - } - - shapesLayer.add(circle); - shapesLayer.add(triangle); - - stage.add(shapesLayer); - - done(); - }); - - // ====================================================== - test('vertical', function (done) { - var stage = addStage(); - - var shapesLayer = new Kinetic.Layer(); - - // The important line! - shapesLayer.on('draw', function () { - var imageData = this.getContext().getImageData(0,0,this.getCanvas().width,this.getCanvas().height); - var scratchData = this.getContext().createImageData(imageData); // only size copied - Kinetic.Filters.FlipY(imageData,scratchData,{}); - this.getContext().putImageData(scratchData,0,0); - - // repeat for hit canvas - var hit = this.getHitCanvas(); - imageData = hit.getContext().getImageData(0,0,hit.getWidth(),hit.getHeight()); - //imageData = hit.context.getImageData(0,0,hit.getWidth(),hit.getHeight()); - Kinetic.Filters.FlipY(imageData,scratchData,{}); - hit.getContext().putImageData(scratchData,0,0); - - imageData = null; - scratchData = null; - }); - - var triangle = new Kinetic.RegularPolygon({ - x: stage.getWidth() / 4, - y: stage.getHeight() / 2, - sides: 3, - radius: 80, - fillRadialGradientStartPoint: 0, - fillRadialGradientStartRadius: 0, - fillRadialGradientEndPoint: 0, - fillRadialGradientEndRadius: 70, - fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'], - stroke: 'black', - strokeWidth: 4, - draggable: true - }); - - var circle = new Kinetic.Circle({ - x: 3 * stage.getWidth() / 4, - y: stage.getHeight() / 2, - radius: 70, - fill: '#880000', - stroke: 'black', - strokeWidth: 4, - draggable: true, - id: 'myCircle' - }); - - for( var i=0; i<10; i+=1 ){ - for( var j=0; j<10; j+=1 ){ - var rect = new Kinetic.Rect({ - x: i/10*stage.getWidth(), - y: j/10*stage.getHeight(), - width: stage.getWidth()/10, - height: stage.getHeight()/10, - fill: (i+j)%2===0?'#FF0000':'#FFFF00', - stroke: 'black', - strokeWidth: 4, - draggable: true - }); - shapesLayer.add(rect); - } - } - - shapesLayer.add(circle); - shapesLayer.add(triangle); - - stage.add(shapesLayer); - - done(); - }); - - // ====================================================== - test('on image', function(done) { - var stage = addStage(); - - var imageObj = new Image(); - imageObj.onload = function() { - - var layer = new Kinetic.Layer(); - var xFlip = new Kinetic.Image({ - x: 160, - y: 10, - image: imageObj, - draggable: true, - filter: Kinetic.Filters.FlipX - }); - var yFlip = new Kinetic.Image({ - x: 320, - y: 10, - image: imageObj, - draggable: true, - filter: Kinetic.Filters.FlipY - }); - var noFlip = new Kinetic.Image({ - x: 0, - y: 10, - image: imageObj, - draggable: true - }); - - layer.add(noFlip); - layer.add(xFlip); - layer.add(yFlip); - stage.add(layer); - - layer.draw(); - - done(); - }; - imageObj.src = 'assets/lion.png'; - - }); - -}); diff --git a/test/unit/filters/Mirror-test.js b/test/unit/filters/Mirror-test.js deleted file mode 100644 index 6f556af5..00000000 --- a/test/unit/filters/Mirror-test.js +++ /dev/null @@ -1,238 +0,0 @@ -suite('Mirror', function () { - // ====================================================== - test('both', function (done) { - var stage = addStage(); - - var shapesLayer = new Kinetic.Layer(); - - // The important line! - shapesLayer.on('draw', function () { - var imageData = this.getContext().getImageData(0,0,this.getCanvas().width,this.getCanvas().height); - var scratchData = this.getContext().createImageData(imageData); // only size copied - Kinetic.Filters.MirrorX(imageData,scratchData,{}); - Kinetic.Filters.MirrorY(scratchData,imageData,{}); - this.getContext().putImageData(imageData,0,0); - //this.getContext().putImageData(scratchData,0,0); - }); - - var triangle = new Kinetic.RegularPolygon({ - x: stage.getWidth() / 4, - y: stage.getHeight() / 2, - sides: 3, - radius: 80, - fillRadialGradientStartPoint: 0, - fillRadialGradientStartRadius: 0, - fillRadialGradientEndPoint: 0, - fillRadialGradientEndRadius: 70, - fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'], - stroke: 'black', - strokeWidth: 4, - draggable: true - }); - - var circle = new Kinetic.Circle({ - x: 3 * stage.getWidth() / 4, - y: stage.getHeight() / 2, - radius: 70, - fill: '#880000', - stroke: 'black', - strokeWidth: 4, - draggable: true, - id: 'myCircle' - }); - - for( var i=0; i<10; i+=1 ){ - for( var j=0; j<10; j+=1 ){ - var rect = new Kinetic.Rect({ - x: i/10*stage.getWidth(), - y: j/10*stage.getHeight(), - width: stage.getWidth()/10, - height: stage.getHeight()/10, - fill: (i+j)%2===0?'#FF0000':'#FFFF00', - stroke: 'black', - strokeWidth: 4, - draggable: true - }); - shapesLayer.add(rect); - } - } - - shapesLayer.add(circle); - shapesLayer.add(triangle); - - stage.add(shapesLayer); - - done(); - }); - - // ====================================================== - test('horizontal', function (done) { - var stage = addStage(); - - var shapesLayer = new Kinetic.Layer(); - - // The important line! - shapesLayer.on('draw', function () { - var imageData = this.getContext().getImageData(0,0,this.getCanvas().width,this.getCanvas().height); - var scratchData = this.getContext().createImageData(imageData); // only size copied - Kinetic.Filters.MirrorX(imageData,scratchData,{}); - this.getContext().putImageData(scratchData,0,0); - }); - - var triangle = new Kinetic.RegularPolygon({ - x: stage.getWidth() / 4, - y: stage.getHeight() / 2, - sides: 3, - radius: 80, - fillRadialGradientStartPoint: 0, - fillRadialGradientStartRadius: 0, - fillRadialGradientEndPoint: 0, - fillRadialGradientEndRadius: 70, - fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'], - stroke: 'black', - strokeWidth: 4, - draggable: true - }); - - var circle = new Kinetic.Circle({ - x: 3 * stage.getWidth() / 4, - y: stage.getHeight() / 2, - radius: 70, - fill: '#880000', - stroke: 'black', - strokeWidth: 4, - draggable: true, - id: 'myCircle' - }); - - for( var i=0; i<10; i+=1 ){ - for( var j=0; j<10; j+=1 ){ - var rect = new Kinetic.Rect({ - x: i/10*stage.getWidth(), - y: j/10*stage.getHeight(), - width: stage.getWidth()/10, - height: stage.getHeight()/10, - fill: (i+j)%2===0?'#FF0000':'#FFFF00', - stroke: 'black', - strokeWidth: 4, - draggable: true - }); - shapesLayer.add(rect); - } - } - - shapesLayer.add(circle); - shapesLayer.add(triangle); - - stage.add(shapesLayer); - - done(); - }); - - // ====================================================== - test('vertical', function (done) { - var stage = addStage(); - - var shapesLayer = new Kinetic.Layer(); - - // The important line! - shapesLayer.on('draw', function () { - var imageData = this.getContext().getImageData(0,0,this.getCanvas().width,this.getCanvas().height); - var scratchData = this.getContext().createImageData(imageData); // only size copied - Kinetic.Filters.MirrorY(imageData,scratchData,{}); - this.getContext().putImageData(scratchData,0,0); - }); - - var triangle = new Kinetic.RegularPolygon({ - x: stage.getWidth() / 4, - y: stage.getHeight() / 2, - sides: 3, - radius: 80, - fillRadialGradientStartPoint: 0, - fillRadialGradientStartRadius: 0, - fillRadialGradientEndPoint: 0, - fillRadialGradientEndRadius: 70, - fillRadialGradientColorStops: [0, '#881111', 0.5, '#888811', 1, '#000088'], - stroke: 'black', - strokeWidth: 4, - draggable: true - }); - - var circle = new Kinetic.Circle({ - x: 3 * stage.getWidth() / 4, - y: stage.getHeight() / 2, - radius: 70, - fill: '#880000', - stroke: 'black', - strokeWidth: 4, - draggable: true, - id: 'myCircle' - }); - - for( var i=0; i<10; i+=1 ){ - for( var j=0; j<10; j+=1 ){ - var rect = new Kinetic.Rect({ - x: i/10*stage.getWidth(), - y: j/10*stage.getHeight(), - width: stage.getWidth()/10, - height: stage.getHeight()/10, - fill: (i+j)%2===0?'#FF0000':'#FFFF00', - stroke: 'black', - strokeWidth: 4, - draggable: true - }); - shapesLayer.add(rect); - } - } - - shapesLayer.add(circle); - shapesLayer.add(triangle); - - stage.add(shapesLayer); - - done(); - }); - - // ====================================================== - test('on image', function(done) { - var stage = addStage(); - - var imageObj = new Image(); - imageObj.onload = function() { - - var layer = new Kinetic.Layer(); - var xMirror = new Kinetic.Image({ - x: 160, - y: 10, - image: imageObj, - draggable: true, - filter: Kinetic.Filters.MirrorX - }); - var yMirror = new Kinetic.Image({ - x: 320, - y: 10, - image: imageObj, - draggable: true, - filter: Kinetic.Filters.MirrorY - }); - var noMirror = new Kinetic.Image({ - x: 0, - y: 10, - image: imageObj, - draggable: true - }); - - layer.add(noMirror); - layer.add(xMirror); - layer.add(yMirror); - stage.add(layer); - - layer.draw(); - - done(); - }; - imageObj.src = 'assets/lion.png'; - - }); - -});