Added desaturation filter

sources/ronin.html

@@ -35,6 +35,7 @@
     <script type="text/javascript" src="scripts/filters/invert.js"></script>
     <script type="text/javascript" src="scripts/filters/chromatic.js"></script>
     <script type="text/javascript" src="scripts/filters/balance.js"></script>
+    <script type="text/javascript" src="scripts/filters/saturation.js"></script>
 
     <script type="text/javascript" src="scripts/core/keyboard.js"></script>
     <script type="text/javascript" src="scripts/core/cursor.js"></script>

sources/scripts/filters/_saturation.js

@@ -1,15 +0,0 @@
-Filter.prototype.filter_saturation = function(pixels = this.pixels(),p = null)
-{
-  var d = pixels.data;
-  for (var i=0; i<d.length; i+=4) {
-    var r = d[i];
-    var g = d[i+1];
-    var b = d[i+2];
-    // CIE luminance for the RGB
-    // The human eye is bad at seeing red and blue, so we de-emphasize them.
-    var v = 0.2126*r + 0.7152*g + 0.0722*b;
-    d[i] = d[i+1] = d[i+2] = v
-  }
-	ronin.canvas.clear();
-	ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
-}

sources/scripts/filters/saturation.js

@@ -0,0 +1,53 @@
+function Filter_Saturation()
+{
+  Filter.call(this);
+
+  this.parameters = [Color];
+  
+  this.render = function(cmd)
+  {
+    if(cmd.color() && cmd.color().rgb()){
+      this.draw(ronin.surface.active_layer.context(),cmd.color().rgb());
+    }
+    else{
+      this.draw(ronin.surface.active_layer.context());
+    }
+  }
+
+  this.preview = function(cmd)
+  {
+    if(cmd.color() && cmd.color().rgb()){
+      this.draw(ronin.render.layer.context(),cmd.color().rgb());
+    }
+    else{
+      this.draw(ronin.render.layer.context());
+    }
+  }
+
+  this.draw = function(context = this.context(), color_rgb = new Color("#36ba0e").rgb())
+  {
+    var imageObj = new Image();
+    imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png');
+
+    var w = ronin.surface.size.width;
+    var h = ronin.surface.size.height;
+
+    var originalData = ronin.surface.active_layer.context().getImageData(0, 0, w*2, h*2);
+    var data = originalData.data;
+
+    var _r = (color_rgb.r / 255);
+    var _g = (color_rgb.g / 255);
+    var _b = (color_rgb.b / 255);
+
+    for(var i = 0; i < data.length; i += 4) {
+      var r = data[i];
+      var g = data[i+1];
+      var b = data[i+2];
+      var v = _r*r + _g*g + _b*b;
+      data[i] = data[i+1] = data[i+2] = v
+    }
+
+    ronin.render.layer.clear();
+    context.putImageData(originalData, 0, 0);
+  }
+}

sources/scripts/modules/help.js

@@ -106,6 +106,7 @@ function Help(rune)
 
     html += "\nFilters\n";
     html += pad("Darken",20)+"# 640x360 ; / ../assets/photo.jpg 640x 0,0 ; % balance #333333\n";
+    html += pad("Desaturate",20)+"# 640x360 ; / ../assets/photo.jpg 640x 0,0 ; % saturation #333333\n";
     
     html += "</div>";
     return html;

sources/scripts/modules/render.js

@@ -7,6 +7,7 @@ function Render(rune)
 
   this.collection["rotate"] = new Filter_Rotate();
   this.collection["balance"] = new Filter_Balance();
+  this.collection["saturation"] = new Filter_Saturation();
   this.collection["stencil"] = new Filter_Stencil();
   this.collection["invert"] = new Filter_Invert();
   this.collection["chromatic"] = new Filter_Chromatic();