Skip to main content

Particle Container

import * as PIXI from 'pixi.js';

const app = new PIXI.Application({ resizeTo: window });

document.body.appendChild(app.view);

const sprites = new PIXI.ParticleContainer(10000, {
scale: true,
position: true,
rotation: true,
uvs: true,
alpha: true,
});

app.stage.addChild(sprites);

// create an array to store all the sprites
const maggots = [];

const totalSprites = app.renderer instanceof PIXI.Renderer ? 10000 : 100;

for (let i = 0; i < totalSprites; i++)
{
// create a new Sprite
const dude = PIXI.Sprite.from('https://pixijs.com/assets/maggot_tiny.png');

// set the anchor point so the texture is centerd on the sprite
dude.anchor.set(0.5);

// different maggots, different sizes
dude.scale.set(0.8 + Math.random() * 0.3);

// scatter them all
dude.x = Math.random() * app.screen.width;
dude.y = Math.random() * app.screen.height;

dude.tint = Math.random() * 0x808080;

// create a random direction in radians
dude.direction = Math.random() * Math.PI * 2;

// this number will be used to modify the direction of the sprite over time
dude.turningSpeed = Math.random() - 0.8;

// create a random speed between 0 - 2, and these maggots are slooww
dude.speed = (2 + Math.random() * 2) * 0.2;

dude.offset = Math.random() * 100;

// finally we push the dude into the maggots array so it it can be easily accessed later
maggots.push(dude);

sprites.addChild(dude);
}

// create a bounding box box for the little maggots
const dudeBoundsPadding = 100;
const dudeBounds = new PIXI.Rectangle(
-dudeBoundsPadding,
-dudeBoundsPadding,
app.screen.width + dudeBoundsPadding * 2,
app.screen.height + dudeBoundsPadding * 2,
);

let tick = 0;

app.ticker.add(() =>
{
// iterate through the sprites and update their position
for (let i = 0; i < maggots.length; i++)
{
const dude = maggots[i];

dude.scale.y = 0.95 + Math.sin(tick + dude.offset) * 0.05;
dude.direction += dude.turningSpeed * 0.01;
dude.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y);
dude.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y);
dude.rotation = -dude.direction + Math.PI;

// wrap the maggots
if (dude.x < dudeBounds.x)
{
dude.x += dudeBounds.width;
}
else if (dude.x > dudeBounds.x + dudeBounds.width)
{
dude.x -= dudeBounds.width;
}

if (dude.y < dudeBounds.y)
{
dude.y += dudeBounds.height;
}
else if (dude.y > dudeBounds.y + dudeBounds.height)
{
dude.y -= dudeBounds.height;
}
}

// increment the ticker
tick += 0.1;
});