JSFiddle - React, Tailwind, and code Playground
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, speed)
{
if (!speed)
speed = 100;
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;
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)
{
canvas.width = img_1.width;
canvas.height = img_1.height;
c.drawImage(img_1, 0, 0, img_1.width, img_1.height);
var pixels_1 = chunk([].splice.call(c.getImageData(0, 0, img_1.width, img_1.height).data, 0), 4);
for(var i=0; i<pixels_1.length; i++)
pixels_1[i].location = {x: i % img_1.width, y: parseInt(i / img_1.width)};
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)};
c.fillStyle = "rgba(255,255,255,255)";
c.fillRect(0, 0, img_2.width, img_2.height);
...