Brought back color balance filter

This commit is contained in:
Devine Lu Linvega 2017-01-18 11:10:03 -07:00
parent 2bca083af7
commit 991b4753fe
5 changed files with 54 additions and 47 deletions

View File

@ -34,6 +34,7 @@
<script type="text/javascript" src="scripts/filters/rotate.js"></script>
<script type="text/javascript" src="scripts/filters/invert.js"></script>
<script type="text/javascript" src="scripts/filters/chromatic.js"></script>
<script type="text/javascript" src="scripts/filters/balance.js"></script>
<script type="text/javascript" src="scripts/core/keyboard.js"></script>
<script type="text/javascript" src="scripts/core/cursor.js"></script>

View File

@ -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);
}

View File

@ -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);
}
}

View File

@ -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 += "</div>";
return html;
}

View File

@ -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();