Need private packages and team management tools?Check out npm Orgs. »


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


  • avatar
Report a vulnerability