js:pixi

app.js

var app = new PIXI.Application(innerWidth, innerHeight, { backgroundColor: 0x1099bb, antialias: true });
document.getElementById("myContainer").appendChild(app.view);

var container = new PIXI.Container();
var graphics = new PIXI.Container();
app.stage.addChild(graphics);



/*
 * All the bunnies are added to the container with the addChild method
 * when you do this, all the bunnies become children of the container, and when a container moves,
 * so do all its children.
 * This gives you a lot of flexibility and makes it easier to position elements on the screen
 */

let a = 0;
while (a < 3003) {
    // addParticle();
    addGraph();
    a++
}

app.ticker.add(function() {
    settings.setValue("FPS", ~~app.ticker.FPS);
    for (var i = 0; i < graphics.children.length; i++) {
        // let bu = container.children[i];
        let o = graphics.children[i];
        for (var a = 0; a < debug.slowmo; a++) {
            o.x += o.vx;
            o.y += o.vy;
     
        }


    }

});

app.renderer.render(container);

function r2D() {
    let angle = Math.random() * 360;
    let l = 1 + Math.random() * 2;
    let x = Math.cos(angle) * l;
    let y = Math.sin(angle) * l;
    return [x, y];
}

function addParticle(x, y) {
    var texture = PIXI.Texture.fromImage(`/assets/${Math.floor(Math.random()*17)}.png`);

    var bunny = new PIXI.Sprite(texture);
    bunny.anchor.set(.5);
    bunny.poses = [];
    bunny.x = x || app.renderer.width * .5;
    bunny.y = y || app.renderer.height * .5;
    bunny.step = (Math.random() * 5);
    bunny.rotation = ~~(Math.random() * 360);
    bunny.angle = Math.random() * 360;
    bunny.mag = Math.random() * 2;
    bunny.vx = Math.cos(bunny.angle) * bunny.mag;
    bunny.vy = Math.sin(bunny.angle) * bunny.mag;
    bunny.rotation = Math.random() * (Math.PI * 2)
    container.addChild(bunny);
}

function addGraph() {
    var shape = new PIXI.Graphics();

    shape.lineStyle(0);
    shape.beginFill(0xFFFF0B);
    shape.drawCircle(Math.random() * app.renderer.width, Math.random() * app.renderer.height, 10);
    shape.angle = Math.random() * 360;
    shape.mag = Math.random() * 2;
    shape.vx = Math.cos(shape.angle) * shape.mag;
    shape.vy = Math.sin(shape.angle) * shape.mag;
    shape.endFill();
    for (var a = 0; a < 10000; a++) {}
    graphics.addChild(shape);

}