JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.min.js"></script>
JavaScript
let render_options = {
resolution: window.devicePixelRatio,
backgroundColor: 0xFFFFFF,
};
var renderer = PIXI.autoDetectRenderer(500, 400, render_options);
var stage = new PIXI.Stage();
document.body.appendChild(renderer.view);
let pos = [10,15,19,22,27,33,37, 40, 45];
let rects = [];
pos.forEach(function(x)
{
let rect1 = new PIXI.Sprite(PIXI.Texture.WHITE);
rect1.width = 1;
rect1.height = 100;
rect1.x = x;
rect1.y = 10;
rect1.tint = 0xFF0000;
rects.push(rect1);
stage.addChild(rect1);
});
renderer.render(stage);
function step(timestamp)
{
rects.forEach(function(rect)
{
rect.x++;
if (rect.x >= 500)
rect.x =0;
});
renderer.render(stage);
window.requestAnimationFrame(step);
}
window.requestAnimationFrame(step);