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.

Installation

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>

Usage

Create

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:

document.appendChild(voronoi.canvas);

Populate

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 site.id (integer), its associated color site.color ({r:, g:, b:}) and its type site.type (SiteType.point or SiteType.line).

Points

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(a = {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(site.id);  // pass in the site's ID

Render

voronoi.render();

Canvas resizing

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

voronoi.resize()

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;

Demo

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

License

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