Marching Ants

by roomyrooms

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.2/pixi.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/pixi-filters@latest/dist/pixi-filters.js"></script>

JavaScript

var stage = new PIXI.Container();

var renderer = PIXI.autoDetectRenderer(512,512);
renderer.roundPixels = true;
PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.NEAREST;

var chainBase = new PIXI.BaseTexture('https://i.ibb.co/k1wdfcw/bindingchains.png');
var chainTex = new PIXI.Texture(chainBase);
chainTex.width = 512
var chainSprite = new PIXI.Sprite(chainTex);

var chainPoints = []
var total = 0
for (var x = 0; x <= 360; x+=50) {
	var ang = x * (Math.PI/180);
  var baseX = 128
  var baseY = 128
  total++
	chainPoints.push(new PIXI.Point(baseX+Math.cos(ang)*128, baseY+Math.sin(ang)*128))
}
console.log(total * 24)
var chainRope = new PIXI.SimpleRope(chainTex, chainPoints, 1)

stage.addChild(chainRope)
//stage.addChild(chainSprite);

document.body.appendChild(renderer.view);
animate();
function animate() {
	chainRope.texture.frame.x -= 2;
  chainRope.texture.updateUvs();
  requestAnimationFrame(animate);
  renderer.render(stage);
}