JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.6.0/pixi.min.js"></script>
JavaScript
var w = 400;
var h = 400;
var app = new PIXI.Application(w, h, {backgroundColor: 0x000000});
document.body.appendChild(app.view);
var starts = 1000;
var sprites = new PIXI.particles.ParticleContainer(starts+1, {
scale: true,
position: true,
rotation: true,
uvs: true,
alpha: true
});
app.stage.addChild(sprites);
var maggots = [];
var totalSprites = starts/*app.renderer instanceof PIXI.WebGLRenderer ? starts : 1*/;
var d = 1.7;
var zIndexes = [];
for (var i = 0; i < totalSprites; i++) {
zIndexes.push(Math.random() * 10);
}
zIndexes = zIndexes.sort(function(x, y){ return y - x; });
var spawn = function(zIndex, _add){
var dude = PIXI.Sprite.fromImage('http://pixijs.io/examples/required/assets/basics/bunny.png');
dude.tint = Math.random() * 0xE8D4CD;
dude.anchor.set(0.5);
var rndmX = Math.floor(Math.random() * ((app.renderer.width)+1)) - (app.renderer.width / 2);
var rndmY = Math.floor(Math.random() * ((app.renderer.height)+1)) - (app.renderer.height / 2);
dude.zOffset = zIndex;
dude.xOffset = rndmX;
dude.yOffset = rndmY;
var projScaleX = 1 / (dude.zOffset+d);
dude.scale.set(projScaleX);
var projPositionX = (dude.xOffset * (d / (dude.zOffset+d))) + (app.screen.width / 2);
dude.x = projPositionX;
var projPositionY = (dude.yOffset * (d / (dude.zOffset+d))) + ( app.screen.height / 2);
dude.y = projPositionY;
//dude.speed = (2 + Math.random() * 2) * 0.2;
maggots.push(dude);
if(_add){
sprites.addChildAt(dude, 0);
console.log(sprites.children.length);
}else{
sprites.addChild(dude);
}
}
for (var i = 0; i < zIndexes.length; i++) {
spawn(zIndexes[i]);
}
app.ticker.add(function (delta) {
var maggotsClone = maggots.slice(0);
for (var i = 0; i < maggotsClone.length; i++) {
var dude = maggotsClone[i];
dude.zOffset -= 0.01;
var projScaleX = 1 /...