updated Threshold filter and test

src/filters/Threshold.js

@@ -4,58 +4,31 @@
    * Threshold Filter. Pushes any value above the mid point to 
    *  the max and any value below the mid point to the min.
    *  This affects the alpha channel.
-   *  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
-   * @param {Number} [opt.thresholdLevel=128] the value which divides
-   *  the channel value into 2 groups (between 0 and 255)
+   * @param {Object} imageData
+   * @author ippo615
    */
 
-  var Threshold = function (src, dst, opt) {
-    var level = 128;
-    if( opt.hasOwnProperty ){
-      level = opt.thresholdLevel;
-    }
-    var srcPixels = src.data,
-      dstPixels = dst.data,
-      nPixels = srcPixels.length,
-      i;
-    for (i = 0; i < nPixels; i += 1) {
-      if (srcPixels[i] < level) {
-        dstPixels[i] = 0;
-      } else {
-        dstPixels[i] = 255;
-      }
+  Kinetic.Filters.Threshold = function (imageData) {
+    var level = this.threshold() * 255,
+        data = imageData.data,
+        len = data.length,
+        i;
+
+    for (i = 0; i < len; i += 1) {
+      data[i] = data[i] < level ? 0 : 255;
     }
   };
 
-  Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'threshold', 128);
+  Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'threshold', 0.5);
 
-  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
-    */
+  /**
+  * get/set threshold.  Value between 0 and 1
+  * @name threshold
+  * @method
+  * @memberof Kinetic.Image.prototype
+  * @param {Number} threshold
+  * @returns {Number}
+  */
 })();

test/runner.html

@@ -92,8 +92,8 @@
     <!--<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/Threshold-test.js"></script>
-    <script src="unit/filters/Levels-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>
     <script src="unit/filters/Mirror-test.js"></script>
     <script src="unit/filters/Sepia-test.js"></script>

test/unit/filters/Threshold-test.js

@@ -1,68 +1,4 @@
 suite('Threshold', function () {
-    // ======================================================
-    test('threshold', 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.Threshold(imageData,scratchData,{thresholdLevel:64});
-          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('image tween', function(done) {
         var stage = addStage();
@@ -81,14 +17,15 @@ suite('Threshold', function () {
             layer.add(darth);
             stage.add(layer);
 
-            darth.setFilter(Kinetic.Filters.Threshold);
-            darth.setThresholdLevel(255);
+            darth.cache();
+            darth.filters([Kinetic.Filters.Threshold]);
+            darth.threshold(1);
             layer.draw();
 
             var tween = new Kinetic.Tween({
               node: darth, 
               duration: 5.0,
-              thresholdLevel: 0,
+              threshold: 0,
               easing: Kinetic.Easings.EaseInOut
             });