Random Offset Filter

by lannymcnie

HTML

<script src="https://code.createjs.com/createjs-2014.12.12.combined.js"></script>
<canvas id="canvas" width="800" height="600"></canvas>

JavaScript

var stage = new createjs.Stage("canvas");

var image = new Image();
image.crossOrigin = "Anonymous";
image.onload = init;
image.src = "http://dev.gskinner.com/createjs/cors/sphere.jpg";


/* -------------------- */

function tick(event) {
    stage.update(event);
}

function RandomOffsetFilter(minX, maxX, minY, maxY, chance) {
    this.minX = minX;
    this.maxX = maxX;
    this.minY = minY;
    this.maxY = maxY;
    this.chance = chance || 1;
}
var p = createjs.extend(RandomOffsetFilter, createjs.Filter);
p._applyFilter = function(imageData) {
        
    var data = imageData.data
        l = data.length, 
        w = imageData.width,
        h = imageData.height;    
    
    for (var i=0; i<l; i+=4) {
        if (Math.random() > this.chance) { continue; }
        
        var rowOffset = Math.random() * this.maxY + this.minY | 0;
        var colOffset = Math.random() * this.maxX + this.minX | 0;
        if (Math.random() > 0.5) { rowOffset *= -1; }
        if (Math.random() > 0.5) { colOffset *= -1; }
        
        var col = (i/4) % w | 0;
        var row = (i/4) / w | 0;
        var newCol = col - colOffset;
        var newRow = row - rowOffset;
        if (newCol < 0 || newCol >= w || newRow < 0 || newRow > h) { 
            // Out of range
            continue;
        }
        var index = newRow * w * 4 + newCol * 4;
        data[index] = data[i];
        data[index+1] = data[i+1];
        data[index+2] = data[i+2];
        data[index+3] = data[i+3];
    }
    return true;
};
createjs.RandomOffsetFilter = createjs.promote(RandomOffsetFilter, "Filter");


function init() {
    var bmp = new createjs.Bitmap(image);
    stage.addChild(bmp);
    
    bmp.filters = [new createjs.RandomOffsetFilter(2,8, 0,0, 0.9)];
    bmp.cache(0, 0, bmp.image.width, bmp.image.height);
    stage.update();
}