javascript, pixel effect + black and white

pixelate.js

// usage: <image src="cool-dog.png" onload="pixelate(this,16)"/>
(function() {
    ////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////////

    var anims = [];

    function pulse() {
        var a = anims.slice();
        for (var i = 0; i < a.length; i++)
            a[i].animate();
    }

    ////////////////////////////////////////////////////////////////////////////////////////////

    window.pixelate = function(img, nsteps) {
        var pxl = img.pxl = {
            width: img.naturalWidth,
            height: img.naturalHeight,
            img: img,
            src: document.createElement('canvas'),
            sctx: null,
            dst: document.createElement('canvas'),
            dctx: null,
            anim: null,
            draw: function(step) {
                var idata = this.sctx.getImageData(0, 0, this.width, this.height);
                var data = idata.data;
                var d = 0;
                var mx=this.width*0.5;
                var my=this.height*0.5;
                for (var y = 0; y < this.height; y++) {
                    var ry = Math.min(Math.max(0, Math.round(Math.round((y-my)  / step) * step+my)), this.height-1);
                    var sy = ry * this.height * 4;
                    for (var x = 0; x < this.width; x++) {
                        var rx = Math.min(Math.max(0, Math.round(Math.round((x-mx)  / step) * step+mx)), this.width-1);
                        var s = sy + rx * 4;
                        var r = data[s+0];
                        var g = data[s+1];
                        var b = data[s+2];
                        var bwc=step/nsteps;
                        var ibwc=1-bwc;
                        var l=bwc*(r+g+b)/3;
                        data[d++]=r*ibwc+l;
                        data[d++]=g*ibwc+l;
                        data[d++]=b*ibwc+l;
                        d++;
                    }
                }
                this.dctx.putImageData(idata,0,0);
                img.src=this.dst.toDataURL();
            },
            init: function() {
                this.src.width=this.dst.width=this.width;
                this.src.height=this.dst.height=this.height;
                this.sctx = this.src.getContext('2d');
                this.dctx = this.dst.getContext('2d');
                this.sctx.drawImage(img, 0, 0, this.width, this.height);
                img.addEventListener("mouseover", function() {
                    if(img.pxl.anim)
                        anims.splice(anims.indexOf(img.pxl.anim), 1);
                    img.pxl.anim={
                        img: img,
                        step: nsteps,
                        animate: function() {
                            img.pxl.draw(this.step--);
                            if(this.step==0) {
                                anims.splice(anims.indexOf(this), 1);
                                img.pxl.anim=null;
                            }
                        }
                    };
                    anims.push(img.pxl.anim);
                });
                img.addEventListener("mouseout", function() {
                    if(img.pxl.anim)
                        anims.splice(anims.indexOf(img.pxl.anim), 1);
                    img.pxl.anim={
                        img: img,
                        step: 1,
                        animate: function() {
                            img.pxl.draw(this.step++);
                            if(this.step>nsteps) {
                                anims.splice(anims.indexOf(this), 1);
                                img.pxl.anim=null;
                            }
                        }
                    };
                    anims.push(img.pxl.anim);  
                });
                img.onload=null;
                this.draw(nsteps);
            }
        };
        pxl.init();
    };

    ////////////////////////////////////////////////////////////////////////////////////////////

    window.requestAnimFrame = (function() {
        return window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.oRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            function(callback) {
                window.setTimeout(callback, 1000 / 60);
            };
    })();

    (function animloop() {
        window.requestAnimFrame(animloop);
        pulse();
    })();

    ////////////////////////////////////////////////////////////////////////////////////////////
    ////////////////////////////////////////////////////////////////////////////////////////////
})();