diff --git a/index.html b/index.html index 30ef12d..ad9e027 100644 --- a/index.html +++ b/index.html @@ -37,6 +37,8 @@ + + diff --git a/links/main.css b/links/main.css index eed0ef7..fc752b9 100644 --- a/links/main.css +++ b/links/main.css @@ -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; } diff --git a/presets/template.rabbits.rin b/presets/template.rabbits.rin index 4b7962b..993036a 100644 --- a/presets/template.rabbits.rin +++ b/presets/template.rabbits.rin @@ -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 ; \ No newline at end of file +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 \ No newline at end of file diff --git a/scripts/filters/balance.js b/scripts/filters/balance.js index 2724a1b..c991f6c 100644 --- a/scripts/filters/balance.js +++ b/scripts/filters/balance.js @@ -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); } } \ No newline at end of file diff --git a/scripts/filters/contrast.js b/scripts/filters/contrast.js new file mode 100644 index 0000000..2bfe91c --- /dev/null +++ b/scripts/filters/contrast.js @@ -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); + } +} \ No newline at end of file diff --git a/scripts/filters/grey.js b/scripts/filters/grey.js index 2bdaf0f..e3d04c4 100644 --- a/scripts/filters/grey.js +++ b/scripts/filters/grey.js @@ -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); } } \ No newline at end of file diff --git a/scripts/filters/saturate.js b/scripts/filters/saturate.js new file mode 100644 index 0000000..c8f4ae4 --- /dev/null +++ b/scripts/filters/saturate.js @@ -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); + } +} \ No newline at end of file diff --git a/scripts/modules/brush.js b/scripts/modules/brush.js index cd98506..8138d2a 100644 --- a/scripts/modules/brush.js +++ b/scripts/modules/brush.js @@ -86,7 +86,9 @@ function Brush(rune) } this.mouse_down = function(position) - { + { + if(position.is_outside()){ return; } + if(keyboard.shift_held == true){ this.erase(); } diff --git a/scripts/modules/frame.js b/scripts/modules/frame.js index c48d34a..2221556 100644 --- a/scripts/modules/frame.js +++ b/scripts/modules/frame.js @@ -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() diff --git a/scripts/modules/layer.js b/scripts/modules/layer.js index 0f1ec3f..17e2f7f 100644 --- a/scripts/modules/layer.js +++ b/scripts/modules/layer.js @@ -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]; diff --git a/scripts/modules/path.js b/scripts/modules/path.js index 139f96b..8521eb4 100644 --- a/scripts/modules/path.js +++ b/scripts/modules/path.js @@ -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"]; diff --git a/scripts/modules/render.js b/scripts/modules/render.js index b2f0a7d..5466e29 100644 --- a/scripts/modules/render.js +++ b/scripts/modules/render.js @@ -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) { diff --git a/scripts/modules/source.js b/scripts/modules/source.js index 159e791..9ebae21 100644 --- a/scripts/modules/source.js +++ b/scripts/modules/source.js @@ -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("Untitled"+ronin.path.create_svg()+""); + ronin.terminal.log(new Log(this,ronin.path.create_svg(),"image")); } else if(params.setting("format") && params.setting("format").value == "jpg"){ - w.document.write("Untitled"); + ronin.terminal.log(new Log(this,"","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("Source
"+html+"
"); } else{ - console.log("!!") - w.document.write("Untitled"); + ronin.terminal.log(new Log(this,"","image")); } this.layer.remove(this); diff --git a/scripts/modules/terminal.js b/scripts/modules/terminal.js index cdc9fd7..49a8602 100644 --- a/scripts/modules/terminal.js +++ b/scripts/modules/terminal.js @@ -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)); } diff --git a/scripts/units/color.js b/scripts/units/color.js index 848f693..d2bef06 100644 --- a/scripts/units/color.js +++ b/scripts/units/color.js @@ -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() { diff --git a/scripts/units/position.js b/scripts/units/position.js index 0ecc6be..5ff98ab 100644 --- a/scripts/units/position.js +++ b/scripts/units/position.js @@ -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; + } } \ No newline at end of file