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

Moved fiters to their own files.

Browse Source
This commit is contained in:
Devine Lu Linvega 2016-11-18 07:33:02 -08:00
parent 39b36b3040
commit 2fd9770440
5 changed files with 61 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
README.md
View File

@ -65,11 +65,12 @@ $ ! ; Clear temporary storage
##Filters*
```
: saturation 0.5 ; Set image saturation to 0.5
: chromatic 10 ; Shifts, from center, pixels red value by 10, green by 5, blue by 0
: chromatic 8 0 16 ; Shifts, from center, pixels red value by 8, green by 0, blue by 16
: balance red 0.9 0.4 0.7 ; Set color balance red to 0.9 0.4 0.7
: balance white 0.7 0.7 0.7 ; Set color balance white to 0.7 0.7 0.7
: sharpen 0.5 ; Sharpen image to 50%
: chromatic 10 ; Shifts, from center, pixels red value by 10, green by 5, blue by 0
: chromatic 8 0 16 ; Shifts, from center, pixels red value by 8, green by 0, blue by 16
```
##Translate*

5
index.html
View File

@ -12,7 +12,6 @@
<script type="text/javascript" src="scripts/module.js"></script>
<script type="text/javascript" src="scripts/modules/canvas.js"></script>
<script type="text/javascript" src="scripts/modules/filter.js"></script>
<script type="text/javascript" src="scripts/modules/stroke.js"></script>
<script type="text/javascript" src="scripts/modules/vector.js"></script>
<script type="text/javascript" src="scripts/modules/overlay.js"></script>
@ -21,6 +20,10 @@
<script type="text/javascript" src="scripts/modules/file.js"></script>
<script type="text/javascript" src="scripts/modules/hint.js"></script>
<script type="text/javascript" src="scripts/modules/filter.js"></script>
<script type="text/javascript" src="scripts/modules/filter.saturation.js"></script>
<script type="text/javascript" src="scripts/modules/filter.chromatic.js"></script>
<script type="text/javascript" src="scripts/keyboard.js"></script>
<script type="text/javascript" src="scripts/command.js"></script>
<script type="text/javascript" src="scripts/commander.js"></script>

38
scripts/modules/filter.chromatic.js Normal file
View File

@ -0,0 +1,38 @@
Filter.prototype.filter_chromatic = function(pixels = this.pixels(),p = null)
{
var s;
if(p.length === 0)
s = {r:2,g:2,b:2};
else if(p.length < 3)
s = {r:parseFloat(p[0]), g:parseFloat(p[0])*.5, b:0};
else
s = {r:parseFloat(p[0]), g:parseFloat(p[1]), b:parseFloat(p[2])};
var hw = pixels.width*.5;
var hh = pixels.height*.5;
var maxLength = Math.sqrt(hw*hw+hh*hh);
var output = new ImageData(pixels.width, pixels.height);
for (var i=0; i<pixels.width; i++) {
for(var j=0; j<pixels.height; j++){
var x = i-hw;
var y = j-hh;
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+hw;
y = Math.sin(a)*f+hh;
var r = this.get_color_bilinear(pixels, x, y);
f = (d-s.g*d/maxLength);
x = Math.cos(a)*f+hw;
y = Math.sin(a)*f+hh;
var g = this.get_color_bilinear(pixels, x, y);
f = (d-s.b*d/maxLength);
x = Math.cos(a)*f+hw;
y = Math.sin(a)*f+hh;
var b = this.get_color_bilinear(pixels, 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(output, c, i,j);
}
}
ronin.canvas.clear();
ronin.canvas.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height);
}

59
scripts/modules/filter.js
View File

@ -2,7 +2,7 @@ function Filter(element)
{
Module.call(this);
this.parameters = [Text,Value];
this.parameters = [Any];
this.active = function(cmd)
{
@ -25,63 +25,6 @@ function Filter(element)
this.passive = function(cmd)
{
}
// Filters
this.filter_saturation = function(pixels = this.pixels(),p = null)
{
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
var r = d[i];
var g = d[i+1];
var b = d[i+2];
// CIE luminance for the RGB
// The human eye is bad at seeing red and blue, so we de-emphasize them.
var v = 0.2126*r + 0.7152*g + 0.0722*b;
d[i] = d[i+1] = d[i+2] = v
}
ronin.canvas.clear();
ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
}
this.filter_chromatic = function(pixels = this.pixels(),p = null)
{
var s;
if(p.length == 0)
s = {r:2,g:2,b:2};
else if(p.length < 3)
s = {r:parseFloat(p[0]), g:parseFloat(p[0])*.5, b:0};
else
s = {r:parseFloat(p[0]), g:parseFloat(p[1]), b:parseFloat(p[2])};
var hw = pixels.width*.5;
var hh = pixels.height*.5;
var maxLength = Math.sqrt(hw*hw+hh*hh);
var output = new ImageData(pixels.width, pixels.height);
for (var i=0; i<pixels.width; i++) {
for(var j=0; j<pixels.height; j++){
var x = i-hw;
var y = j-hh;
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+hw;
y = Math.sin(a)*f+hh;
var r = this.get_color_bilinear(pixels, x, y);
f = (d-s.g*d/maxLength);
x = Math.cos(a)*f+hw;
y = Math.sin(a)*f+hh;
var g = this.get_color_bilinear(pixels, x, y);
f = (d-s.b*d/maxLength);
x = Math.cos(a)*f+hw;
y = Math.sin(a)*f+hh;
var b = this.get_color_bilinear(pixels, 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(output, c, i,j);
}
}
ronin.canvas.clear();
ronin.canvas.context().putImageData(output, 0, 0, 0, 0, pixels.width, pixels.height);
}
this.set_color = function(pixels, color, x, y){
x = Math.max(0,Math.min(x,pixels.width-1));

15
scripts/modules/filter.saturation.js Normal file
View File

@ -0,0 +1,15 @@
Filter.prototype.filter_saturation = function(pixels = this.pixels(),p = null)
{
var d = pixels.data;
for (var i=0; i<d.length; i+=4) {
var r = d[i];
var g = d[i+1];
var b = d[i+2];
// CIE luminance for the RGB
// The human eye is bad at seeing red and blue, so we de-emphasize them.
var v = 0.2126*r + 0.7152*g + 0.0722*b;
d[i] = d[i+1] = d[i+2] = v
}
ronin.canvas.clear();
ronin.canvas.context().putImageData(pixels, 0, 0, 0, 0, pixels.width, pixels.height);
}