JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://rawgit.com/r3mi/poly2tri.js/master/dist/poly2tri.js"></script>
<script src="https://rawgit.com/lodash/lodash/master/lodash.js"></script>
<script src="https://rawgit.com/GoodBoyDigital/pixi.js/master/bin/pixi.js"></script>
JavaScript
var TriangleGraphic = function(vertices, color){
PIXI.Container.constructor.call(this);
var color = color || 0xff0000;
var graphics = new PIXI.Graphics();
this.addChild(graphics);
graphics.lineStyle(1, color)
graphics.moveTo(vertices[0], vertices[0+1])
for(var k =0; k < vertices.length;k+=2){
graphics.lineTo(vertices[k], vertices[k+1])
}
graphics.lineTo(vertices[0], vertices[0+1])
}
TriangleGraphic.prototype = new PIXI.Container();
TriangleGraphic.prototype.constructor = TriangleGraphic;
var PolygonGraphic = function(vertices, color){
PIXI.Container.constructor.call(this);
var color = color || 0xff0000;
var graphics = new PIXI.Graphics();
this.addChild(graphics);
graphics.lineStyle(1, color)
graphics.drawPolygon(vertices)
graphics.lineTo(vertices[0], vertices[1]);
}
PolygonGraphic.prototype = new PIXI.Container();
PolygonGraphic.prototype.constructor = PolygonGraphic;
var verticesToContour = function(list){
var results = [];
for(var i = 0; i < list.length; i+=2){
results.push({x:list[i], y:list[i+1]})
}
return results;
}
var contourToVertices = function(list){
var results = [];
for(var i = 0; i < list.length; i++){
results.push(list[i].x, list[i].y)
}
return results;
}
var polygonData = [
{
"density": 0, "friction": 0, "bounce": 0,
"filter": { "categoryBits": 1, "maskBits": 65535 },
"shape": [ 491, 191 , 386, 202 , 523, 66 , 572, 113 ]
} ,
{
"density": 0, "friction": 0, "bounce": 0,
"filter": { "categoryBits": 1, "maskBits": 65535 },
"shape": [ 536, 236 , 134, 237 , 491, 191 ]
} ,
{
"density": 0, "friction": 0, "bounce": 0,
"filter": { "categoryBits": 1, "maskBits": 65535 },
"shape":...