voronoi/voronoi.js

console.log('hi voronoi');

const canvas = document.getElementById('canvas'),
    canvwidth = canvas.width,
    canvheight = canvas.height,
    ctx = canvas.getContext('2d');
const minDist = 20,
    edgeBounds = 20;

function drawSite(x, y) {
    ctx.save();
    ctx.beginPath();
    ctx.arc(x, y, 2, 0, Math.PI * 2, false);
    ctx.closePath();
    ctx.fillStyle = 'black';
    ctx.fill();
    ctx.restore();
}
function drawLine(x1, y1, x2, y2) {
    ctx.save();
    ctx.beginPath();
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 1;
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
    ctx.restore();
}
function drawLineO(p1, p2) {
    drawLine(p1.x, p1.y, p2.x, p2.y);
}
function distance(p1, p2) {
    return Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));
}
function generateSites(n = 10) {
    const sites = [],
        safety = n * 2,
        randMultWidth = canvwidth - (edgeBounds * 2),
        randMultHeight = canvheight - (edgeBounds * 2),
        origin = {x:0, y:0};

    let count = 0;
    while( sites.length < n && count < safety ) {
        count += 1;
        const x = Math.floor(Math.random() * randMultWidth) + edgeBounds,
            y = Math.floor(Math.random() * randMultHeight) + edgeBounds,
            min = sites.reduce(function checkDist(minSoFar, existing) {
                const d = distance(existing, {x, y});
                if( d < minSoFar ) {
                    return d;
                }
                else {
                    return minSoFar;
                }
            }, canvwidth * canvheight);
        if( min > minDist ) {
            sites.push( {x, y} );
        }
    }

    sites.sort(function (a, b) {
        return distance(origin, a) - distance(origin, b);
    });

    return sites;
}

function randIndivC(a = 0, b = 255) {
    return Math.floor(Math.random() * (b-a) + a);
}
function cts(c) {
    const r = c.r < 16 ? '0' + c.r.toString(16) : c.r.toString(16),
        g = c.g < 16 ? '0' + c.g.toString(16) : c.g.toString(16),
        b = c.b < 16 ? '0' + c.b.toString(16) : c.b.toString(16);
    return '#' + r + g + b;
}
function primaryOrSecondary() {
    const t = Math.random(),
        w = Math.floor(Math.random() * 3);
    if( t < 0.45 ) {
        const r = w === 0 ? 255 : 0,
            g = w === 1 ? 255 : 0,
            b = w === 2 ? 255 : 0;
        return {r, g, b};
    }
    else if( t < 0.9 ) {
        const r = w !== 0 ? 255 : 0,
            g = w !== 1 ? 255 : 0,
            b = w !== 2 ? 255 : 0;
        return {r, g, b};
    }
    else {
        //return {r: 255, g:255, b:255};
        const r = randIndivC(100, 255),
            g = randIndivC(100, 255),
            b = randIndivC(100, 255);
        return {r, g, b};
    }
}
function randomColor() {
    const t = Math.random(),
        w = Math.floor(Math.random() * 3);
    if( t < 0.45 ) {
        const r = w === 0 ? randIndivC(200, 255) : randIndivC(10, 100),
            g = w === 1 ? randIndivC(200, 255) : randIndivC(10, 100),
            b = w === 2 ? randIndivC(200, 255) : randIndivC(10, 100);
        return {r, g, b};
    }
    else if( t < 0.9 ) {
        const r = w !== 0 ? randIndivC(200, 255) : randIndivC(10, 100),
            g = w !== 1 ? randIndivC(200, 255) : randIndivC(10, 100),
            b = w !== 2 ? randIndivC(200, 255) : randIndivC(10, 100);
        return {r, g, b};
    }
    else {
        const r = randIndivC(100, 200),
            g = randIndivC(100, 200),
            b = randIndivC(100, 200);
        return {r, g, b};
    }
}
function mixedColor(base) {
    let randr = Math.floor(Math.random() * 200 + 55),
        randg = Math.floor(Math.random() * 200 + 55),
        randb = Math.floor(Math.random() * 200 + 55);
    if( base ) {
        randr = Math.floor((base.r + randr) / 2);
        randg = Math.floor((base.g + randg) / 2);
        randb = Math.floor((base.b + randb) / 2);
    }
    return cts({r:randr, g:randg, b:randb});
}

const sites = generateSites(50).map(function assignRandomColour(site) {
    //site.color = cts(randomColor());
    //site.color = cts(primaryOrSecondary());
    site.color = mixedColor(primaryOrSecondary());
    site.sectors = [];
    return site;
});

sites.forEach(function renderSites(site) {
    drawSite(site.x, site.y);
});


function bruteForceRow(row, sites) {
    sites = sites.map(function addNewRow(site) {
        site.sectors[row] = [];
        return site;
    })
    for( let i = 0; i < canvwidth; i += 1 ) {
        const point = {x:i, y:row},
            cind = sites.slice(1).reduce(function check(closest, site, ind) {
                const d = distance(site, point);
                if( d < closest.d ) {
                    return {c:(ind + 1), d};
                }
                return closest;
            }, {c:0, d:distance(sites[0], point)});
        sites[cind.c].sectors[row].push(point);
    }
    return sites;
}
function spot(x, y, colour) {
    ctx.save();
    ctx.fillStyle = colour;
    ctx.fillRect(x, y, 1, 1);
    ctx.restore();
}

function goRow(i, sites) {
    const newSites = bruteForceRow(i, sites);
    newSites.filter(x => x.sectors[i].length)
        .forEach(function parse(leader) {
            leader.sectors[i].forEach(function draw(place) {
                spot(place.x, place.y, leader.color);
            })
        });
    if( i < canvheight ) {
        setTimeout(goRow, 10, i + 1, newSites);
    }
    else {
        setTimeout(function action() {
            // temp redraw sites
            sites.forEach(function renderSites(site) {
                drawSite(site.x, site.y);
            });
        }, 100);
    }
}
goRow(0, sites);