forked: jQuery Sticker plugin

jsdoit.css

body {
    background-color: #DDDDDD;
    font: 30px sans-serif;
}

canvas {
    border: solid thin black;
}

jsdoit.html

<canvas id="view" width="400" height="300" />

<canvas id="calc" width="400" height="300" />

jsdoit.js

var IMG_URLS = {
    BLUE:  "http://jsrun.it/assets/q/W/k/x/qWkxS.png",
    GREEN: "http://jsrun.it/assets/s/j/p/7/sjp7x.png",
    YELLOW:"http://jsrun.it/assets/3/R/r/U/3RrUq.png",
    RED:   "http://jsrun.it/assets/n/k/V/9/nkV9y.png",
    BLACK: "http://jsrun.it/assets/k/S/G/7/kSG7Z.png"
};

var data = [
    [IMG_URLS.BLUE,   100, 100],
    [IMG_URLS.GREEN,  100, 100],
    [IMG_URLS.YELLOW, 100, 100],
    [IMG_URLS.RED,    100, 100],
    [IMG_URLS.BLACK,  100, 100],
];

$(function() {
	var canvas = $('canvas');
    var ctx = canvas[0].getContext("2d");
   
    /* Imageオブジェクトを生成 */
    var img = new Image();
    //img.crossOrigin = "Anonymous";
    img.src = "http://jsrun.it/assets/u/s/j/8/usj8w.png?" + new Date().getTime();
    /* 画像が読み込まれるのを待ってから処理を続行 */
    img.onload = function() {
        var data1 = [img, 150, 150];
        var data2 = [img, 100, 100];

        setInterval(function() {
            var x1 = data1[1];
            var y1 = data1[2];
            var x2 = data2[1];
            var y2 = data2[2];
            var newData = selectMin([
                [intersectionValue(data1[0], x1    , y1    , data2[0], x2, y2), x1    , y1    ],
                [intersectionValue(data1[0], x1 + 2, y1    , data2[0], x2, y2), x1 + 2, y1    ],
                [intersectionValue(data1[0], x1 - 2, y1    , data2[0], x2, y2), x1 - 2, y1    ],
                [intersectionValue(data1[0], x1    , y1 + 2, data2[0], x2, y2), x1    , y1 + 2],
                [intersectionValue(data1[0], x1    , y1 - 2, data2[0], x2, y2), x1    , y1 - 2]
            ]);
            data1[1] = newData[1];
            data1[2] = newData[2];
            view(data1, data2);
        }, 1000);
        //var i = calc(canvas, ctx, img, empty_length);
        //ctx.clearRect(0, 0, 400, 300);
        
        //ctx.globalCompositeOperation = 'source-over';
        //ctx.drawImage(img,0,0);
        //ctx.drawImage(img,i,i);
    }
    
});

function selectMin(data) {
    var minData = data[0];
    console.log(data);
    $.each(data, function(i, d) {
        if (d[0] < minData[0]) {
            minData = d;
        }
    });
    return minData;
}

function intersectionValue(img1, x1, y1, img2, x2, y2) {
	var canvas = $('canvas#calc')[0];
    var ctx = canvas.getContext("2d");

    ctx.clearRect(0, 0, 400, 300);
    ctx.globalCompositeOperation = 'source-over';
    ctx.drawImage(img1,x1,y1);
    ctx.globalCompositeOperation = 'source-in';
    ctx.drawImage(img2,x2,y2);
    var value = canvas.toDataURL().length;
    
    var imgData = ctx.getImageData(0,0,400,300);
    var count = 0;
    for (var i = 0; i < imgData.data.length; i++) {
        if (imgData.data[i] != 0) {
            count++;
        }
    }
    //console.log(imgData);
    //console.log(imgData.data);
    return count;
}

function view(data1, data2) {
	var canvas = $('canvas#view')[0];
    var ctx = canvas.getContext("2d");

    var img1 = data1[0];
    var x1 = data1[1];
    var y1 = data1[2];
    var img2 = data2[0];
    var x2 = data2[1];
    var y2 = data2[2];
    ctx.clearRect(0, 0, 400, 300);
        
    ctx.globalCompositeOperation = 'source-over';
    ctx.drawImage(img1, x1, y1);
    ctx.drawImage(img2, x2, y2);
}


function Point(x, y) {
    this.x = x;
    this.y = y;
    this.plus = function(o) {
	return new Point(this.x + o.x, this.y + o.y);
    };
    this.multi = function(a) {
	return new Point(this.x * a, this.y * a);
    };
    this.minus = function(o) {
	return this.plus(o.multi(-1));
    };
    this.normal = function() {
	return this.multi(1/this.distance());
    };
    this.distance = function() {
	return Math.sqrt(this.x*this.x+this.y*this.y);
    };
    this.same = function(o) {
	return this.minus(o).same0();
    };
    this.same0 = function() {
	return ((this.x === 0) && (this.y === 0));
    };
    this.to_s = function() {
	return "(" + this.x + ", " + this.y + ")";
    };
}