Added tweening to HSV filter

test/unit/filters/ColorPack-test.js

@@ -108,14 +108,100 @@ suite('Color Pack', function() {
             layer.add(darth);
             stage.add(layer);
 
-            darth.setFilter(Kinetic.Filters.ShiftHue);
-            darth.setFilterHueShiftDeg(360);
+            darth.setFilter(Kinetic.Filters.HSV);
+            darth.setFilterHue(360);
             layer.draw();
 
             var tween = new Kinetic.Tween({
               node: darth, 
               duration: 5.0,
-              filterHueShiftDeg: 0,
+              filterHue: 0,
+              easing: Kinetic.Easings.EaseInOut
+            });
+        
+            darth.on('mouseover', function() {
+              tween.play();
+            });
+      
+            darth.on('mouseout', function() {
+              tween.reverse();
+            });
+
+            done();
+        };
+        imageObj.src = 'assets/lion.png';
+
+    });
+
+    // ======================================================
+    test('saturation tween transparancy', 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.HSV);
+            darth.setFilterSaturation(2.0);
+            layer.draw();
+
+            var tween = new Kinetic.Tween({
+              node: darth, 
+              duration: 5.0,
+              filterSaturation: 0.001,
+              easing: Kinetic.Easings.EaseInOut
+            });
+        
+            darth.on('mouseover', function() {
+              tween.play();
+            });
+      
+            darth.on('mouseout', function() {
+              tween.reverse();
+            });
+
+            done();
+        };
+        imageObj.src = 'assets/lion.png';
+
+    });
+
+    // ======================================================
+    test('value tween transparancy', 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.HSV);
+            darth.setFilterValue(2.0);
+            layer.draw();
+
+            var tween = new Kinetic.Tween({
+              node: darth, 
+              duration: 5.0,
+              filterValue: 0.001,
               easing: Kinetic.Easings.EaseInOut
             });
         
@@ -279,4 +365,77 @@ suite('Color Pack', function() {
         done();
     });
 
+    // ======================================================
+    test('value gradient', function (done) {
+        var stage = addStage();
+
+        var shapesLayer = new Kinetic.Layer();
+
+        // The important line!
+        shapesLayer.on('draw', function () {
+          var src, dst, i, w=40;
+          var ctx = this.getContext();
+          var ctxWidth = this.getCanvas().width;
+          var ctxHeight = this.getCanvas().height;
+          var xSize = Math.floor(ctxWidth/w);
+          var ySize = Math.floor(ctxHeight);
+          for( i=0; i<w; i+=1 ){
+              src = ctx.getImageData(i*xSize,0,xSize,ySize);
+              dst = ctx.createImageData(src);
+              Kinetic.Filters.HSV(src,dst,{value:2*(0.001+i)/w});
+              ctx.putImageData(dst,i*xSize,0);
+              //ctx.strokeRect(i*xSize,0,xSize,ySize);
+          }
+        });
+
+        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();
+    });
+
 });