How to use delaunator - 10 common examples

import Delaunator from 'delaunator';

// Zipped points [x0, y0, x1, y1, ...]
const zippedPoints = [168, 180, 168, 178, 168, 179, 168, 181, 168, 183, 167, 183, 167, 184];
const zipped = new Delaunator(zippedPoints);

// Default [x, y]
const defaultPoints = [[168, 180], [168, 178], [168, 179], [168, 181], [168, 183], [167, 183], [167, 184]];
const d = Delaunator.from(defaultPoints);

// Custom getX & getY
interface CustomPoint {
    x: number;
    y: number;
}
const customPoints = [{ x: 168, y: 180 }, { x: 168, y: 178 }, { x: 168, y: 179 }, { x: 168, y: 181 }, { x: 168, y: 183 }, { x: 167, y: 183 }, { x: 167, y: 184 }];

const getX = (point: CustomPoint) => point.x;
const getY = (point: CustomPoint) => point.y;

Delaunator.from(customPoints, point => point.x, point => point.y);
Delaunator.from(customPoints, getX, getY);

// To get the coordinates of all triangles, use:
const triangles = d.triangles; // $ExpectType Uint32Array

// Default [x, y]
const defaultPoints = [[168, 180], [168, 178], [168, 179], [168, 181], [168, 183], [167, 183], [167, 184]];
const d = Delaunator.from(defaultPoints);

// Custom getX & getY
interface CustomPoint {
    x: number;
    y: number;
}
const customPoints = [{ x: 168, y: 180 }, { x: 168, y: 178 }, { x: 168, y: 179 }, { x: 168, y: 181 }, { x: 168, y: 183 }, { x: 167, y: 183 }, { x: 167, y: 184 }];

const getX = (point: CustomPoint) => point.x;
const getY = (point: CustomPoint) => point.y;

Delaunator.from(customPoints, point => point.x, point => point.y);
Delaunator.from(customPoints, getX, getY);

// To get the coordinates of all triangles, use:
const triangles = d.triangles; // $ExpectType Uint32Array
const halfedges = d.halfedges; // $ExpectType Int32Array
const hull = d.hull; // $ExpectType Uint32Array
const coords = d.coords; // $ExpectType ArrayLike | Float64Array
const coordinates: number[][][] = [];
for (let i = 0; i < triangles.length; i += 3) {
    coordinates.push([
        defaultPoints[triangles[i]],
        defaultPoints[triangles[i + 1]],
        defaultPoints[triangles[i + 2]]
    ]);
}

// Or use Delaunator.coords (but coords is a flat array in the form of [x0, y0, x1, y1, ...])

// Default [x, y]
const defaultPoints = [[168, 180], [168, 178], [168, 179], [168, 181], [168, 183], [167, 183], [167, 184]];
const d = Delaunator.from(defaultPoints);

// Custom getX & getY
interface CustomPoint {
    x: number;
    y: number;
}
const customPoints = [{ x: 168, y: 180 }, { x: 168, y: 178 }, { x: 168, y: 179 }, { x: 168, y: 181 }, { x: 168, y: 183 }, { x: 167, y: 183 }, { x: 167, y: 184 }];

const getX = (point: CustomPoint) => point.x;
const getY = (point: CustomPoint) => point.y;

Delaunator.from(customPoints, point => point.x, point => point.y);
Delaunator.from(customPoints, getX, getY);

// To get the coordinates of all triangles, use:
const triangles = d.triangles; // $ExpectType Uint32Array
const halfedges = d.halfedges; // $ExpectType Int32Array
const hull = d.hull; // $ExpectType Uint32Array
const coords = d.coords; // $ExpectType ArrayLike | Float64Array
const coordinates: number[][][] = [];
for (let i = 0; i < triangles.length; i += 3) {
    coordinates.push([
        defaultPoints[triangles[i]],
        defaultPoints[triangles[i + 1]],
        defaultPoints[triangles[i + 2]]
    ]);
}

import Delaunator from 'delaunator';

// Zipped points [x0, y0, x1, y1, ...]
const zippedPoints = [168, 180, 168, 178, 168, 179, 168, 181, 168, 183, 167, 183, 167, 184];
const zipped = new Delaunator(zippedPoints);

// Default [x, y]
const defaultPoints = [[168, 180], [168, 178], [168, 179], [168, 181], [168, 183], [167, 183], [167, 184]];
const d = Delaunator.from(defaultPoints);

// Custom getX & getY
interface CustomPoint {
    x: number;
    y: number;
}
const customPoints = [{ x: 168, y: 180 }, { x: 168, y: 178 }, { x: 168, y: 179 }, { x: 168, y: 181 }, { x: 168, y: 183 }, { x: 167, y: 183 }, { x: 167, y: 184 }];

const getX = (point: CustomPoint) => point.x;
const getY = (point: CustomPoint) => point.y;

Delaunator.from(customPoints, point => point.x, point => point.y);

const yColors = opts.yColors === 'match'
    ? xColors
    : processColorOpts(opts.yColors)

  console.log(xColors, yColors)

  const xScale = chroma.scale(xColors).mode(opts.colorSpace)
  const yScale = chroma.scale(yColors).mode(opts.colorSpace)

  // Our next step is to generate a pseudo-random grid of {x, y , z} points,
  // (or to simply utilize the points that were passed to us)
  const points = opts.points || getPoints(opts, rand)
  // window.document.body.appendChild(debugRender(opts, points))

  // Once we have the points array, run the triangulation:
  var geomIndices = Delaunator.from(points).triangles

  // And generate geometry and color data:

  // use a different randomizer for the color function so that swapping
  // out color functions, etc, doesn't change the pattern geometry itself
  const colorRand = seedrandom(opts.seed ? opts.seed + 'salt' : undefined)
  const polys = []
  for (let i = 0; i < geomIndices.length; i += 3) {
    const vertices = [
      points[geomIndices[i]],
      points[geomIndices[i + 1]],
      points[geomIndices[i + 2]]
    ]

    const {width, height} = opts
    const norm = num => Math.max(0, Math.min(1, num))

_init() {
    const d = this._delaunator, points = this.points;

    // check for collinear
    if (d.hull && d.hull.length > 2 && collinear(d)) {
      this.collinear = Int32Array.from({length: points.length/2}, (_,i) => i)
        .sort((i, j) => points[2 * i] - points[2 * j] || points[2 * i + 1] - points[2 * j + 1]); // for exact neighbors
      const e = this.collinear[0], f = this.collinear[this.collinear.length - 1],
        bounds = [ points[2 * e], points[2 * e + 1], points[2 * f], points[2 * f + 1] ],
        r = 1e-8 * Math.sqrt((bounds[3] - bounds[1])**2 + (bounds[2] - bounds[0])**2);
      for (let i = 0, n = points.length / 2; i < n; ++i) {
        const p = jitter(points[2 * i], points[2 * i + 1], r);
        points[2 * i] = p[0];
        points[2 * i + 1] = p[1];
      }
      this._delaunator = new Delaunator(points);
    } else {
      delete this.collinear;
    }

    const halfedges = this.halfedges = this._delaunator.halfedges;
    const hull = this.hull = this._delaunator.hull;
    const triangles = this.triangles = this._delaunator.triangles;
    const inedges = this.inedges.fill(-1);
    const hullIndex = this._hullIndex.fill(-1);

    // Compute an index from each point to an (arbitrary) incoming halfedge
    // Used to give the first neighbor of each point; for this reason,
    // on the hull we give priority to exterior halfedges
    for (let e = 0, n = halfedges.length; e < n; ++e) {
      const p = triangles[e % 3 === 2 ? e - 2 : e + 1];
      if (halfedges[e] === -1 || inedges[p] === -1) inedges[p] = e;

import noderesolve from "rollup-plugin-node-resolve";
import {terser} from "rollup-plugin-terser";
import * as meta from "./package.json";

const config = {
  input: "src/index.js",
  external: Object.keys(meta.dependencies || {}).filter(key => /^d3-/.test(key)),
  output: {
    file: `dist/${meta.name}.js`,
    name: "d3",
    format: "umd",
    indent: false,
    extend: true,
    banner: `// ${meta.homepage} v${meta.version} Copyright ${(new Date).getFullYear()} ${meta.author.name}
// https://github.com/mapbox/delaunator v${require("delaunator/package.json").version}. Copyright 2019 Mapbox, Inc.`,
    globals: Object.assign({}, ...Object.keys(meta.dependencies || {}).filter(key => /^d3-/.test(key)).map(key => ({[key]: "d3"})))
  },
  plugins: [
    noderesolve()
  ]
};

export default [
  config,
  {
    ...config,
    output: {
      ...config.output,
      file: `dist/${meta.name}.min.js`
    },
    plugins: [

export default function getDelaunayGraph(vertices, getX, getY) {
  const delaunay = new Delaunay(vertices, getX, getY);
  const triangles = delaunay.triangles;
  // const triangles = Delaunay.triangulate(vertices)
  const triangulationGraph = createGraph()
  vertices.forEach(v => {
    triangulationGraph.addNode(v.id, v);
  });

  for (let i = triangles.length; i;) {
    --i
    const first = vertices[triangles[i]]
    --i
    const second = vertices[triangles[i]]
    --i
    const third = vertices[triangles[i]]

    addTriangulationLink(first.id, second.id, triangulationGraph)

constructor(points) {
    this._delaunator = new Delaunator(points);
    this.inedges = new Int32Array(points.length / 2);
    this._hullIndex = new Int32Array(points.length / 2);
    this.points = this._delaunator.coords;
    this._init();
  }
  update() {

this.random = seedrandom(props.seed);
		this.poisson = new Poisson([150, 150], 100 / this.props.density, 100, 30, this.random);
		this.points = this.poisson.fill()
			.map(([x, y]) => [x - 25, y - 25])
			.filter(point => pointInPolygon(point, this.thickerX));

		const hue = this.random() * 360;
		this.hues = [
			hue,
			hue + props.hueShift,
			hue - props.hueShift,
			hue + props.hueShift * 2,
		];

		this.triangles = Delaunay.from(this.points).triangles;

		this.triangleColours = range(this.triangles.length / 3).map(i =>
			this.getColor(this.points[this.triangles[i * 3]])
		);
	}