Moved fiters to their own files.

README.md

@@ -65,11 +65,12 @@ $ !                               ; Clear temporary storage
 ##Filters*
 ```
 : saturation 0.5                  ; Set image saturation to 0.5
+: chromatic 10                    ; Shifts, from center, pixels red value by 10, green by 5, blue by 0
+: chromatic 8 0 16                ; Shifts, from center, pixels red value by 8, green by 0, blue by 16
+
 : balance red 0.9 0.4 0.7         ; Set color balance red to 0.9 0.4 0.7
 : balance white 0.7 0.7 0.7       ; Set color balance white to 0.7 0.7 0.7
 : sharpen 0.5                     ; Sharpen image to 50%
-: chromatic 10                    ; Shifts, from center, pixels red value by 10, green by 5, blue by 0
-: chromatic 8 0 16                ; Shifts, from center, pixels red value by 8, green by 0, blue by 16
 ```
 
 ##Translate*

index.html

@@ -12,7 +12,6 @@
     
     <script type="text/javascript" src="scripts/module.js"></script>
     <script type="text/javascript" src="scripts/modules/canvas.js"></script>
-    <script type="text/javascript" src="scripts/modules/filter.js"></script>
     <script type="text/javascript" src="scripts/modules/stroke.js"></script>
     <script type="text/javascript" src="scripts/modules/vector.js"></script>
     <script type="text/javascript" src="scripts/modules/overlay.js"></script>
@@ -21,6 +20,10 @@
     <script type="text/javascript" src="scripts/modules/file.js"></script>
     <script type="text/javascript" src="scripts/modules/hint.js"></script>
     
+    <script type="text/javascript" src="scripts/modules/filter.js"></script>
+    <script type="text/javascript" src="scripts/modules/filter.saturation.js"></script>
+    <script type="text/javascript" src="scripts/modules/filter.chromatic.js"></script>
+    
     <script type="text/javascript" src="scripts/keyboard.js"></script>
     <script type="text/javascript" src="scripts/command.js"></script>
     <script type="text/javascript" src="scripts/commander.js"></script>

scripts/modules/filter.chromatic.js

@@ -0,0 +1,38 @@
+Filter.prototype.filter_chromatic = function(pixels = this.pixels(),p = null)
+{
+	var s;
+	if(p.length === 0)
+		s = {r:2,g:2,b:2};
+	else if(p.length < 3)
+		s = {r:parseFloat(p[0]), g:parseFloat(p[0])*.5, b:0};
+	else
+		s = {r:parseFloat(p[0]), g:parseFloat(p[1]), b:parseFloat(p[2])};
+	var hw = pixels.width*.5;
+	var hh = pixels.height*.5;
+	var maxLength = Math.sqrt(hw*hw+hh*hh);
+	var output = new ImageData(pixels.width, pixels.height);
+  for (var i=0; i<pixels.width; i++) {
+			for(var j=0; j<pixels.height; j++){
+				var x = i-hw;
+				var y = j-hh;
+				var a = Math.atan2(y,x);
+				var d = Math.sqrt(x*x+y*y);
+				var f = (d-s.r*d/maxLength);
+				x = Math.cos(a)*f+hw;
+				y = Math.sin(a)*f+hh;
+				var r = this.get_color_bilinear(pixels, x, y);
+				f = (d-s.g*d/maxLength);
+				x = Math.cos(a)*f+hw;
+				y = Math.sin(a)*f+hh;
+				var g = this.get_color_bilinear(pixels, x, y);
+				f = (d-s.b*d/maxLength);
+				x = Math.cos(a)*f+hw;
+				y = Math.sin(a)*f+hh;
+				var b = this.get_color_bilinear(pixels, x, y);
+				var c = {r:r.r, g:g.g, b:b.b,a:Math.max(r.a, Math.max(g.a,b.a))};
+				this.set_color(output, c, i,j);
+			}
+  }
+	ronin.canvas.clear();
+	ronin.canvas.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height);
+}

scripts/modules/filter.js

@@ -2,7 +2,7 @@ function Filter(element)
 {
   Module.call(this);
   
-  this.parameters = [Text,Value];
+  this.parameters = [Any];
   
   this.active = function(cmd)
   {
@@ -25,63 +25,6 @@ function Filter(element)
   this.passive = function(cmd)
   {
   }
-  
-  // Filters
-  
-  this.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.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
-  }
-  
-  this.filter_chromatic = function(pixels = this.pixels(),p = null)
-  {
-  	var s;
-		if(p.length == 0)
-			s = {r:2,g:2,b:2};
-		else if(p.length < 3)
-			s = {r:parseFloat(p[0]), g:parseFloat(p[0])*.5, b:0};
-		else
-			s = {r:parseFloat(p[0]), g:parseFloat(p[1]), b:parseFloat(p[2])};
-		var hw = pixels.width*.5;
-		var hh = pixels.height*.5;
-		var maxLength = Math.sqrt(hw*hw+hh*hh);
-		var output = new ImageData(pixels.width, pixels.height);
-    for (var i=0; i<pixels.width; i++) {
-				for(var j=0; j<pixels.height; j++){
-					var x = i-hw;
-					var y = j-hh;
-					var a = Math.atan2(y,x);
-					var d = Math.sqrt(x*x+y*y);
-					var f = (d-s.r*d/maxLength);
-					x = Math.cos(a)*f+hw;
-					y = Math.sin(a)*f+hh;
-					var r = this.get_color_bilinear(pixels, x, y);
-					f = (d-s.g*d/maxLength);
-					x = Math.cos(a)*f+hw;
-					y = Math.sin(a)*f+hh;
-					var g = this.get_color_bilinear(pixels, x, y);
-					f = (d-s.b*d/maxLength);
-					x = Math.cos(a)*f+hw;
-					y = Math.sin(a)*f+hh;
-					var b = this.get_color_bilinear(pixels, x, y);
-					var c = {r:r.r, g:g.g, b:b.b,a:Math.max(r.a, Math.max(g.a,b.a))};
-					this.set_color(output, c, i,j);
-				}
-    }
-  	ronin.canvas.clear();
-  	ronin.canvas.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height);
-  }
 	
 	this.set_color = function(pixels, color, x, y){
 		x = Math.max(0,Math.min(x,pixels.width-1));

scripts/modules/filter.saturation.js

@@ -0,0 +1,15 @@
+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.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
+}