Made filters (Levels, Noise, Threshold) tweenable

src/filters/Levels.js

@@ -16,7 +16,7 @@
    */
 
   var Levels = function (src, dst, opt) {
-    var nLevels = opt.quantizationLevels || 2;
+    var nLevels = Math.round(opt.quantizationLevels || 2);
     var srcPixels = src.data,
       dstPixels = dst.data,
       nPixels = srcPixels.length,
@@ -27,5 +27,31 @@
     }
   };
 
-  Kinetic.Filters.Levels = Kinetic.Util._FilterWrapSingleBuffer(Levels);
+  Kinetic.Filters.Levels = function(src,dst,opt){
+    if( this === Kinetic.Filters ){
+      Levels(src, dst||src, opt );
+    }else{
+      Levels.call(this, src, dst||src, {
+        quantizationLevels: this.getQuantizationLevels()
+      });
+    }
+  };
+
+  Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'quantizationLevels', 4);
+
+    /**
+    * get quantization levels.  Returns the number of unique levels for each color
+    * channel. 2 is the minimum, 255 is the maximum. For Kinetic.Filters.Levels
+    * @name getQuantizationLevels
+    * @method
+    * @memberof Kinetic.Image.prototype
+    */
+
+    /**
+    * get quantization levels.  Sets the number of unique levels for each color
+    * channel. 2 is the minimum, 255 is the maximum. For Kinetic.Filters.Levels
+    * @name setQuantizationLevels
+    * @method
+    * @memberof Kinetic.Image.prototype
+    */
 })();

src/filters/Mirror.js

@@ -73,7 +73,20 @@
     }
   };
 
-  Kinetic.Filters.MirrorX = Kinetic.Util._FilterWrapSingleBuffer(MirrorX);
+  Kinetic.Filters.MirrorX = function(src,dst,opt){
-  Kinetic.Filters.MirrorY = Kinetic.Util._FilterWrapSingleBuffer(MirrorY);
+    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);
+    }
+  };
 
 })();

src/filters/Noise.js

@@ -11,12 +11,12 @@
    * @param {Object} opt
    * @param {Number} [opt.noiseAmount] The amount of noise to add. Between 0 and 255.
    *  Each channel of each pixel will change by a random amount
-   *  between +- amount/2. Default is 32.
+   *  between +- amount/2. Default is 0.
    * @param {Number} [opt.affectAlpha] 1 to add noise to the alpha channel.
    *  Default is 0.
    */
   var Noise = function (src, dst, opt) {
-    var amount = opt.noiseAmount || 32,
+    var amount = opt.noiseAmount || 0,
       affectAlpha = opt.affectAlpha || 0;
     var srcPixels = src.data,
       dstPixels = dst.data,
@@ -40,5 +40,30 @@
     }
   };
 
-  Kinetic.Filters.Noise = Kinetic.Util._FilterWrapSingleBuffer(Noise);
+  Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'noiseAmount', 32);
+
+  Kinetic.Filters.Noise = function(src,dst,opt){
+    if( this === Kinetic.Filters ){
+      Noise(src, dst||src, opt );
+    }else{
+      Noise.call(this, src, dst||src, opt || {
+        noiseAmount: this.getNoiseAmount()
+      });
+    }
+  };
+
+    /**
+    * get noise amount.  Returns the amount of noise. Between 0 and 255.
+    * @name getNoiseAmount
+    * @method
+    * @memberof Kinetic.Image.prototype
+    */
+
+    /**
+    * set noise amount.  Sets the amount of noise. Between 0 and 255.
+    * @name setNoiseAmount
+    * @method
+    * @memberof Kinetic.Image.prototype
+    */
+
 })();

src/filters/Threshold.js

@@ -16,7 +16,10 @@
    */
 
   var Threshold = function (src, dst, opt) {
-    var level = opt.thresholdLevel || 128;
+    var level = 128;
+    if( opt.hasOwnProperty ){
+      level = opt.thresholdLevel;
+    }
     var srcPixels = src.data,
       dstPixels = dst.data,
       nPixels = srcPixels.length,
@@ -30,5 +33,29 @@
     }
   };
 
-  Kinetic.Filters.Threshold = Kinetic.Util._FilterWrapSingleBuffer(Threshold);
+  Kinetic.Factory.addFilterGetterSetter(Kinetic.Image, 'thresholdLevel', 128);
+
+  Kinetic.Filters.Threshold = function(src,dst,opt){
+    if( this === Kinetic.Filters ){
+      Threshold(src, dst||src, opt );
+    }else{
+      Threshold.call(this, src, dst||src, opt || {
+        thresholdLevel: this.getThresholdLevel()
+      });
+    }
+  };
+
+    /**
+    * get threshold level.  Returns the level which divides the color channel (0-255).
+    * @name getThresholdLevel
+    * @method
+    * @memberof Kinetic.Image.prototype
+    */
+
+    /**
+    * set threshold level.  Sets the level which divides the color channel (0-255).
+    * @name setThresholdLevel
+    * @method
+    * @memberof Kinetic.Image.prototype
+    */
 })();

test/unit/filters/Levels-test.js

@@ -127,4 +127,47 @@ suite('Levels', function () {
         done();
     });
 
+    // ======================================================
+    test('on image tween', function(done) {
+        var stage = addStage();
+
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            
+            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.Levels);
+            darth.setQuantizationLevels(16);
+            layer.draw();
+
+            var tween = new Kinetic.Tween({
+              node: darth, 
+              duration: 5.0,
+              quantizationLevels: 2,
+              easing: Kinetic.Easings.EaseInOut
+            });
+        
+            darth.on('mouseover', function() {
+              tween.play();
+            });
+      
+            darth.on('mouseout', function() {
+              tween.reverse();
+            });
+
+            done();
+        };
+        imageObj.src = 'assets/darth-vader.jpg';
+
+    });
+
 });

test/unit/filters/Mirror-test.js

@@ -193,4 +193,46 @@ suite('Mirror', function () {
         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';
+
+    });
+
 });

test/unit/filters/Noise-test.js

@@ -63,4 +63,47 @@ suite('Noise', function () {
         done();
     });
 
+    // ======================================================
+    test('noise tween', function(done) {
+        var stage = addStage();
+
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            
+            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.Noise);
+            darth.setNoiseAmount(128);
+            layer.draw();
+
+            var tween = new Kinetic.Tween({
+              node: darth, 
+              duration: 5.0,
+              noiseAmount: 0,
+              easing: Kinetic.Easings.EaseInOut
+            });
+        
+            darth.on('mouseover', function() {
+              tween.play();
+            });
+      
+            darth.on('mouseout', function() {
+              tween.reverse();
+            });
+
+            done();
+        };
+        imageObj.src = 'assets/lion.png';
+
+    });
+
 });

test/unit/filters/Threshold-test.js

@@ -63,4 +63,47 @@ suite('Threshold', function () {
         done();
     });
 
+    // ======================================================
+    test('image tween', function(done) {
+        var stage = addStage();
+
+        var imageObj = new Image();
+        imageObj.onload = function() {
+            
+            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.Threshold);
+            darth.setThresholdLevel(255);
+            layer.draw();
+
+            var tween = new Kinetic.Tween({
+              node: darth, 
+              duration: 5.0,
+              thresholdLevel: 0,
+              easing: Kinetic.Easings.EaseInOut
+            });
+        
+            darth.on('mouseover', function() {
+              tween.play();
+            });
+      
+            darth.on('mouseout', function() {
+              tween.reverse();
+            });
+
+            done();
+        };
+        imageObj.src = 'assets/darth-vader.jpg';
+
+    });
+
 });