Starting from a better base.

This commit is contained in:
Devine Lu Linvega
2017-09-25 15:42:10 +13:00
parent 67553ec9f5
commit 54c241cfda
77 changed files with 204 additions and 98 deletions

View File

@@ -0,0 +1,21 @@
function Filter_Balance()
{
Filter.call(this);
this.parameters = [Color];
this.render = function(params)
{
var color = params.color() ? params.color().floats() : new Color("#999999").floats();
var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.size.width*2, ronin.frame.size.height*2);
var data = originalData.data;
for(var i = 0; i < data.length; i += 4) {
data[i] = data[i] * (color.r + 0.5);
data[i + 1] = data[i + 1] * (color.g + 0.5);
data[i + 2] = data[i + 2] * (color.b + 0.5);
}
ronin.frame.context().putImageData(originalData, 0, 0);
}
}

View File

@@ -0,0 +1,64 @@
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.frame.size.width,ronin.frame.size.height);
var value = cmd.value() ? cmd.value().float : 5;
this.draw(this.context(),value,position);
}
this.preview = function(cmd)
{
if(cmd.position()){
ronin.overlay.draw(cmd.position());
}
}
this.draw = function(context = this.context(), value, position)
{
var w = ronin.frame.size.width;
var h = ronin.frame.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.frame.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.frame.active_layer.clear();
context.putImageData(imageData, 0, 0);
}
}

View File

@@ -0,0 +1,23 @@
function Filter_Contrast()
{
Filter.call(this);
this.parameters = [Value];
this.render = function(params)
{
var color = params.color() ? params.color().floats() : new Color("#999999").floats();
var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.size.width*2, ronin.frame.size.height*2);
var data = originalData.data;
for(var i = 0; i < data.length; i += 4) {
var average = parseFloat(data[i] + data[i+1] + data[i+2])/3;
var distance = 50;
data[i] = data[i] + distance;
data[i + 1] = data[i+1] + distance;
data[i + 2] = data[i+2] + distance;
}
ronin.frame.context().putImageData(originalData, 0, 0);
}
}

View File

@@ -0,0 +1,93 @@
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.get_neighbors = function(pixels,x,y)
{
return [
this.get_color(pixels,x-1,y-1),this.get_color(pixels,x,y-1),this.get_color(pixels,x+1,y-1),
this.get_color(pixels,x-1,y),this.get_color(pixels,x,y),this.get_color(pixels,x+1,y),
this.get_color(pixels,x-1,y+1),this.get_color(pixels,x,y+1),this.get_color(pixels,x+1,y+1),
];
}
this.get_neighbors_average = function(pixels,x,y,weight_map = [1,1,1,1,1,1,1,1,1])
{
var n = this.get_neighbors(pixels,x,y);
var r = 0;
var g = 0;
var b = 0;
for (var i = 0; i < n.length; i++){
r += n[i].r * weight_map[i];
g += n[i].g * weight_map[i];
b += n[i].b * weight_map[i];
}
return {r:r/n.length,g:g/n.length,b:b/n.length}
}
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.frame.context();
}
this.pixels = function()
{
return ronin.frame.context().getImageData(0,0,ronin.frame.size.width * 2,ronin.frame.size.height * 2);
}
this.hint = function()
{
var html = "";
for(id in this.parameters){
html += this.parameters[id]+" ";
}
return html;
}
}

View File

@@ -0,0 +1,22 @@
function Filter_Grey()
{
Filter.call(this);
this.parameters = [Color];
this.render = function(params)
{
var color = params.color() ? params.color().floats() : new Color("#36ba0e").floats();
var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.size.width*2, ronin.frame.size.height*2);
var data = originalData.data;
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 = color.r*r + color.g*g + color.b*b;
data[i] = data[i+1] = data[i+2] = v
}
ronin.frame.context().putImageData(originalData, 0, 0);
}
}

View File

@@ -0,0 +1,27 @@
function Filter_Invert()
{
Filter.call(this);
this.parameters = [];
this.render = function(cmd)
{
var imageObj = new Image();
imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png');
var w = ronin.frame.size.width;
var h = ronin.frame.size.height;
var context = ronin.frame.context();
var originalData = context.getImageData(0, 0, w*2, h*2);
var data = originalData.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.frame.active_layer.clear();
context.putImageData(originalData, 0, 0);
}
}

View File

@@ -0,0 +1,22 @@
function Filter_Saturate()
{
Filter.call(this);
this.parameters = [Color];
this.render = function(params)
{
var color = params.color() ? params.color().floats() : new Color("#999999").floats();
var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.size.width*2, ronin.frame.size.height*2);
var data = originalData.data;
for(var i = 0; i < data.length; i += 4) {
var average = parseFloat(data[i] + data[i+1] + data[i+2])/3;
data[i] = (average+(data[i]*color.r))/2;
data[i + 1] = (average+(data[i+1]*color.g))/2;
data[i + 2] = (average+(data[i+2]*color.b))/2;
}
ronin.frame.context().putImageData(originalData, 0, 0);
}
}

View File

@@ -0,0 +1,57 @@
function Filter_Sharpen()
{
Filter.call(this);
this.parameters = [Value];
this.render = function(cmd)
{
var imageObj = new Image();
imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png');
var w = ronin.frame.size.width;
var h = ronin.frame.size.height;
var context = ronin.frame.context();
var originalData = context.getImageData(0, 0, w*2, h*2);
var data = originalData.data;
var newImage = context.getImageData(0, 0, w*2, h*2);
var strenght = cmd.value() ? cmd.value().float : 1;
var ver = -1;
var dia = 1;
var cen = 8;
var weight_map = [
dia * strenght, ver * strenght, dia * strenght,
ver * strenght, cen * strenght, ver * strenght,
dia * strenght, ver * strenght, dia * strenght
];
for(var i = 0; i < data.length; i += 4) {
var p = i / 4;
var x = (p % originalData.width);
var y = parseInt(p/originalData.width);
var average = this.get_neighbors_average(originalData,x,y,weight_map);
newImage.data[i] = parseInt(average.r);
newImage.data[i+1] = parseInt(average.g);
newImage.data[i+2] = parseInt(average.b);
}
ronin.frame.active_layer.clear();
context.putImageData(newImage, 0, 0);
}
this.preview = function(cmd)
{
}
this.draw = function(context = this.context(), value, position)
{
}
}

View File

@@ -0,0 +1,83 @@
function Filter_Stencil()
{
Filter.call(this);
this.parameters = [Angle,Color];
this.render = function(cmd)
{
var angle = cmd.angle() ? cmd.angle().degrees : 20;
var color = cmd.color() ? cmd.color().hex : "#000000";
this.draw(ronin.frame.context(),angle,color);
if(ronin.render.layer){ ronin.render.layer.remove(this); }
return 1, "ok";
}
this.preview = function(cmd)
{
var angle = cmd.angle() ? cmd.angle().degrees : 20;
var color = cmd.color() ? cmd.color().hex : "#000000";
ronin.render.get_layer().clear();
this.draw(ronin.render.layer.context(),angle,color);
}
this.draw = function(context = this.context(), angle, color)
{
var w = ronin.frame.size.width;
var h = ronin.frame.size.height;
context.translate(w/2,h/2);
context.rotate(angle*Math.PI/180);
this.line(context,-w,0,w,0,color);
this.line(context,w*0.4,-h,w*0.4,h,color);
this.line(context,-w*0.4,-h,-w*0.4,h,color);
this.line(context,-w,h*0.25,w,h*0.25,color);
this.line(context,-w,-h*0.25,w,-h*0.25,color);
this.line(context,w*0.1,0,w*0.1,h,color);
this.line(context,-w*0.1,0,-w*0.1,-h,color);
this.circle(context,w*0.4,-h*0.25,w*0.05,1,1.5,color);
this.circle(context,-w*0.4,h*0.25,w*0.05,0,0.5,color);
context.font = "5px Arial";
context.fillStyle = color;
context.fillText(angle+"'",(w*0.4)+10,10);
context.font = "5px Arial";
context.fillStyle = color;
context.fillText(angle+"'",(-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,color)
{
context.beginPath();
context.moveTo(x1,x2);
context.lineTo(y1,y2);
context.lineCap="round";
context.lineWidth = 0.5;
context.strokeStyle = color;
context.stroke();
context.closePath();
}
this.circle = function(context,x,y,r,c1,c2,color)
{
context.beginPath();
context.arc(x,y,r,c1*Math.PI,c2*Math.PI);
context.lineCap="round";
context.lineWidth = 0.5;
context.strokeStyle = color;
context.stroke();
context.closePath();
}
}