updated pixelate unit tests

src/filters/Pixelate.js

@@ -2,36 +2,26 @@
 
   /**
    * Pixelate Filter. Averages groups of pixels and redraws
-   *  them as larger "pixels".
-   *  Performs w*h pixel reads and w*h pixel writes.
+   *  them as larger pixels
    * @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
-   * @param {Number} [opt.pixelWidth], The width (in pixels) of the
-   *  new larger pixels, default is 8.
-   * @param {Number} [opt.pixelHeight], The height (in pixels) of the
-   *  new larger pixels, default is 8.
+   * @param {Object} imageData
    */
 
-  var Pixelate = function (src, dst, opt) {
+  Kinetic.Filters.Pixelate = function (imageData) {
 
-    var xBinSize = Math.ceil(opt.pixelWidth) || 8,
-      yBinSize = Math.ceil(opt.pixelHeight) || 8;
-
-    var xSize = src.width,
-      ySize = src.height,
-      srcPixels = src.data,
-      dstPixels = dst.data,
-      x, y, i;
-    var pixelsPerBin = xBinSize * yBinSize,
-      red, green, blue, alpha,
-      nBinsX = Math.ceil(xSize / xBinSize),
-      nBinsY = Math.ceil(ySize / yBinSize),
-      xBinStart, xBinEnd, yBinStart, yBinEnd,
-      xBin, yBin, pixelsInBin;
+    var pixelSize = Math.ceil(this.pixelSize()),
+        width = imageData.width,
+        height = imageData.height,
+        imageData = imageData.data,
+        x, y, i,
+        pixelsPerBin = pixelSize * pixelSize,
+        red, green, blue, alpha,
+        nBinsX = Math.ceil(width / pixelSize),
+        nBinsY = Math.ceil(height / pixelSize),
+        xBinStart, xBinEnd, yBinStart, yBinEnd,
+        xBin, yBin, pixelsInBin;
 
     for (xBin = 0; xBin < nBinsX; xBin += 1) {
       for (yBin = 0; yBin < nBinsY; yBin += 1) {
@@ -43,22 +33,22 @@
         alpha = 0;
 
         // Determine which pixels are included in this bin
-        xBinStart = xBin * xBinSize;
-        xBinEnd = xBinStart + xBinSize;
-        yBinStart = yBin * yBinSize;
-        yBinEnd = yBinStart + yBinSize;
+        xBinStart = xBin * pixelSize;
+        xBinEnd = xBinStart + pixelSize;
+        yBinStart = yBin * pixelSize;
+        yBinEnd = yBinStart + pixelSize;
 
         // Add all of the pixels to this bin!
         pixelsInBin = 0;
         for (x = xBinStart; x < xBinEnd; x += 1) {
-          if( x >= xSize ){ continue; }
+          if( x >= width ){ continue; }
           for (y = yBinStart; y < yBinEnd; y += 1) {
-            if( y >= ySize ){ continue; }
-            i = (xSize * y + x) * 4;
-            red += srcPixels[i + 0];
-            green += srcPixels[i + 1];
-            blue += srcPixels[i + 2];
-            alpha += srcPixels[i + 3];
+            if( y >= height ){ continue; }
+            i = (width * y + x) * 4;
+            red += imageData[i + 0];
+            green += imageData[i + 1];
+            blue += imageData[i + 2];
+            alpha += imageData[i + 3];
             pixelsInBin += 1;
           }
         }
@@ -71,14 +61,14 @@
 
         // Draw this bin
         for (x = xBinStart; x < xBinEnd; x += 1) {
-          if( x >= xSize ){ continue; }
+          if( x >= width ){ continue; }
           for (y = yBinStart; y < yBinEnd; y += 1) {
-            if( y >= ySize ){ continue; }
-            i = (xSize * y + x) * 4;
-            dstPixels[i + 0] = red;
-            dstPixels[i + 1] = green;
-            dstPixels[i + 2] = blue;
-            dstPixels[i + 3] = alpha;
+            if( y >= height ){ continue; }
+            i = (width * y + x) * 4;
+            imageData[i + 0] = red;
+            imageData[i + 1] = green;
+            imageData[i + 2] = blue;
+            imageData[i + 3] = alpha;
           }
         }
       }
@@ -86,48 +76,14 @@
     
   };
 
-  Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'pixelationSize', 8);
+  Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'pixelSize', 8);
 
-  Kinetic.Filters.Pixelate = function(src,dst,opt){
-    if( this === Kinetic.Filters ){
-      Pixelate(src, dst||src, opt );
-    }else{
-      Pixelate.call(this, src, dst||src, opt || {
-        pixelWidth: this.pixelationSize(),
-        pixelHeight: this.pixelationSize()
-      });
-    }
-  };
-
-    /**
-    * get filter pixel width.  Returns the width of a pixelated pixel. Must be
-    * an integer greater than 0. A value of 4 means a pixel in the filtered
-    * image is as wide as 4 pixels in the original.
-    * @name getPixelWidth
-    * @method
-    * @memberof Kinetic.Image.prototype
-    */
-
-    /**
-    * set filter pixel width.
-    * @name setPixelWidth
-    * @method
-    * @memberof Kinetic.Image.prototype
-    */
-
-    /**
-    * get filter pixel height.  Returns the height of a pixelated pixel. Must be
-    * an integer greater than 0. A value of 4 means a pixel in the filtered
-    * image is as tall as 4 pixels in the original.
-    * @name getPixelHeight
-    * @method
-    * @memberof Kinetic.Image.prototype
-    */
-
-    /**
-    * set filter pixel height.
-    * @name setPixelHeight
-    * @method
-    * @memberof Kinetic.Image.prototype
-    */
-})();
+  /**
+  * get/set pixel size
+  * @name pixelSize
+  * @method
+  * @memberof Kinetic.Node.prototype
+  * @param {Integer} pixelSize
+  * @returns {Integer}
+  */
+})();

test/runner.html

@@ -89,9 +89,9 @@
     <!--<script src="unit/filters/ConvolvePack-test.js"></script>-->
     <script src="unit/filters/Grayscale-test.js"></script>
     <script src="unit/filters/Enhance-test.js"></script>
-    <!--<script src="unit/filters/Polar-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>
+    <!--<script src="unit/filters/Noise-test.js"></script>
     <script src="unit/filters/Threshold-test.js"></script>
     <script src="unit/filters/Levels-test.js"></script>
     <script src="unit/filters/Flip-test.js"></script>

test/unit/filters/Pixelate-test.js

@@ -1,69 +1,4 @@
 suite('Pixelate', function () {
-    // ======================================================
-    test('pixelate', 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.Pixelate(imageData,scratchData,{pixelWidth:8,pixelHeight:16});
-          Kinetic.Filters.ColorStretch(scratchData,imageData,{});
-          this.getContext().putImageData(imageData,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('tween pixelate', function(done) {
@@ -73,34 +8,33 @@ suite('Pixelate', function () {
         imageObj.onload = function() {
             
             var layer = new Kinetic.Layer();
-            darth = new Kinetic.Image({
+            lion = new Kinetic.Image({
                 x: 10,
                 y: 10,
                 image: imageObj,
                 draggable: true
             });
 
-            layer.add(darth);
+            layer.add(lion);
             stage.add(layer);
 
-            darth.setFilter(Kinetic.Filters.Pixelate);
-            darth.setPixelWidth(16);
-            darth.setPixelHeight(16);
+            lion.cache();
+            lion.filters([Kinetic.Filters.Pixelate]);
+            lion.pixelSize(16);
             layer.draw();
 
             var tween = new Kinetic.Tween({
-              node: darth, 
+              node: lion, 
               duration: 3.0,
-              pixelWidth: 1,
-              pixelHeight: 1,
+              pixelSize: 1,
               easing: Kinetic.Easings.EaseInOut
             });
         
-            darth.on('mouseover', function() {
+            lion.on('mouseover', function() {
               tween.play();
             });
       
-            darth.on('mouseout', function() {
+            lion.on('mouseout', function() {
               tween.reverse();
             });
 

test/unit/filters/Polar-test.js

@@ -1,4 +1,4 @@
-suite('Polar Coordinates', function () {
+suite('Polar', function () {
     // ======================================================
     test('to polar', function (done) {
         var stage = addStage();