dakedres/ronin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Trying to build a contrast & saturation filter

Browse Source
This commit is contained in:
Devine Lu Linvega 2017-04-09 08:47:44 -10:00
parent 3562c81d57
commit 1454ef2dea
16 changed files with 97 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -37,6 +37,8 @@
<script type="text/javascript" src="scripts/filters/balance.js"></script>
<script type="text/javascript" src="scripts/filters/grey.js"></script>
<script type="text/javascript" src="scripts/filters/sharpen.js"></script>
<script type="text/javascript" src="scripts/filters/saturate.js"></script>
<script type="text/javascript" src="scripts/filters/contrast.js"></script>
<script type="text/javascript" src="scripts/core/keyboard.js"></script>
<script type="text/javascript" src="scripts/core/command.js"></script>

1
links/main.css
View File

@ -21,6 +21,7 @@ body { margin:0px; padding:0px; overflow:hidden; font-family:"input_mono_medium"
#terminal logs log .rune { color:white; }
#terminal logs log.error .rune { color:red; }
#terminal logs log.input { color:white; }
#terminal logs log.image img { height:85px;width:auto;border-radius: 3px }
#terminal menu { display: inline-block;position: absolute;bottom: 0px;right: 0px;padding: 0px 5px;font-size: 10px;line-height: 20px;color:white }
#terminal.hide { height:25px; }

11
presets/template.rabbits.rin
View File

@ -1,5 +1,8 @@
terminal.display hide ;
frame.resize 720x405 ;
source.load /01.jpg 720x 0,0 ;
render.sharpen 0.5 ;
source.load /hundred.rabbits.logo.white.svg 50x50 0,355 ;
frame.resize 1060x600 ;
source.load /08.jpg x600 ;
render.sharpen 0.25 ;
render.saturate #ffffff;
render.contrast 0.25 ;
source.load /hundred.rabbits.logo.white.svg 70x70 0,530 ;
source.save

40
scripts/filters/balance.js
View File

@ -4,44 +4,18 @@ function Filter_Balance()
this.parameters = [Color];
this.render = function(cmd)
this.render = function(params)
{
if(!cmd.color()){ return; }
if(!cmd.color().rgb()){ return; }
this.draw(ronin.frame.context(),cmd.color().rgb());
}
this.preview = function(cmd)
{
if(!cmd.color()){ return; }
if(!cmd.color().rgb()){ return; }
this.draw(ronin.render.layer.context(),cmd.color().rgb());
}
this.draw = function(context = this.context(), color_rgb)
{
var imageObj = new Image();
imageObj.src = ronin.frame.active_layer.element.toDataURL('image/png');
var w = ronin.frame.settings["size"].width;
var h = ronin.frame.settings["size"].height;
var originalData = ronin.frame.context().getImageData(0, 0, w*2, h*2);
var color = params.color() ? params.color().floats() : new Color("#999999").floats();
var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.settings["size"].width*2, ronin.frame.settings["size"].height*2);
var data = originalData.data;
var r = (color_rgb.r / 255) + 0.5;
var g = (color_rgb.g / 255) + 0.5;
var b = (color_rgb.b / 255) + 0.5;
for(var i = 0; i < data.length; i += 4) {
data[i] = data[i] * r;
data[i + 1] = data[i + 1] * g;
data[i + 2] = data[i + 2] * b;
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.render.layer.clear();
context.putImageData(originalData, 0, 0);
ronin.frame.context().putImageData(originalData, 0, 0);
}
}

23
scripts/filters/contrast.js Normal file
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.settings["size"].width*2, ronin.frame.settings["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);
}
}

41
scripts/filters/grey.js
View File

@ -4,50 +4,19 @@ function Filter_Grey()
this.parameters = [Color];
this.render = function(cmd)
this.render = function(params)
{
if(cmd.color() && cmd.color().rgb()){
this.draw(ronin.frame.context(),cmd.color().rgb());
}
else{
this.draw(ronin.frame.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.frame.active_layer.element.toDataURL('image/png');
var w = ronin.frame.settings["size"].width;
var h = ronin.frame.settings["size"].height;
var originalData = ronin.frame.context().getImageData(0, 0, w*2, h*2);
var color = params.color() ? params.color().floats() : new Color("#36ba0e").floats();
var originalData = ronin.frame.context().getImageData(0, 0, ronin.frame.settings["size"].width*2, ronin.frame.settings["size"].height*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;
var v = color.r*r + color.g*g + color.b*b;
data[i] = data[i+1] = data[i+2] = v
}
ronin.render.layer.clear();
context.putImageData(originalData, 0, 0);
ronin.frame.context().putImageData(originalData, 0, 0);
}
}

22
scripts/filters/saturate.js Normal file
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.settings["size"].width*2, ronin.frame.settings["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);
}
}

4
scripts/modules/brush.js
View File

@ -86,7 +86,9 @@ function Brush(rune)
}
this.mouse_down = function(position)
{
{
if(position.is_outside()){ return; }
if(keyboard.shift_held == true){
this.erase();
}

18
scripts/modules/frame.js
View File

@ -41,7 +41,6 @@ function Frame(rune)
ronin.frame.element.style.marginTop = -(this.settings["size"].height/2);
ronin.on_resize();
ronin.terminal.log(new Log(this,"Resized Surface to "+this.settings["size"].render()));
}
this.crop = function(params, preview = false)
@ -95,8 +94,6 @@ function Frame(rune)
this.add_layer = function(layer)
{
ronin.terminal.log(new Log(this,"Creating layer:"+layer.name+(layer.manager ? "["+layer.manager.constructor.name+"]" : "")));
layer.resize(this.settings["size"]);
this.layers[layer.name] = layer;
this.element.appendChild(layer.element);
@ -158,21 +155,6 @@ function Frame(rune)
if(keys[loc-1] != null){this.select_layer(ronin.frame.layers[keys[loc-1]]);}
}
// this.passive = function(cmd)
// {
// var crop = ronin.terminal.cmd().method("crop");
// if(crop && crop.params.length == 2){
// console.log(crop);
// ronin.overlay.get_layer(true).clear();
// ronin.overlay.draw_rect(new Position(crop.params[0]),new Rect(crop.params[1]));
// }
// else{
// console.log("Missing params")
// }
// ronin.terminal.update_hint();
// }
// Cursor
this.mouse_mode = function()

3
scripts/modules/layer.js
View File

@ -62,8 +62,6 @@ function Layer(name,manager = null)
this.resize = function(rect)
{
ronin.terminal.log(new Log(this,"Resize "+this.name+" to "+rect.render()));
var pixels_rect = new Rect(this.element.width+"x"+this.element.height);
this.element.width = rect.width * 2;
@ -76,7 +74,6 @@ function Layer(name,manager = null)
this.remove = function(manager)
{
ronin.terminal.log(new Log(this,"Removing layer "+this.name));
manager.layer = null;
ronin.frame.layers[this.name].element.outerHTML = "";
delete ronin.frame.layers[this.name];

1
scripts/modules/path.js
View File

@ -22,7 +22,6 @@ function Path(rune)
var context = preview ? this.context() : ronin.frame.context();
console.log(this.settings["line_width"]);
context.beginPath();
context.lineCap = this.settings["line_cap"];
context.lineWidth = this.settings["line_width"];

3
scripts/modules/render.js
View File

@ -2,7 +2,6 @@ function Render(rune)
{
Module.call(this,rune);
this.parameters = [Any];
this.collection = {};
this.collection["rotate"] = new Filter_Rotate();
@ -12,6 +11,8 @@ function Render(rune)
this.collection["invert"] = new Filter_Invert();
this.collection["chromatic"] = new Filter_Chromatic();
this.collection["sharpen"] = new Filter_Sharpen();
this.collection["saturate"] = new Filter_Saturate();
this.collection["contrast"] = new Filter_Contrast();
this.active = function(cmd)
{

17
scripts/modules/source.js
View File

@ -1,15 +1,13 @@
function Source(rune)
{
Module.call(this,rune);
this.parameters = [Filepath,Position,Rect];
this.add_method(new Method("save",["name","rect","format"]));
this.add_method(new Method("load",["path","position","rect"]),"Add point");
this.load = function(params,preview = false) // source.load ../assets/todo.jpg 200x200 40,40
{
if(!params.filepath() || !params.rect() || !params.position()){ ronin.terminal.log(new Log(this,"Missing image path.","error")); return; }
if(!params.filepath() || !params.rect()){ ronin.terminal.log(new Log(this,"Missing image path.","error")); return; }
this.get_layer(true).clear();
@ -17,8 +15,8 @@ function Source(rune)
ronin.overlay.get_layer(true).clear();
var position = params.position() ? params.position() : new Position();
ronin.overlay.draw_rect(params.position(),params.rect());
var position = params.position() ? params.position() : new Position("0,0");
ronin.overlay.draw_rect(position,params.rect());
base_image = new Image();
base_image.src = "../assets/"+params.filepath().path;
@ -50,13 +48,13 @@ function Source(rune)
var d = null;
var w = window.open('about:blank','image from canvas');
ronin.terminal.query("terminal.display mini");
if(params.setting("format") && params.setting("format").value == "svg"){
w.document.write("<title>Untitled</title><body>"+ronin.path.create_svg()+"</body>");
ronin.terminal.log(new Log(this,ronin.path.create_svg(),"image"));
}
else if(params.setting("format") && params.setting("format").value == "jpg"){
w.document.write("<title>Untitled</title><body><img src='"+this.merge().element.toDataURL('image/jpeg')+"' width='"+ronin.frame.settings["size"].width+"px' height='"+ronin.frame.settings["size"].height+"px'/></body>");
ronin.terminal.log(new Log(this,"<img src='"+this.merge().element.toDataURL('image/png')+"' width='"+ronin.frame.settings["size"].width+"px' height='"+ronin.frame.settings["size"].height+"px'/>","image"));
}
else if(params.setting("format") && params.setting("format").value == "rin"){
var w = window.open('about:blank','source');
@ -65,8 +63,7 @@ function Source(rune)
w.document.write("<title>Source</title><pre>"+html+"</pre>");
}
else{
console.log("!!")
w.document.write("<title>Untitled</title><body><img src='"+this.merge().element.toDataURL('image/png')+"' width='"+ronin.frame.settings["size"].width+"px' height='"+ronin.frame.settings["size"].height+"px'/></body>");
ronin.terminal.log(new Log(this,"<img src='"+this.merge().element.toDataURL('image/png')+"' width='"+ronin.frame.settings["size"].width+"px' height='"+ronin.frame.settings["size"].height+"px'/>","image"));
}
this.layer.remove(this);

3
scripts/modules/terminal.js
View File

@ -132,6 +132,9 @@ function Terminal(rune)
else if(ronin[module_name]){
ronin.terminal.log(new Log(ronin.terminal,"Unknown method: "+method_name));
}
else if(module_name == "render"){
ronin.terminal.log(new Log(ronin.terminal,"Unknown filter: "+method_name));
}
else{
ronin.terminal.log(new Log(ronin.terminal,"Unknown module: "+module_name));
}

6
scripts/units/color.js
View File

@ -19,6 +19,12 @@ function Color(hex = '#000000')
{
return "rgba("+this.rgb().r+","+this.rgb().g+","+this.rgb().b+",1)";
}
this.floats = function()
{
var rgb = this.rgb();
return { r:rgb.r/255, g:rgb.g/255, b:rgb.b/255 }
}
this.render = function()
{

9
scripts/units/position.js
View File

@ -44,4 +44,13 @@ function Position(position_str = "0,0",y = null)
{
return (isNaN(this.x) ? 0 : this.x)+","+(isNaN(this.y) ? 0 : this.y);
}
this.is_outside = function()
{
if(this.x < 0){ return true; }
if(this.y < 0){ return true; }
if(this.x > ronin.frame.element.width/2){ return true; }
if(this.y > ronin.frame.element.height/2){ return true; }
return false;
}
}