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);