Outline

"use strict";

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

ctx.translate(50, 50);

let scale = 16;

let gwidth = 16;
let gheight = 16;

let palette = [
    "#fff",
    "#f00",
    "#0f0"
];

let grid = new Uint32Array([
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 1, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
    0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
]);

function calcPath() {
    let paths = [];

    function addPath(x1, y1, x2, y2) {
        let start = true;
        let end = true;
        let c = [
            [x1, y1],
            [x2, y2]
        ];
        for (let i=0; i<paths.length; i++) {
            if (
                start &&
                paths[i][paths[i].length - 1][0] === c[0][0] &&
                paths[i][paths[i].length - 1][1] === c[0][1]
            ) {
                start = false;
                paths[i].pop();
                c = paths[i] = paths[i].concat(c);
                continue;
            }

            if (
                end &&
                paths[i][0][0] === c[c.length - 1][0] &&
                paths[i][0][1] === c[c.length - 1][1]
            ) {
                end = false;
                c.pop();
                c = paths[i] = c.concat(paths[i]);
            }
        }

        if (start && end) {
            paths.push(c);
        }

        //console.log(JSON.stringify(paths).split(",[["));
    }

    for (let y=0; y<gheight; y++) {
        for (let x=0; x<gwidth; x++) {
            let i = y * gwidth + x;
            let px = grid[i];
            if (!px) continue;

            //console.log(x, y);

            if (grid[i - gwidth] !== px) { // top
                addPath(x, y, x + 1, y);
            }

            if (grid[i + 1] !== px) { // right
                addPath(x + 1, y, x + 1, y + 1);
            }

            if (grid[i - 1] !== px) { // left
                addPath(x, y + 1, x, y);
            }

            if (grid[i + gwidth] !== px) { // bottom
                addPath(x + 1, y + 1, x, y + 1);
            }
        }
    }

    return paths;
}

let path = calcPath();

function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.beginPath();
    for (let i=0; i<path.length; i++) {
        ctx.moveTo(path[i][0][0] * scale, path[i][0][1] * scale);
        for (let j=1; j<path[i].length; j++) {
            ctx.lineTo(path[i][j][0] * scale, path[i][j][1] * scale);
        }
    }

    ctx.fillStyle = palette[1];
    ctx.fill();
    ctx.stroke();

    window.requestAnimationFrame(render);
}

window.requestAnimationFrame(render);