PolygonTools - Triangulate

https://www.npmjs.com/package/polygon-tools

by timknip

HTML

<script src="https://fpcdn.s3.amazonaws.com/apps/polygon-tools/0.4.0/polygon-tools.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>

JavaScript

var stage = new PIXI.Container();
var renderer = PIXI.autoDetectRenderer(500, 500);

document.body.appendChild(renderer.view);

const POLYGONS = [
        [
                [1.75,1.91],
                [9.33,1.91],
                [9.23,1.81],
                [1.85,1.81]
        ],
        [
                [1.85,7.42],
                [1.85,1.81],
                [1.75,1.91],
                [1.75,7.32]
        ],
        [
                [9.23,1.81],
                [9.23,7.42],
                [9.33,7.32],
                [9.33,1.91]
        ],
        [
                [9.33,7.32],
                [1.75,7.32],
                [1.85,7.42],
                [9.23,7.42]
        ]
];

const POLYGON = [
	[0, 0],
  [100, 0],
  [100, 100],
  [0, 100]
];

const HOLE = [
  [50, 50],
  [150, 50],
  [150, 150],
  [50, 150]
]

function randomColor () {
  let r = Math.round(Math.random() * 0xff),
      g = Math.round(Math.random() * 0xff),
      b = Math.round(Math.random() * 0xff);
  return r << 16 | g << 8 | b;
}


let triangles = PolygonTools.polygon.triangulate(POLYGONS[0], []);

var paths = triangles.map(triangle => {
    return triangle.reduce((p, pt) => {
      return p.concat(pt.map(p => p));
    }, []);
  });
  
var g = new PIXI.Graphics();
paths.forEach(path => {
  g.beginFill(randomColor());
  g.drawPolygon(path);
});
  
stage.addChild(g);

renderer.render(stage);