Convert Figma logo to code with AI

mapbox logodelaunator

An incredibly fast JavaScript library for Delaunay triangulation of 2D points

2,458
149
2,458
4

Top Related Projects

A Javascript implementation of Fortune's algorithm to compute Voronoi cells

2,314

The fastest and smallest JavaScript polygon triangulation library for your WebGL apps

Quick Overview

Delaunator is a fast and lightweight JavaScript library for Delaunay triangulation of 2D points. It efficiently computes triangulations for large sets of points, making it suitable for various applications such as computational geometry, computer graphics, and geographic information systems.

Pros

  • Extremely fast performance, especially for large datasets
  • Lightweight with no dependencies
  • Works in both Node.js and browser environments
  • Well-documented API with clear usage instructions

Cons

  • Limited to 2D point sets only
  • Does not provide advanced features like constrained triangulation
  • No built-in visualization tools
  • Requires additional processing for certain applications (e.g., Voronoi diagrams)

Code Examples

Creating a Delaunay triangulation:

import Delaunator from 'delaunator';

const points = [[0, 0], [1, 0], [1, 1], [0, 1], [0.5, 0.5]];
const delaunay = new Delaunator(points.flat());

Iterating through triangles:

for (let i = 0; i < delaunay.triangles.length; i += 3) {
    const triangle = [
        delaunay.triangles[i],
        delaunay.triangles[i + 1],
        delaunay.triangles[i + 2]
    ];
    console.log('Triangle:', triangle);
}

Finding adjacent triangles:

function getAdjacentTriangles(delaunay, triangleIndex) {
    return [
        delaunay.halfedges[triangleIndex * 3],
        delaunay.halfedges[triangleIndex * 3 + 1],
        delaunay.halfedges[triangleIndex * 3 + 2]
    ].map(h => Math.floor(h / 3));
}

const adjacentTriangles = getAdjacentTriangles(delaunay, 0);
console.log('Adjacent triangles:', adjacentTriangles);

Getting Started

To use Delaunator in your project, follow these steps:

  1. Install the library:

    npm install delaunator
    
  2. Import and use in your JavaScript code:

    import Delaunator from 'delaunator';
    
    const points = [[0, 0], [1, 0], [1, 1], [0, 1], [0.5, 0.5]];
    const delaunay = new Delaunator(points.flat());
    
    console.log('Triangles:', delaunay.triangles);
    console.log('Halfedges:', delaunay.halfedges);
    

This will create a Delaunay triangulation for the given points and output the resulting triangles and halfedges.

Competitor Comparisons

A Javascript implementation of Fortune's algorithm to compute Voronoi cells

Pros of Javascript-Voronoi

  • Implements full Voronoi diagram computation, not just Delaunay triangulation
  • Provides more advanced features like edge clipping and relaxation
  • Has been around longer, potentially more stable and well-tested

Cons of Javascript-Voronoi

  • Less actively maintained (last update in 2013)
  • Slower performance for large datasets compared to Delaunator
  • More complex API, potentially harder to integrate into projects

Code Comparison

Javascript-Voronoi:

var voronoi = new Voronoi();
var bbox = {xl: 0, xr: 800, yt: 0, yb: 600};
var sites = [{x: 200, y: 200}, {x: 50, y: 250}, {x: 400, y: 100}];
var diagram = voronoi.compute(sites, bbox);

Delaunator:

const points = [[200, 200], [50, 250], [400, 100]];
const delaunay = Delaunator.from(points);
const triangles = delaunay.triangles;

The code snippets demonstrate the basic usage of both libraries. Javascript-Voronoi requires more setup but provides a complete Voronoi diagram, while Delaunator offers a simpler API focused on Delaunay triangulation. Delaunator's approach is more performant but less feature-rich compared to Javascript-Voronoi.

2,314

The fastest and smallest JavaScript polygon triangulation library for your WebGL apps

Pros of Earcut

  • Specialized for polygon triangulation, optimized for this specific use case
  • Supports holes in polygons, making it versatile for complex shapes
  • Extremely fast performance for polygon triangulation tasks

Cons of Earcut

  • Limited to 2D polygon triangulation only
  • May produce less optimal triangulations for certain complex shapes
  • Requires pre-processing of input data for non-trivial polygons

Code Comparison

Earcut:

const triangles = earcut([10,0, 0,50, 60,60, 70,10]);

Delaunator:

const points = [[10,0], [0,50], [60,60], [70,10]];
const delaunay = Delaunator.from(points);

Key Differences

  • Earcut is specifically designed for polygon triangulation, while Delaunator is a more general-purpose Delaunay triangulation library
  • Delaunator works with point sets in any dimension, whereas Earcut is limited to 2D polygons
  • Earcut directly outputs triangle indices, while Delaunator provides a Delaunay triangulation structure with additional features

Use Cases

  • Choose Earcut for efficient 2D polygon triangulation, especially with holes
  • Opt for Delaunator for point set triangulation, Voronoi diagram generation, or when working in higher dimensions

Both libraries are maintained by Mapbox and offer high-performance triangulation solutions, but they cater to different specific needs within the realm of computational geometry.

Convert Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Delaunator CI

An incredibly fast and robust JavaScript library for Delaunay triangulation of 2D points.

Delaunay triangulation example

Projects based on Delaunator

  • d3-delaunay for Voronoi diagrams, search, traversal and rendering (a part of D3).
  • d3-geo-voronoi for Delaunay triangulations and Voronoi diagrams on a sphere (e.g. for geographic locations).

Example

const coords = [377,479,  453,434,  326,387,  444,359,  511,389,
                586,429,  470,315,  622,493,  627,367,  570,314];
const delaunay = new Delaunator(coords);
console.log(delaunay.triangles);
// [4,3,1,  4,6,3,  1,5,4,  4,9,6,  2,0,1,  1,7,5,
//  5,9,4,  6,2,3,  3,2,1,  5,8,9,  0,7,1,  5,7,8]
Delaunay triangulation example with labeled points

Install

Install with NPM (npm install delaunator) or Yarn (yarn add delaunator), then import as an ES module:

import Delaunator from 'delaunator';

To use as a module in a browser:

<script type="module">
    import Delaunator from 'https://cdn.skypack.dev/delaunator@5.0.0';
</script>

Or use a browser UMD build that exposes a Delaunator global variable:

<script src="https://unpkg.com/delaunator@5.0.0/delaunator.min.js"></script>

API Reference

new Delaunator(coords)

Constructs a delaunay triangulation object given an array of point coordinates of the form: [x0, y0, x1, y1, ...] (use a typed array for best performance).

Delaunator.from(points[, getX, getY])

Constructs a delaunay triangulation object given an array of points ([x, y] by default). getX and getY are optional functions of the form (point) => value for custom point formats. Duplicate points are skipped.

delaunay.triangles

A Uint32Array array of triangle vertex indices (each group of three numbers forms a triangle). All triangles are directed counterclockwise.

To get the coordinates of all triangles when using Delaunator.from(points), use:

for (let i = 0; i < triangles.length; i += 3) {
    coordinates.push([
        points[triangles[i]],
        points[triangles[i + 1]],
        points[triangles[i + 2]]
    ]);
}

To get the coordinates of all triangles when using new Delaunator(coords), use:

for (let i = 0; i < triangles.length; i += 3) {
    coordinates.push([
        [coords[2 * triangles[i]],     coords[2 * triangles[i] + 1]],
        [coords[2 * triangles[i + 1]], coords[2 * triangles[i + 1] + 1]],
        [coords[2 * triangles[i + 2]], coords[2 * triangles[i + 2] + 1]]
    ]);
}

delaunay.halfedges

A Int32Array array of triangle half-edge indices that allows you to traverse the triangulation. i-th half-edge in the array corresponds to vertex triangles[i] the half-edge is coming from. halfedges[i] is the index of a twin half-edge in an adjacent triangle (or -1 for outer half-edges on the convex hull).

The flat array-based data structures might be counterintuitive, but they're one of the key reasons this library is fast.

delaunay.hull

A Uint32Array array of indices that reference points on the convex hull of the input data, counter-clockwise.

delaunay.coords

An array of input coordinates in the form [x0, y0, x1, y1, ....], of the type provided in the constructor (or Float64Array if you used Delaunator.from).

delaunay.update()

Updates the triangulation if you modified delaunay.coords values in place, avoiding expensive memory allocations. Useful for iterative relaxation algorithms such as Lloyd's.

Performance

Benchmark results against other Delaunay JS libraries (npm run bench on Macbook Pro Retina 15" 2017, Node v10.10.0):

 uniform 100kgauss 100kgrid 100kdegen 100kuniform 1 milliongauss 1 milliongrid 1 milliondegen 1 million
delaunator82ms61ms66ms25ms1.07s950ms830ms278ms
faster‑delaunay473ms411ms272ms68ms4.27s4.62s4.3s810ms
incremental‑delaunay547ms505ms172ms528ms5.9s6.08s2.11s6.09s
d3‑voronoi972ms909ms358ms720ms15.04s13.86s5.55s11.13s
delaunay‑fast3.8s4s12.57stimeout132s138s399stimeout
delaunay4.85s5.73s15.05stimeout156s178s326stimeout
delaunay‑triangulate2.24s2.04sOOM1.51sOOMOOMOOMOOM
cdt2d45s51s118s17stimeouttimeouttimeouttimeout

Papers

The algorithm is based on ideas from the following papers:

Robustness

Delaunator should produce valid output even on highly degenerate input. It does so by depending on robust-predicates, a modern port of Jonathan Shewchuk's robust geometric predicates, an industry standard in computational geometry.

Ports to other languages

NPM DownloadsLast 30 Days