Skip to content

Instantly share code, notes, and snippets.

@Strernd
Created Jan 19, 2018
Embed
What would you like to do?
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();
} );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment