Added HSL filter.

src/filters/HSV.js

@@ -86,4 +86,41 @@
   * @param {Number} value 1 is no change, 0.5 halves the value, 2.0 doubles, etc..
   * @returns {Number}
   */
+
+  Kinetic.Factory.addGetterSetter(Kinetic.Node, 'luminance', 1, null, Kinetic.Factory.afterSetFilter);
+  /**
+  * get/set hsl luminance
+  * @name value
+  * @method
+  * @memberof Kinetic.Node.prototype
+  * @param {Number} value 1 is no change, 0.5 halves the value, 2.0 doubles, etc..
+  * @returns {Number}
+  */
+
+  /**
+   * HSL Filter. Adjusts the hue, saturation and luminance (or lightness)
+   * @function
+   * @memberof Kinetic.Filters
+   * @param {Object} imageData
+   * @author ippo615
+   */
+
+  Kinetic.Filters.HSL = function (imageData) {  
+    // Hue stays the same but saturation, value and brightness will be
+    // adjusted to match common photo-editing software's extreme values
+    var oldSaturation = this.saturation(),
+        oldBrightness = this.brightness(),
+        oldValue = this.value();
+
+    this.saturation(oldSaturation*oldSaturation);
+    this.brightness(0.5*(this.luminance()-1));
+    this.value(1.0);
+
+    Kinetic.Filters.HSV.call(this,imageData);
+    Kinetic.Filters.Brighten.call(this,imageData);
+
+    this.saturation(oldSaturation);
+    this.brightness(oldBrightness);
+    this.value(oldValue);
+  };
 })();

test/unit/filters/HSV-test.js

@@ -177,4 +177,92 @@ suite('HSV', function() {
         imageObj.src = 'assets/lion.png';
 
     });
+
+    // ======================================================
+    test('HSL luminance 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.cache();
+            darth.filters([Kinetic.Filters.HSL]);
+            darth.luminance(2.0);
+            layer.draw();
+
+            var tween = new Kinetic.Tween({
+              node: darth, 
+              duration: 1.0,
+              luminance: 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('HSL 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.cache();
+            darth.filters([Kinetic.Filters.HSL]);
+            darth.saturation(2.0);
+            layer.draw();
+
+            var tween = new Kinetic.Tween({
+              node: darth, 
+              duration: 1.0,
+              saturation: 0.001,
+              easing: Kinetic.Easings.EaseInOut
+            });
+        
+            darth.on('mouseover', function() {
+              tween.play();
+            });
+      
+            darth.on('mouseout', function() {
+              tween.reverse();
+            });
+
+            done();
+        };
+        imageObj.src = 'assets/lion.png';
+
+    });
 });