JSFiddle - React, Tailwind, and code Playground

by georgie

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 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;
  }

  
  

    PIXI.SCALE_MODES.DEFAULT = PIXI.SCALE_MODES.NEAREST
    
    var renderer = PIXI.autoDetectRenderer(900, 500, { transparent : false, backgroundColor:0x000000 }, false);
    var stage = new PIXI.Container();
    
    var update = function(){
        requestAnimationFrame(update);
        renderer.render(stage)
    }
    
    var build = function(loader){
      var resources = loader.resources;
      var hull = [134, 74,169, 110,386, 110,523,245,572,198,491,120,536,75]
      var contour = verticesToContour( hull);
      var triangles = new poly2tri.SweepContext(contour).triangulate().getTriangles();
      
      triangulated = _(triangles).map(function(triangle){
           return contourToVertices(triangle.getPoints());
      }).flatten().value();

      var texture = resources.ground.texture;
      var vertices = new Float32Array(triangulated);
      var newUVS = []
      var ww = texture.width;
      var hh = texture.height;
      
    uvs = []
      for(var i = 0; i< vertices.length; i+=2){
        var x1 = (vertices[i])/ww
        var y1 = (vertices[i+1])/hh
        uvs.push(x1,y1)
      }

      uvs = new Float32Array(uvs)
      var indices = new Uint16Array(_.times(vertices.length/2, function(n){return n}));
      var mesh = new PIXI.mesh.Mesh(texture, vertices, uvs, indices, PIXI.mesh.Mesh.DRAW_MODES.TRIANGLES)
      
      mesh.x = 100;
      mesh.y = 200;
      stage.addChild(mesh);
      update();
    }

    var loader = PIXI.loader
    .add('ground','http://2vc.org/temp/pattern.png')
    .load(build)

    document.body.appendChild(renderer.view);