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

//Using method rope cannot be longer than a texture it is created from
const onload = (loader, resources) => {
  const texture = resources.rope.texture;
  const margin = (600 - texture.width) * 0.5; // left margin
  const top = texture.height; // rope top offset
  const total = texture.width; // number of points in the rope, high quality
  const range = [...Array(total).keys()];
  const points = range.map(p => new PIXI.Point(0, 0));

  // here we have to create a longer texture using RenderTexture if required
  // reference sprite with our texture
  const sprite = new PIXI.Sprite(texture); 
  sprite.position.set(margin, 0);
  sprite.scale.set(0.5, 0.5); // downsample twice, hides artifacts on the rope
  app.stage.addChild(sprite);

	// calculate texture frame
  const len = 300; // required rope length in pixels, cannot be longer than texture used = 512px
  const s = len / texture.width;
  const w = s * texture.width;
  const h = texture.height;
  const distance = (s * texture.width) / total; // this is to get the distance between points

  // cut the texture used to rope length
  const frame = new PIXI.Rectangle(0, 0, w, h);
  const t = new PIXI.Texture(texture, frame);

  // rope that is cut to the point
  const goodRope = new PIXI.SimpleRope(t, points);
  const c1 = new PIXI.Container(); // create a parent container to scale rope down
  c1.position.set(margin, top);
  c1.scale.set(0.5, 0.5);
  c1.addChild(goodRope);
  app.stage.addChild(c1);

  // rope that is distorted instead
  const badRope = new PIXI.SimpleRope(texture, points);
  const c2 = new PIXI.Container(); // create a parent container to scale rope down
  c2.position.set(margin, top * 2);
  c2.scale.set(0.5, 0.5);
  c2.addChild(badRope);
  app.stage.addChild(c2);

  // animation: update points
  let phase = 0;
  const height = texture.height * 0.1; // height of sine wave, set to zero to get a straight line
  const update = () => {
    phase += Math.PI * PIXI.Ticker.shared.deltaMS * 0.001; // pi per...