Tileset maker

by phyreman

HTML

<p>Grid Size: <input id="grid" type="number" min="2" step="1" value="16" /></p>
<div id="dropzone">Drop Image Here</div>
<canvas id="source"></canvas>
<canvas id="work"></canvas>
<canvas id="current"></canvas>
<canvas id="dest"></canvas>
<canvas id="map"></canvas>
<hr>
<img id="result" />
<textarea id="out"></textarea>

CSS

#dropzone {
    border: 2px dashed black;
    border-radius: 5px;
    height: 100px;
    text-align: center;
    width: 150px;
    
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-box-pack: center;
}

textarea {
    font-family: Monospace;
}

canvas {
    display: none;
    width: 0px;
}

JavaScript

Number.prototype.even = function () {
    "use strict";
    return 0 === Number(this) % 2;
};
Number.prototype.odd = function () {
    "use strict";
    return 1 === Number(this) % 2;
};
Number.prototype.factors = function () {
    "use strict";
    var a,
        b = 0,
        c = [];
    while (b++ <= this) {
        a = this / b;
        if (a === Math.floor(a)) {
            c.push(b);
        }
    }
    return c;
};

var rootFactor = function (input) {
    "use strict";
    var factors = input.factors(),
        root = Math.floor((factors.length - 1) / 2),
        i = 0,
        output,
        diff,
        best,
        bestDiff;

    if (factors.length.odd()) {
        output = [factors[root], factors[root]];
    } else if (arguments[1] && input - arguments[1] > 5) {
        output = [factors[root], factors[root + 1]];
    } else {
        best = [factors[root], factors[root + 1]];

        while (i++ < 5) {
            factors = (input + i).factors();
            root = Math.floor((factors.length - 1) / 2);
            diff = factors[root + 1] - factors[root];

            if (factors.length.odd()) {
                best = [factors[root], factors[root]];
            }
            bestDiff = best[1] - best[0];
            if (diff < bestDiff && (best[0] * best[1] > factors[root + 1] - factors[root])) {
                best = [factors[root], factors[root + 1]];
            }
        }
        output = best;
    }
    return output;
};

var source = new Image(),
    get = function(id) {
        return document.getElementById(id);
    },
    dropzone = get('dropzone');

// Implement image drop-in
dropzone.addEventListener('drop', function(e) {
    e.preventDefault();
    var reader = new FileReader();
    reader.onload = function(evt) {
        source.src = evt.target.result;
    };

    reader.readAsDataURL(e.dataTransfer.files[0]);
}, false);
dropzone.addEventListener('dragover', function(e) {
    e.preventDefault();
}, false);

source.onload =...