From 991b4753fe0c395b1f9f9b7c077e48872cb0e7e8 Mon Sep 17 00:00:00 2001 From: Devine Lu Linvega Date: Wed, 18 Jan 2017 11:10:03 -0700 Subject: [PATCH] Brought back color balance filter --- sources/ronin.html | 1 + sources/scripts/filters/_balance.js | 46 ---------------------------- sources/scripts/filters/balance.js | 47 +++++++++++++++++++++++++++++ sources/scripts/modules/help.js | 4 +++ sources/scripts/modules/render.js | 3 +- 5 files changed, 54 insertions(+), 47 deletions(-) delete mode 100644 sources/scripts/filters/_balance.js create mode 100644 sources/scripts/filters/balance.js diff --git a/sources/ronin.html b/sources/ronin.html index b359f1d..c0425b7 100644 --- a/sources/ronin.html +++ b/sources/ronin.html @@ -34,6 +34,7 @@ + diff --git a/sources/scripts/filters/_balance.js b/sources/scripts/filters/_balance.js deleted file mode 100644 index 6bfc559..0000000 --- a/sources/scripts/filters/_balance.js +++ /dev/null @@ -1,46 +0,0 @@ -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); -} \ No newline at end of file diff --git a/sources/scripts/filters/balance.js b/sources/scripts/filters/balance.js new file mode 100644 index 0000000..f59f687 --- /dev/null +++ b/sources/scripts/filters/balance.js @@ -0,0 +1,47 @@ +function Filter_Balance() +{ + Filter.call(this); + + this.parameters = [Color]; + + this.render = function(cmd) + { + if(!cmd.color()){ return; } + if(!cmd.color().rgb()){ return; } + + this.draw(ronin.surface.active_layer.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.surface.active_layer.element.toDataURL('image/png'); + + var w = ronin.surface.size.width; + var h = ronin.surface.size.height; + + var originalData = ronin.surface.active_layer.context().getImageData(0, 0, w*2, h*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; + } + + ronin.render.layer.clear(); + context.putImageData(originalData, 0, 0); + } +} \ No newline at end of file diff --git a/sources/scripts/modules/help.js b/sources/scripts/modules/help.js index 5e5f2e9..70265bf 100644 --- a/sources/scripts/modules/help.js +++ b/sources/scripts/modules/help.js @@ -103,6 +103,10 @@ function Help(rune) html += pad("Ronin Logo",20)+"+ M150,53 A-96,97 0 0,0 246,150 M150,246 A97,-96 0 0,0 53,150 M53,101 A-48,-48 0 0,0 101,53 M246,101 A48,-48 0 0,1 198,53 M53,198 A-48,48 0 0,1 101,246 M246,198 A48,48 0 0,0 198,246 stroke_width=45 line_cap=square stroke_color=black\n"; html += pad("Circle",20)+"+ M 100, 100 m -75, 0 a 75,75 0 1,0 150,0 a 75,75 0 1,0 -150,0\n"; html += pad("Multiple Circles",20)+"+ M 64, 64 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0;+ M 64, 64 m -45, 0 a 45,45 0 1,0 90,0 a 45,45 0 1,0 -90,0;+ M 64, 64 m -40, 0 a 40,40 0 1,0 80,0 a 40,40 0 1,0 -80,0;+ M 64, 64 m -35, 0 a 35,35 0 1,0 70,0 a 35,35 0 1,0 -70,0;+ M 64, 64 m -30, 0 a 30,30 0 1,0 60,0 a 30,30 0 1,0 -60,0;+ M 64, 64 m -25, 0 a 25,25 0 1,0 50,0 a 25,25 0 1,0 -50,0;+ M 64, 64 m -20, 0 a 20,20 0 1,0 40,0 a 20,20 0 1,0 -40,0;+ M 64, 64 m -15, 0 a 15,15 0 1,0 30,0 a 15,15 0 1,0 -30,0;+ M 64, 64 m -10, 0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0;+ M 64, 64 m -5, 0 a 5,5 0 1,0 10,0 a 5,5 0 1,0 -10,0\n"; + + html += "\nFilters\n"; + html += pad("Darken",20)+"# 640x360 ; / ../assets/photo.jpg 640x 0,0 ; %balance #333333\n"; + html += ""; return html; } diff --git a/sources/scripts/modules/render.js b/sources/scripts/modules/render.js index a1b023c..014452d 100644 --- a/sources/scripts/modules/render.js +++ b/sources/scripts/modules/render.js @@ -5,8 +5,9 @@ function Render(rune) this.parameters = [Any]; this.collection = {}; - this.collection["stencil"] = new Filter_Stencil(); this.collection["rotate"] = new Filter_Rotate(); + this.collection["balance"] = new Filter_Balance(); + this.collection["stencil"] = new Filter_Stencil(); this.collection["invert"] = new Filter_Invert(); this.collection["chromatic"] = new Filter_Chromatic();