updated Levels filter and test

src/filters/Levels.js

@@ -4,54 +4,35 @@
    * Levels Filter. Adjusts the channels so that there are no more
    *  than n different values for that channel. This is also applied
    *  to 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 {Object} imageData
-   * @param {ImageData} dst, the destination image data (where it will be saved)
-   * @param {Object} opt
-   * @param {Number} [opt.quantizationLevels], the number of values allowed for each
-   *  channel. Between 2 and 255. Default is 2. 
    */
 
-  var Levels = function (src, dst, opt) {
+  Kinetic.Filters.Levels = function (imageData) {
-    var nLevels = Math.round(opt.quantizationLevels || 2);
+    // level must be between 1 and 255
-    var srcPixels = src.data,
+    var level = Math.round(this.level() * 254) + 1,
-      dstPixels = dst.data,
+        data = imageData.data,
-      nPixels = srcPixels.length,
+        len = data.length,
-      scale = (255 / nLevels),
+        scale = (255 / level),
-      i;
+        i;
-    for (i = 0; i < nPixels; i += 1) {
+
-      dstPixels[i] = Math.floor(srcPixels[i] / scale) * scale;
+    for (i = 0; i < len; i += 1) {
+      data[i] = Math.floor(data[i] / scale) * scale;
     }
   };
 
-  Kinetic.Filters.Levels = function(src,dst,opt){
+  Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'level', 0.5);
-    if( this === Kinetic.Filters ){
-      Levels(src, dst||src, opt );
-    }else{
-      Levels.call(this, src, dst||src, {
-        quantizationLevels: this.getQuantizationLevels()
-      });
-    }
-  };
-
-  Kinetic.Factory.addFilterGetterSetter(Kinetic.Node, 'quantizationLevels', 4);
 
     /**
-    * get quantization levels.  Returns the number of unique levels for each color
+    * get/set levels.  Must be a number between 0 and 1
-    * channel. 2 is the minimum, 255 is the maximum. For Kinetic.Filters.Levels
+    * @name level
-    * @name getQuantizationLevels
     * @method
-    * @memberof Kinetic.Image.prototype
+    * @memberof Kinetic.Node.prototype
+    * @param {Number} level between 0 and 1
+    * @returns {Number}
     */
 
-    /**
+
-    * 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
-    */
 })();

test/runner.html

@@ -93,8 +93,8 @@
     <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/Levels-test.js"></script>
-    <script src="unit/filters/Flip-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/Levels-test.js

@@ -1,131 +1,4 @@
 suite('Levels', function () {
-    // ======================================================
-    test('4 levels', 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.Levels(imageData,scratchData,{quantizationLevels:4});
-          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('8 levels', 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.Levels(imageData,scratchData,{quantizationLevels:8});
-          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 tween', function(done) {
@@ -145,15 +18,16 @@ suite('Levels', function () {
             layer.add(darth);
             stage.add(layer);
 
-            darth.setFilter(Kinetic.Filters.Levels);
+            darth.cache();
-            darth.setQuantizationLevels(16);
+            darth.filters([Kinetic.Filters.Levels]);
+            darth.level(0.2);
             layer.draw();
 
             var tween = new Kinetic.Tween({
               node: darth, 
-              duration: 5.0,
+              duration: 1.0,
-              quantizationLevels: 2,
+              level: 0,
-              easing: Kinetic.Easings.EaseInOut
+              easing: Kinetic.Easings.Linear
             });
         
             darth.on('mouseover', function() {