Pixel Manipulator

This is a personal project of mine to apply various effects to images via a web interface.

To modify the effects, add an effects to the effects object like so:

effects.cooleffectname = function(c, o, c2){
 // Do stuff in here...
}

"c" is a Uint8Array passed from the first file input. "o" is the options object. "c2" is a second Uint8Array from the second file input.

The options object contains parameters passed in via the UI.

Name	Type	Example
noise	[Boolean]	true
render	[String]	"normal"
threshold	[Number]	250
gamma	[Number::Float]	0.7
size	[Object::height:[Number], width:[Number]]	{height: 640 , width: 960 }
color	[Object::r:[Number], g:[Number], b:[Number]]	{r: 205, g:16 , b: 66}
swing	[Object::r:[Number], g:[Number], b:[Number]]	{r: 205, g:16 , b: 66}
channel	[Object::r:[Boolean], g:[Boolean], b:[Boolean]]	{r: false, g: true, b: false}

I recommend a structure like so for the effects function

var opts = opts || {};
var gamma = opts.gamma || 1;
var colR = opts.colorR || 200; 
var colG = opts.colorG || 200;
var colB = opts.colorB || 200;
var paramsArray = paramsArray || chunk;

It is also possible to call your own options object, your own created effects, and run them a specified number of times to create a variety of presets

effects.photon = function (chunk, opts) {

    var opts = opts || {};
    var gamma = opts.gamma || 1;
    var offset = opts.offset || 0;
    var colR = opts.color.r || 200; 
    var colG = opts.color.g || 200;
    var colB = opts.color.b || 200;
    var h = opts.size.height, w = opts.size.width;
    opts.render = 'triangular';

    var repeater = 12;
    for (var i = 0; i < repeater; i++){

      effects.moveswing.apply(null, [chunk, opts]);
      effects.smosht.apply(null, [chunk, opts]);

    }
    
}

Have fun!

joeaguilar/pixel-manipulator

Pixel Manipulator