JSFiddle - React, Tailwind, and code Playground

by XGundam05

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script>
<script src="http://www.raymondhill.net/voronoi/rhill-voronoi-core.js"></script>
<canvas id="canv" width="400" height="300"></canvas>

JavaScript

var VoronoiDemo = {
    voronoi: new Voronoi(),
    diagram: null,
    canvas: null,
    margin: 0.1,
    bbox: {xl:0,xr:400,yt:0,yb:300},
    sites: [],
    
    init: function(id){
        this.canvas = document.getElementById(id);
        this.bbox = {
            xl:0,
            xr:this.canvas.width,
            yt:0,
            yb:this.canvas.height
        };
        this.randomSites(100,true);
    },
    
    randomSites: function(n, clear){
        var sites = [];
        if (!clear){
            sites = this.sites.slice(0);
        }
        
        var xMargin = this.canvas.width * this.margin;
        var yMargin = this.canvas.height * this.margin;
        var xo = xMargin;
        var dx = this.canvas.width - 2 * xMargin;
        var yo = yMargin;
        var dy = this.canvas.height - 2 * yMargin;
        
        for(var i = 0; i < n; i++){
            sites.push({x:((xo+Math.random()*dx)|0), y:((yo+Math.random()*dy)|0)});
        }
        this.compute(sites);
    },
    
    compute: function(sites){
        this.sites = sites;
        this.voronoi.recycle(this.diagram);
        this.diagram = this.voronoi.compute(sites, this.bbox);
        this.render();
    },
    
    render: function(){
        var ctx = this.canvas.getContext('2d');
        ctx.globalAlpha = 1;
        ctx.beginPath();
        ctx.rect(0,0, this.canvas.width, this.canvas.height);
        ctx.fillStyle = 'white';
        ctx.fill();
        ctx.strokeStyle = '#808080';
        ctx.stroke();
        
        if(!this.diagram){return;}
        
        ctx.beginPath;
        ctx.strokeStyle = '#000000';
        for(var i = this.diagram.edges.length - 1; i >= 0; i--){
            var e = this.diagram.edges[i];
            ctx.moveTo(e.va.x, e.va.y);
            ctx.lineTo(e.vb.x, e.vb.y);
        }
        ctx.stroke();
    }
};

VoronoiDemo.init('canv');