JSFiddle - React, Tailwind, and code Playground

by scythian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.0.0-rc.2/pixi.js"></script>

JavaScript

// class definitions, copy-pasted from RopeGeometry with small changed highlighted
		// demo code below. will not tile on non-power of two textures

		class TileRopeGeometry extends PIXI.MeshGeometry {
		  constructor(width, height, points, downsample) {
		    super(
		      new Float32Array(points.length * 4),
		      new Float32Array(points.length * 4),
		      new Uint16Array((points.length - 1) * 6)
		    );

		    this.points = points;
		    this.textureWidth = width;
		    this.textureHeight = height;
		    this.downsample = downsample || 1;
		    this.build();
		  }

		  build() {
		    const points = this.points;
		    if (!points) return;
		    const vertexBuffer = this.getAttribute("aVertexPosition");
		    const uvBuffer = this.getAttribute("aTextureCoord");
		    const indexBuffer = this.getIndex();
		    // if too little points, or texture hasn't got UVs set yet just move on.
		    if (points.length < 1) {
		      return;
		    }
		    // if the number of points has changed we will need to recreate the arraybuffers
		    if (vertexBuffer.data.length / 4 !== points.length) {
		      vertexBuffer.data = new Float32Array(points.length * 4);
		      uvBuffer.data = new Float32Array(points.length * 4);
		      indexBuffer.data = new Uint16Array((points.length - 1) * 6);
		    }
		    const uvs = uvBuffer.data;
		    const indices = indexBuffer.data;
		    uvs[0] = 0;
		    uvs[1] = 0;
		    uvs[2] = 0;
		    uvs[3] = 1;

		    // added
		    let amount = 0;
		    let lastPoint = points[0];
		    const textureWidth = this.textureWidth / this.downsample;
		    // end of added

		    const total = points.length; // - 1;
		    for (let i = 0; i < total; i++) {
		      // time to do some smart drawing!
		      const index = i * 4;
		      // const amount = i / (total - 1);  // removed

		      // added
		      const point = points[i];
		      const dx = lastPoint.x - point.x;
		      const dy = lastPoint.y - point.y;
		      const dist = Math.sqrt(dx * dx + dy...