Notorious Party Muppets


    1.0.1 • Public • Published

    Bower version Build Status Built with Grunt

    What is this?

    A live demo is worth a thousand words, so here it is. This is a voronoi diagram plotting library that takes advantage of the GPU pipeline in order to convert meshes into voronoi diagrams. A paper explaining the method used can be viewed here.

    Currently, we support point and line-segment voronoi sites. In the future we intend to add on line-strips, polygons and general curves.


    Install via bower: bower install webgl-dm-voronoi

    The dist/ directory contains both a normal (voronoi.js) as well as a minified version of the library (voronoi.min.js). Include in the browser using <script src="path/to/voronoi.min.js"></script>



    var voronoi = new Voronoi.Diagram(options);

    options is an object with (optionally) the following properties:

    Name Default Description
    canvas null If you want to draw onto an existing canvas, supply its dom element in this option.
    width 500 In case canvas option was null, the diagram will create its own canvas element as wide as this.
    height 500 Analogous to the width option above.
    precision 16 Positive integer which controls the level of detail of the distance mesh. The higher, the more detailed will the mesh be, producing a better rendering at the cost of performance.
    markers true Boolean indicating whether site markers are initially visible.

    If you use an existing canvas, just pass its DOM element in the canvas option. Otherwise, you will need to add the canvas the voronoi diagram created to the DOM yourself:



    Currently, we support two voronoi site types: points and line segments.

    Something that is common to all site instantiation methods is that the returned value is a reference to the created site object. You can use it to dynamically change the site's properties (i.e. position in the case of a point-site or the position of the endpoints of a line-site).

    Each instantiation method will also take a color parameter, this will be the color of the rendered voronoi cell of the created site. The value passed can be either a css color string or an object {r:, g:, b:} with channel values in the interval [0, 1].

    Every site gives you read access to its unique id via (integer), its associated color site.color ({r:, g:, b:}) and its type site.type (SiteType.point or SiteType.line).


    Instantiate points like so:

    var p = voronoi.point(x, y, color);

    You may change the position of a point site:

    p.x = ...  // new x;
    p.y = ...  // new y;

    Line segments

    Instantiate a line segment like so:

    var line = voronoi.line(= {x:, y:}, b = {x:, y:}, color)

    You may change the position of the endpoints:

    // Individual axis
    line.a.x = ... // new x for endpoint A
    line.b.y = ... // new y for endpoint B
    // Simultaneously
    line.a.set(x, y);

    Removing sites

    You may remove a site from the diagram by invoking remove() in one of two ways:

    voronoi.remove(site);  // pass in the site object itself
    voronoi.remove(;  // pass in the site's ID



    Canvas resizing

    If the canvas' width or height has changed, you should call


    This will read the new size of the canvas and adjust the GL viewport and camera projection matrix accordingly.

    Site visualization

    If you wish to render simple markers visualizing where the voronoi site shapes (e.g. points or line segments) are, you can control their visibility by setting:

    voronoi.markers.visible = true;


    Under test/integration you can view some basic usage cases. A more complex demo can be seen live here.


    This software is licensed under the MIT License. See the LICENSE file for more information.


    npm i webgl-dm-voronoi

    DownloadsWeekly Downloads






    Last publish


    • rharel