Added icons

sources/scripts/filters/_balance.js

@@ -0,0 +1,46 @@
+Filter.prototype.filter_balance = function(pixels = this.pixels(),p = null)
+{
+  // / media/filter.color.jpg
+  // : balance 0.5 2.4 1.2
+  
+  p[0] = parseFloat(p[0]);
+  p[1] = p[1] ? parseFloat(p[1]) : parseFloat(p[0]);
+  p[2] = p[2] ? parseFloat(p[2]) : parseFloat(p[0]);
+  
+  var data = pixels.data;
+  
+  // Multiply
+  if(p[0] % 1 !== 0 && p[1] % 1 !== 0 && p[2] % 1 !== 0){
+    console.log("Multi");
+    for (var i = 0; i < data.length; i += 4) {
+      data[i]     = data[i] * p[0];                     // red
+      data[i + 1] = data[i + 1] * p[1]; // green
+      data[i + 2] = data[i + 2] * p[2]; // blue
+      
+      // Clamp
+      data[i] = data[i] < 255 ? data[i] : 255;
+      data[i + 1] = data[i + 1] < 255 ? data[i + 1] : 255;
+      data[i + 2] = data[i + 2] < 255 ? data[i + 2] : 255;
+    }
+  }
+  // Add
+  else{
+    p[0] = parseInt(p[0]);
+    p[1] = p[1] ? parseInt(p[1]) : parseInt(p[0]);
+    p[2] = p[2] ? parseInt(p[2]) : parseInt(p[0]);
+    
+    for (i = 0; i < data.length; i += 4) {
+      data[i]     = data[i] + p[0];                     // red
+      data[i + 1] = data[i + 1] + p[1]; // green
+      data[i + 2] = data[i + 2] + p[2]; // blue
+      
+      // Clamp
+      data[i] = data[i] < 255 ? data[i] : 255;
+      data[i + 1] = data[i + 1] < 255 ? data[i + 1] : 255;
+      data[i + 2] = data[i + 2] < 255 ? data[i + 2] : 255;
+    }
+  }
+  
+	ronin.canvas.clear();
+	ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
+}

sources/scripts/filters/_offset.js

@@ -0,0 +1,19 @@
+Filter.prototype.filter_offset = function(pixels = this.pixels(),p = null)
+{
+  var v = 255; // defaults to 255 if no parameter specified
+  if (p.length > 0 && p[0]) {
+      v = parseInt(p[0]);
+      // permissible range is 0 <= v <= 255
+      if (v > 255) { v = 255;} 
+      if (v < 0) { v = 0;}
+  }
+  var d = pixels.data;
+
+  for (var i=0; i<d.length; i+=4) {
+      for (var j=0; j<3; j++) {
+          d[i+j] = v - d[i+j];
+      }
+  }
+	ronin.canvas.clear();
+	ronin.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
+}

sources/scripts/filters/_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.surface.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
+}

sources/scripts/filters/chromatic.js

@@ -0,0 +1,68 @@
+function Filter_Chromatic()
+{
+  Filter.call(this);
+  
+  this.parameters = [Value, Position];
+  //value is maximum distance pixels are shifted
+  //position is where the pixels are shifted from, defaults to half the image
+
+  this.render = function(cmd)
+  {
+    var position = cmd.position() ? cmd.position() : new Position(ronin.surface.size.width,ronin.surface.size.height);
+    var value = cmd.value() ? cmd.value().float : 5;
+
+    ronin.overlay.clear();
+    this.draw(this.context(),value,position);
+    ronin.overlay.clear();
+  }
+
+  this.preview = function(cmd)
+  {
+    if(cmd.position()){
+      ronin.overlay.clear();
+      ronin.overlay.draw_pointer(cmd.position());
+    }
+  }
+
+  this.draw = function(context = this.context(), value, position)
+  {
+    var w = ronin.surface.size.width;
+    var h = ronin.surface.size.height;
+    
+    //no longer letting you set how far each chanel is shifted, not sure how to receive extra data any more
+		var s = {r:value,g:value*.5,b:0};
+			
+    var context = ronin.surface.active_layer.context();
+    
+    //now need two imagedatas to sample off of, for some reason I cant just dump the new pixels into an empty array :/
+    var originalData = context.getImageData(0, 0, w*2, h*2);
+    var imageData = context.getImageData(0, 0, w*2, h*2);
+    
+		var maxLength = Math.sqrt(w*w+h*h);    
+    for (var i=0; i<w*2; i++) {
+	 		for(var j=0; j<h*2; j++){
+	 			var x = i-position.x;
+				var y = j-position.y;
+	 			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+position.x;
+	 			y = Math.sin(a)*f+position.y;
+	 			var r = this.get_color_bilinear(originalData, x, y);
+	 			f = (d-s.g*d/maxLength);
+	 			x = Math.cos(a)*f+position.x;
+	 			y = Math.sin(a)*f+position.y;
+	 			var g = this.get_color_bilinear(originalData, x, y);
+	 			f = (d-s.b*d/maxLength);
+	 			x = Math.cos(a)*f+position.x;
+	 			y = Math.sin(a)*f+position.y;
+	 			var b = this.get_color_bilinear(originalData, 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(imageData, c, i,j);
+	 		}
+    }
+    ronin.surface.active_layer.clear();
+    context.putImageData(imageData, 0, 0);
+  }
+
+}

sources/scripts/filters/filter.js

@@ -0,0 +1,60 @@
+function Filter()
+{
+  this.name = "Unknown";
+  this.parameters = [];
+
+  this.render = function(cmd)
+  {
+    console.log("render: Nothing here.");
+  }
+
+  this.preview = function(cmd)
+  {
+    console.log("render: Nothing here.");
+  }
+
+  this.set_color = function(pixels, color, x, y)
+  {
+    x = Math.max(0,Math.min(x,pixels.width-1));
+    y = Math.max(0,Math.min(y,pixels.height-1));
+    var index = (x+y*pixels.width)*4;
+    pixels.data[index] = color.r;
+    pixels.data[index+1] = color.g;
+    pixels.data[index+2] = color.b;
+    pixels.data[index+3] = color.a;
+  }
+  
+  this.get_color = function(pixels,x,y)
+  {
+    x = Math.max(0,Math.min(x,pixels.width-1));
+    y = Math.max(0,Math.min(y,pixels.height-1));
+    var index = (x+y*pixels.width)*4;
+    return {r:pixels.data[index], g:pixels.data[index+1], b:pixels.data[index+2], a:pixels.data[index+3]};
+  }
+  
+  this.get_color_bilinear = function(pixels, x, y)
+  {
+    var c1 = this.get_color(pixels, Math.floor(x),Math.floor(y));
+    var c2 = this.get_color(pixels, Math.ceil(x),Math.floor(y));
+    var c3 = this.get_color(pixels, Math.floor(x),Math.ceil(y));
+    var c4 = this.get_color(pixels, Math.ceil(x),Math.ceil(y));
+    return this.lerp_color(this.lerp_color(c1,c2, x%1),this.lerp_color(c3,c4, x%1), y%1);
+  }
+  
+  this.lerp_color = function(c1, c2, t)
+  {
+    return {r:c1.r+t*(c2.r-c1.r), g:c1.g+t*(c2.g-c1.g), b:c1.b+t*(c2.b-c1.b), a:c1.a+t*(c2.a-c1.a)};
+  }
+  
+  //
+
+  this.context = function()
+  {
+    return ronin.surface.active_layer.context();
+  }
+  
+  this.pixels = function()
+  {
+    return ronin.surface.active_layer.context().getImageData(0,0,ronin.surface.size.width * 2,ronin.surface.size.height * 2);
+  }
+}

sources/scripts/filters/invert.js

@@ -0,0 +1,25 @@
+function Filter_Invert()
+{
+  Filter.call(this);
+  this.parameters = [Angle];
+
+  this.render = function(cmd)
+  {
+    var imageObj = new Image();
+    imageObj.src = ronin.surface.active_layer.element.toDataURL('image/png');
+
+    var context = ronin.surface.active_layer.context();
+
+    var imageData = context.getImageData(0, 0, imageObj.width * 2, imageObj.height* 2);
+    var data = imageData.data;
+
+    for(var i = 0; i < data.length; i += 4) {
+      data[i] = 255 - data[i];
+      data[i + 1] = 255 - data[i + 1];
+      data[i + 2] = 255 - data[i + 2];
+    }
+
+    ronin.surface.active_layer.clear();
+    context.putImageData(imageData, 0, 0);
+  }
+}

sources/scripts/filters/rotate.js

@@ -0,0 +1,42 @@
+function Filter_Rotate()
+{
+  Filter.call(this);
+  this.parameters = [Angle,Position];
+
+  this.render = function(cmd)
+  {
+    var position = cmd.position() ? cmd.position() : new Position(ronin.surface.size.width/2,ronin.surface.size.height/2);
+    var angle = cmd.angle() ? cmd.angle().degrees : 90;
+
+    ronin.overlay.clear();
+    this.draw(this.context(),angle,position);
+    ronin.overlay.clear();
+  }
+
+  this.preview = function(cmd)
+  {
+    if(cmd.position()){
+      ronin.overlay.clear();
+      ronin.overlay.draw_pointer(cmd.position());
+    }
+  }
+
+  this.draw = function(context = this.context(), angle, position)
+  {
+    var w = ronin.surface.size.width;
+    var h = ronin.surface.size.height;
+
+    ronin.overlay.context().drawImage(context.canvas,0,0,w,h);
+
+    ronin.surface.active_layer.clear();
+
+    context.save();
+    context.translate(position.x,position.y);
+    context.rotate(angle*Math.PI/180);
+
+    context.drawImage(ronin.overlay.context().canvas, -position.x, -position.y,w,h)
+
+    context.rotate(-angle*Math.PI/180);
+    context.restore();
+  }
+}

sources/scripts/filters/stencil.js

@@ -0,0 +1,75 @@
+function Filter_Stencil()
+{
+  Filter.call(this);
+  this.parameters = [Angle];
+
+  this.render = function(cmd)
+  {
+    this.draw(this.context(),cmd.angle() ? cmd.angle().degrees : 20);
+    ronin.overlay.clear();
+  }
+
+  this.preview = function(cmd)
+  {
+    ronin.overlay.clear();
+    this.draw(ronin.overlay.context(),cmd.angle() ? cmd.angle().degrees : 20);
+  }
+
+  this.draw = function(context = this.context(), angle = 20)
+  {
+    var w = ronin.surface.size.width;
+    var h = ronin.surface.size.height;
+    
+    context.translate(w/2,h/2);
+
+    context.rotate(angle*Math.PI/180);
+
+    this.line(context,-w,0,w,0);
+
+    this.line(context,w*0.4,-h,w*0.4,h);
+    this.line(context,-w*0.4,-h,-w*0.4,h);
+
+    this.line(context,-w,h*0.25,w,h*0.25);
+    this.line(context,-w,-h*0.25,w,-h*0.25);
+
+    this.line(context,w*0.1,0,w*0.1,h);
+    this.line(context,-w*0.1,0,-w*0.1,-h);
+
+    this.circle(context,w*0.4,-h*0.25,w*0.05,1,1.5);
+    this.circle(context,-w*0.4,h*0.25,w*0.05,0,0.5);
+
+    context.font = "5px Arial";
+    context.fillStyle = "#000000"; 
+    context.fillText("GRID",(w*0.4)+10,10);
+
+    context.font = "5px Arial";
+    context.fillStyle = "#000000"; 
+    context.fillText("GRID",(-w*0.4)-20,-10);
+
+    context.rotate(-angle*Math.PI/180);
+    context.translate(-w/2,-h/2);
+  }
+
+  this.line = function(context,x1,x2,y1,y2)
+  {
+    context.beginPath();
+    context.moveTo(x1,x2);
+    context.lineTo(y1,y2);
+    context.lineCap="round";
+    context.lineWidth = 0.5;
+    context.strokeStyle = "#000";
+    context.stroke();
+    context.closePath();
+  }
+
+  this.circle = function(context,x,y,r,c1,c2)
+  {
+    context.beginPath();
+    context.arc(x,y,r,c1*Math.PI,c2*Math.PI);
+    context.lineCap="round";
+    context.lineWidth = 0.5;
+    context.strokeStyle = "#000";
+    context.stroke();
+    context.closePath();
+  }
+}