Drawing thing

(async function() {
    var canvas = document.createElement("canvas");

    canvas.width = 256;
    canvas.height = 128;
    canvas.style.imageRendering = "pixelated";

    while (document.body.firstChild)
        document.body.removeChild(document.body.firstChild);
    document.body.appendChild(canvas);

    var ctx = canvas.getContext("2d");

    var data = ctx.createImageData(256, 128);

    var colors = new Int16Array(32768);

    for (let i = 0; i < 32768; i++)
        colors[i] = i;

    for (let j, i = 32767; i >= 0; i--) {
        j = Math.random() * (i + 1) | 0;
        [colors[i], colors[j]] = [colors[j], colors[i]];
    }

    var unused = [...colors];
    var original = Array(16);

    var pixels = new Int16Array(32768).fill(-1);

    var to_pos = function(pixel) {
        return [pixel % 256, pixel / 256 | 0];
    };

    var from_pos = function(pos) {
        return pos[1] * 256 + pos[0];
    };

    var find_color = function(color) {
        var color_dist = function(from, to) {
            var red = Math.abs(((from & 31744) >> 10) - ((to & 31744) >> 10));
            var green = Math.abs(((from & 992) >> 5) - ((to & 992) >> 5));
            var blue = Math.abs((from & 31) - (to & 31));

            return red + green + blue;
        };

        var max = [0, Infinity];

        for (let d, i = 0; i < unused.length; i++) {
            d = color_dist(color, unused[i]) + (Math.random() * 8 | 0);

            if (d <= max[1])
                max = [i, d];
        }

        color = unused[max[0]];

        unused = unused.filter(u => u != color);

        return color;
    };

    var average_colors = function(pos) {
        var weighted = original.map(c => [c[0], 2 ** (Math.sqrt((pos[0] - c[1][0]) ** 2 + (pos[1] - c[1][1]) ** 2) / 20)]);

        var a_red = Math.round(weighted.reduce((a, w) => a + ((w[0] & 31744) >> 10) / w[1], 0) / weighted.reduce((a, w) => a + 1 / w[1], 0));
        var a_green = Math.round(weighted.reduce((a, w) => a + ((w[0] & 992) >> 5) / w[1], 0) / weighted.reduce((a, w) => a + 1 / w[1], 0));
        var a_blue = Math.round(weighted.reduce((a, w) => a + (w[0] & 31) / w[1], 0) / weighted.reduce((a, w) => a + 1 / w[1], 0));

        return (a_red << 10) | (a_green << 5) | a_blue;
    };

    var find_pixel = function() {
        var pixel;

        do
            pixel = Math.random() * 32768 | 0;
        while (pixels[pixel] != -1);

        return pixel;
    };

    var to_hex = function(not_hex) {
        var red = ((not_hex & 31744) >> 7).toString(16).padStart(2, "0");
        var green = ((not_hex & 992) >> 2).toString(16).padStart(2, "0");
        var blue = ((not_hex & 31) << 3).toString(16).padStart(2, "0");

        return "#" + red + green + blue;
    };

    for (let p, i = 0; i < 16; i++) {
        original[i] = [Math.random() * 32768 | 0, to_pos(Math.random() * 32768 | 0)];
    }

    await new Promise(resolve => setTimeout(resolve, 0));

    for (let p, i = 0; i < 32768; i++) {
        ctx.fillStyle = to_hex(pixels[p = find_pixel()] = average_colors(to_pos(p)));
        ctx.fillRect(...to_pos(p), 1, 1);

        if (!(i % 64)) {
            await new Promise(resolve => setTimeout(resolve, 0));
        }
    }

    console.log("Done");
})();