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

@@ -105,8 +105,9 @@ function Help(rune)
     html += pad("Multiple Circles",20)+"+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -25, 0 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -15, 0 a 15,15 0 1,0 30,0 a 15,15 0 1,0 -30,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;+ M 64, 64 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0\n";
 
     html += "\nFilters\n";
-    html += pad("Darken",20)+"# 640x360 ; / ../assets/photo.jpg 640x 0,0 ; %balance #333333\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();