voronoi.js

const Voronoi = require( 'voronoi' );
const _ = require( 'lodash' );
const canvas = document.getElementById( "canvas" );
const ctx = canvas.getContext( "2d" );
const v = new Voronoi();
const max = {
    x: 800,
    y: 800
};
const bbox = {
    xl: 0,
    xr: max.x,
    yt: 0,
    yb: max.y
};
const sites = [];
const points = 10000;
for ( let i = 0; i < points; i++ ) sites.push( {
    x: Math.floor( Math.random() * max.x ),
    y: Math.floor( Math.random() * max.y )
} );

const d = v.compute( sites, bbox );

const textCanvas = document.getElementById( "text" );
const tctx = textCanvas.getContext( "2d" );
// tctx.font = '800 220px Arial';
tctx.fillRect( 300, 300, 200, 200 )
const rnd255 = () => Math.round( 255 * Math.random() );
const rndColor = ( alpha ) => {
    let colors = [
        'rgba(78,9,12,' + alpha + ')',
        'rgba(161,34,19,' + alpha + ')',
        'rgba(171,95,44,' + alpha + ')',
        'rgba(171,95,44,' + alpha + ')',
        'rgba(252,160,67,' + alpha + ')'
    ]
    return colors[ Math.round( Math.random() * colors.length ) ];
}

d.cells.forEach( cell => {
    let imgData = tctx.getImageData( cell.site.x, cell.site.y, 1, 1 ).data;
    let letter = ( imgData[ 3 ] == 255 );
    ctx.fillStyle = letter ? rndColor( 1 ) : rndColor( 0.3 );
    ctx.beginPath();
    ctx.moveTo( cell.halfedges[ 0 ].getStartpoint().x, cell.halfedges[ 0 ].getStartpoint().y );

    cell.halfedges.forEach( he => {
        ctx.lineTo( he.getEndpoint().x, he.getEndpoint().y );
    } )

    ctx.closePath();
    ctx.fill();
} );