fixed grayscale filter and updated tests

src/filters/Blur.js

@@ -329,32 +329,12 @@
      * @memberof Kinetic.Filters
      * @param {Object} imageData
      */
+    Kinetic.Filters.Blur = function(imageData) {
+        var radius = this.blurRadius() | 0;
 
-    var Blur = function(src,dst,opt){
+        if (radius > 0) {
-        var radius = opt.filterRadius | 0;
+            filterGaussBlurRGBA(imageData, radius);
-
-        // If a different desntination image data is supplied
-        // copy the source and perform the blur on the destination
-        var i;
-        if( dst !== src ){
-            i = src.data.length;
-            while( i-- ){
-                dst.data[i] = src.data[i];
-            }
         }
-
-        if( radius > 0 ){
-            filterGaussBlurRGBA(dst,radius);
-        }
-    };
-    Kinetic.Filters.Blur = function(src,dst,opt){
-      if( this === Kinetic.Filters ){
-        Blur(src, dst||src, opt );
-      }else{
-        Blur.call(this, src, dst||src, opt || {
-          filterRadius: this.blurRadius()
-        });
-      }
     };
 
     Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'blurRadius', 0);

src/filters/Brighten.js

@@ -6,9 +6,12 @@
      * @param {Object} imageData
      */
     Kinetic.Filters.Brighten = function(imageData) {
-        var brightness = this.brightness() * 255;
+        var brightness = this.brightness() * 255,
-        var data = imageData.data;
+            data = imageData.data,
-        for(var i = 0; i < data.length; i += 4) {
+            len = data.length,
+            i;
+
+        for(i = 0; i < len; i += 4) {
             // red
             data[i] += brightness;
             // green

src/filters/ColorPack.js

@@ -79,9 +79,9 @@
       HSV(src, dst||src, opt );
     }else{
       HSV.call(this, src, dst||src, opt || {
-        hue: this.getFilterHue(),
+        hue: this.hue(),
-        saturation: this.getFilterSaturation(),
+        saturation: this.saturation(),
-        value: this.getFilterValue()
+        value: this.value()
       });
     }
   };
@@ -92,7 +92,7 @@
       HSV(src, dst||src, opt );
     }else{
       HSV.call(this, src, dst||src, opt || {
-        hue: this.getFilterHueShiftDeg()
+        hue: this.hueShiftDeg()
       });
     }
   };
@@ -179,12 +179,12 @@
       Colorize(src, dst||src, opt );
     }else{
       Colorize.call(this, src, dst||src, opt || {
-        colorizeColor: this.getFilterColorizeColor()
+        colorizeColor: this.color()
       });
     }
   };
 
-  Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'colorizeColor', [255,0,0] );
+  Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'color', [255,0,0] );
   /**
    * Gets the colorizing color.
    * @name getFilterColorizeColor

src/filters/Grayscale.js

@@ -1,36 +1,23 @@
-(function () {
+(function() {
-
+    /**
-  /**
+     * Grayscale Filter
-   * Grayscale Filter. Converts the image to shades of gray.
+     * @function
-   *  Performs w*h pixel reads and w*h pixel writes.
+     * @memberof Kinetic.Filters
-   * @function
+     * @param {Object} imageData
-   * @author ippo615
+     */
-   * @memberof Kinetic.Filters
+    Kinetic.Filters.Grayscale = function(imageData) {
-   * @param {ImageData} src, the source image data (what will be transformed)
+        var data = imageData.data,
-   * @param {ImageData} dst, the destination image data (where it will be saved)
+            len = data.length,
-   * @param {Object} opt, There are no options for this filter
+            i, brightness;
-   */
-
-  var Grayscale = function (src, dst, opt) {
-    var srcPixels = src.data,
-      dstPixels = dst.data,
-      nPixels = srcPixels.length,
-      i, brightness;
-    for (i = 0; i < nPixels; i += 4) {
-      brightness = 0.34 * srcPixels[i] + 0.5 * srcPixels[i + 1] + 0.16 * srcPixels[i + 2];
-      dstPixels[i] = brightness; // r
-      dstPixels[i + 1] = brightness; // g
-      dstPixels[i + 2] = brightness; // b
-      dstPixels[i + 3] = srcPixels[i + 3]; // alpha
-    }
-  };
-
-  Kinetic.Filters.Grayscale = function(src,dst,opt){
-    if( this === Kinetic.Filters ){
-      Grayscale(src, dst||src, opt );
-    }else{
-      Grayscale.call(this, src, dst||src, {} );
-    }
-  };
 
+        for(i = 0; i < len; i += 4) {
+            brightness = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
+            // red
+            data[i] = brightness;
+            // green
+            data[i + 1] = brightness;
+            // blue
+            data[i + 2] = brightness;
+        }
+    };
 })();

src/filters/Invert.js

@@ -1,36 +1,22 @@
-(function () {
+(function() {
+    /**
+     * Invert Filter
+     * @function
+     * @memberof Kinetic.Filters
+     * @param {Object} imageData
+     */
+    Kinetic.Filters.Invert = function(imageData) {
+        var data = imageData.data,
+            len = data.length,
+            i;
 
-  /**
+        for(i = 0; i < len; i += 4) {
-   * Invert Filter. Moves all color channels toward the opposite extreme
+            // red
-   *  ie 0 becomes 255, 10 becomes 245 etc... It does not alter the 
+            data[i] = 255 - data[i];
-   *  alpha channel.
+            // green
-   *  Performs w*h pixel reads and w*h pixel writes.
+            data[i + 1] = 255 - data[i + 1];
-   * @function
+            // blue
-   * @author ippo615
+            data[i + 2] = 255 - data[i + 2];
-   * @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 Invert = function (src, dst, opt) {
-    var srcPixels = src.data,
-      dstPixels = dst.data,
-      nPixels = srcPixels.length,
-      i;
-    for (i = 0; i < nPixels; i += 4) {
-      dstPixels[i+0] = 255 - srcPixels[i+0]; // r
-      dstPixels[i+1] = 255 - srcPixels[i+1]; // g
-      dstPixels[i+2] = 255 - srcPixels[i+2]; // b
-      dstPixels[i+3] =       srcPixels[i+3]; // copy alpha
-    }
-  };
-
-  Kinetic.Filters.Invert = function(src,dst,opt){
-    if( this === Kinetic.Filters ){
-      Invert(src, dst||src, opt );
-    }else{
-      Invert.call(this, src, dst||src, {} );
-    }
-  };
 })();

test/runner.html

@@ -81,14 +81,14 @@
     <!-- filters -->
     <script src="unit/filters/Blur-test.js"></script>
     <script src="unit/filters/Brighten-test.js"></script>
-
+    <!--<script src="unit/filters/ColorPack-test.js"></script>-->
-    <!--
+    
-    <script src="unit/filters/ColorPack-test.js"></script>
     <script src="unit/filters/Invert-test.js"></script>
-    <script src="unit/filters/Mask-test.js"></script>
+
-    <script src="unit/filters/ConvolvePack-test.js"></script>
+    <!--<script src="unit/filters/Mask-test.js"></script>
+    <script src="unit/filters/ConvolvePack-test.js"></script>-->
     <script src="unit/filters/Grayscale-test.js"></script>
-    <script src="unit/filters/ColorStretch-test.js"></script>
+    <!--<script src="unit/filters/ColorStretch-test.js"></script>
     <script src="unit/filters/Polar-test.js"></script>
     <script src="unit/filters/Pixelate-test.js"></script>
     <script src="unit/filters/Noise-test.js"></script>

test/unit/filters/Blur-test.js

@@ -277,66 +277,4 @@ suite('Blur', function() {
         };
         imageObj.src = 'assets/lion.png';
     });
-
-    // ======================================================
-    // test('half layer gaussian blur', 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/2,this.getCanvas().height);
-    //       var scratchData = this.getContext().createImageData(imageData); // only size copied
-    //       Kinetic.Filters.Blur(imageData,scratchData,{filterRadius:24});
-    //       this.getContext().putImageData(scratchData,0,0);
-    //     });
-
-    //     var triangle = new Kinetic.RegularPolygon({
-    //       x: stage.getWidth() / 4,
-    //       y: stage.getHeight() / 2,
-    //       sides: 3,
-    //       radius: 80,
-    //       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/unit/filters/ColorPack-test.js

@@ -1,6 +1,6 @@
-suite('Color Pack', function() {
+suite('ColorPack', function() {
     // ======================================================
-    test('colorize basic', function(done) {
+    test.only('colorize basic', function(done) {
         var stage = addStage();
 
         var imageObj = new Image();
@@ -17,8 +17,9 @@ suite('Color Pack', function() {
             layer.add(darth);
             stage.add(layer);
 
-            darth.setFilter(Kinetic.Filters.Colorize);
+            darth.cache();
-            darth.setFilterColorizeColor([255,0,128]);
+            darth.filters([Kinetic.Filters.Colorize]);
+            darth.color([255,0,128]);
             layer.draw();
 
             // Assert fails even though '[255,0,128] = [255,0,128]'
@@ -49,8 +50,9 @@ suite('Color Pack', function() {
             layer.add(darth);
             stage.add(layer);
 
-            darth.setFilter(Kinetic.Filters.Colorize);
+            darth.cache();
-            darth.setFilterColorizeColor([0,255,0]);
+            darth.filters([Kinetic.Filters.Colorize]);
+            darth.color([0,255,0]);
             layer.draw();
 
             // assert.equal(darth.getFilterColorizeColor(), [0,255,0]);
@@ -94,8 +96,9 @@ suite('Color Pack', function() {
                 });
                 layer.add(darth);
 
-                darth.setFilter(Kinetic.Filters.Colorize);
+                darth.cache();
-                darth.setFilterColorizeColor(color);
+                darth.filters([Kinetic.Filters.Colorize]);
+                darth.color(color);
 
                 nAdded += 1;
                 if( nAdded >= l ){
@@ -111,7 +114,7 @@ suite('Color Pack', function() {
 
 
     // ======================================================
-    test('hue shift tween transparancy', function(done) {
+    test.only('hue shift tween transparancy', function(done) {
         var stage = addStage();
 
         var imageObj = new Image();
@@ -128,14 +131,15 @@ suite('Color Pack', function() {
             layer.add(darth);
             stage.add(layer);
 
-            darth.setFilter(Kinetic.Filters.HSV);
+            darth.cache();
-            darth.setFilterHue(360);
+            darth.filters([Kinetic.Filters.HSV]);
+            darth.hue(360);
             layer.draw();
 
             var tween = new Kinetic.Tween({
               node: darth, 
               duration: 5.0,
-              filterHue: 0,
+              hue: 0,
               easing: Kinetic.Easings.EaseInOut
             });
         

test/unit/filters/Grayscale-test.js

@@ -1,4 +1,4 @@
-suite('Filter Grayscale', function() {
+suite('Grayscale', function() {
     // ======================================================
     test('basic', function(done) {
         var stage = addStage();
@@ -17,7 +17,8 @@ suite('Filter Grayscale', function() {
             layer.add(darth);
             stage.add(layer);
 
-            darth.setFilter(Kinetic.Filters.Grayscale);
+            darth.cache();
+            darth.filters([Kinetic.Filters.Grayscale]);
             layer.draw();
 
             done();
@@ -39,13 +40,16 @@ suite('Filter Grayscale', function() {
                 y: 10,
                 image: imageObj,
                 crop: {x:128, y:48, width:256, height:128},
-                filter: Kinetic.Filters.Grayscale,
                 draggable: true
             });
 
             layer.add(darth);
             stage.add(layer);
 
+            darth.cache();
+            darth.filters([Kinetic.Filters.Grayscale]);
+            layer.draw();
+
             done();
 
         };
@@ -70,7 +74,8 @@ suite('Filter Grayscale', function() {
             layer.add(darth);
             stage.add(layer);
 
-            darth.setFilter(Kinetic.Filters.Grayscale);
+            darth.cache();
+            darth.filters([Kinetic.Filters.Grayscale]);
             layer.draw();
 
             done();
@@ -79,68 +84,4 @@ suite('Filter Grayscale', function() {
 
     });
 
-    // ======================================================
-    test('half layer', 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/2,this.getCanvas().height);
-          var scratchData = this.getContext().createImageData(imageData); // only size copied
-          Kinetic.Filters.Grayscale(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/unit/filters/Invert-test.js

@@ -17,7 +17,8 @@ suite('Invert', function() {
             layer.add(darth);
             stage.add(layer);
 
-            darth.setFilter(Kinetic.Filters.Invert);
+            darth.cache();
+            darth.filters([Kinetic.Filters.Invert]);
             layer.draw();
 
             done();
@@ -45,7 +46,8 @@ suite('Invert', function() {
             layer.add(darth);
             stage.add(layer);
 
-            darth.setFilter(Kinetic.Filters.Invert);
+            darth.cache();
+            darth.filters([Kinetic.Filters.Invert]);
             layer.draw();
 
             done();
@@ -72,7 +74,8 @@ suite('Invert', function() {
             layer.add(darth);
             stage.add(layer);
 
-            darth.setFilter(Kinetic.Filters.Invert);
+            darth.cache();
+            darth.filters([Kinetic.Filters.Invert]);
             layer.draw();
 
             done();
@@ -80,69 +83,4 @@ suite('Invert', function() {
         imageObj.src = 'assets/lion.png';
 
     });
-
-    // ======================================================
-    test('half layer', 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/2,this.getCanvas().height);
-          var scratchData = this.getContext().createImageData(imageData); // only size copied
-          Kinetic.Filters.Invert(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();
-    });
-
 });