【JS】360°パノラマ写真からCanvasを使って惑星「リトルプラネット」を作る ref: http://qiita.com/kingpanda/items/13f7bc06bdb95d3c0bc0

js

var WIDTH = 500;
var HEIGHT = 500;
var img = new Image();
img.src = "test.jpg";
var rotDig = 0;

window.onload = function (){
    test();
}

function test() {

    var canvas = document.getElementById('canvas');

    var hw = WIDTH / 2;
    var hh = HEIGHT / 2;
    var r = Math.sqrt(hw * hw + hh * hh);
    var lut = [];
    var pos = 0;

    for (var y = 0; y < HEIGHT; y++){
        for (var x = 0; x < WIDTH; x++){
            var sx = Math.atan2(y - hh, x - hw) * hw / Math.PI + hw;
            var sy = Math.sqrt((x - hw) * (x - hw) + (y - hh) * (y - hh));
            sy = (r - sy) / r;
            sy = HEIGHT - sy * sy * HEIGHT - 1;

            if (sx < 0) sx = 0;
            if (WIDTH - 1 < sx) sx = WIDTH - 1;
            if (sy < 0) sy = 0;
            if (HEIGHT - 1 < sy) sy = HEIGHT - 1;

            sx = Math.round(sx);
            sy = Math.round(sy);

            lut[pos++] = (sy * WIDTH + sx) * 4 + 0;
            lut[pos++] = (sy * WIDTH + sx) * 4 + 1;
            lut[pos++] = (sy * WIDTH + sx) * 4 + 2;
            lut[pos++] = (sy * WIDTH + sx) * 4 + 3;
        }
    }

    if (canvas.getContext) {
        var ctx = canvas.getContext('2d');
        var angle = 180*Math.PI/180;
        ctx.rotate(angle);
        ctx.translate(-WIDTH, -HEIGHT);
        ctx.drawImage(img, 0, 0, WIDTH, HEIGHT);

        var output = ctx.getImageData(0, 0, WIDTH, HEIGHT);

        var imageData = ctx.getImageData(0, 0, WIDTH, HEIGHT);
        var src = imageData.data;
        var dst = output.data;
        for (var n = 0; n < HEIGHT * WIDTH * 4; n++){
            dst[n] = src[lut[n]];
        }
        ctx.putImageData(output, 0, 0);
    }

}