JSFiddle - React, Tailwind, and code Playground

by eithe

JavaScript

function chunk(arr, n) {
        return arr.reduce(function(p, cur, i) {
            (p[i/n|0] = p[i/n|0] || []).push(cur);
            return p;
        },[]);
    }

    function f(im_1, im_2, args)
    {
        if (!args)
            args = {};
        
        if (!args.random)
            args.random = 0;
        
        if (!args.speed)
            args.speed = 100;
        
        if (typeof im_1 == 'string')
        {
            var img_1 = new Image();
            img_1.crossOrigin = "Anonymous";
            img_1.src = im_1.indexOf("http://") != -1 ? "http://www.corsproxy.com/"+im_1.substr(7) : im_1;
        }
        else
            var img_1 = {loaded: true, palette: im_1}
        
        var img_2 = new Image();
        img_2.crossOrigin = "Anonymous";
        img_2.src = im_2.indexOf("http://") != -1 ? "http://www.corsproxy.com/"+im_2.substr(7) : im_2;

        var canvas = document.createElement('canvas');
        document.body.appendChild(canvas);

        var c = canvas.getContext('2d');

        img_1.onload = function(){img_1.loaded = true};
        img_2.onload = function(){img_2.loaded = true};
        
        var iv = window.setInterval(function()
        {
            if (img_1.loaded && img_2.loaded)
            {
                clearInterval(iv);
                
                canvas.width = img_2.width;
                canvas.height = img_2.height;

                c.drawImage(img_2, 0, 0, img_2.width, img_2.height);
                var pixels_2 = chunk([].splice.call(c.getImageData(0, 0, img_2.width, img_2.height).data, 0), 4);
                for(var i=0; i<pixels_2.length; i++)
                    pixels_2[i].location = {x: i % img_2.width, y: parseInt(i / img_2.width)};
                
                if (img_1.palette)
                {
                    var pixels_1 = [];
                    var i=0;
                    
                    while(pixels_1.length != pixels_2.length)
                       ...