// noprotect

​

setTimeout(function() {

    // Make an instance of two and place it on the page.

    var elem = document.body;

    var params = { width: window.innerWidth, height: window.innerHeight };

​

    //Create the renderer

    var renderer = PIXI.autoDetectRenderer(window.innerWidth, window.innerHeight, {resolution: 2});

    renderer.view.style.width = window.innerWidth + 'px';

    renderer.view.style.height = window.innerHeight + 'px';

​

    //Add the canvas to the HTML document

    document.body.appendChild(renderer.view);

​

    //Create a container object called the `stage`

    var stage = new PIXI.Container();

​

    var n = 3000;

    var balls = [];

​

    for (var i = 0; i < n; i++) {

​

        var circle = new PIXI.Graphics();

        circle.beginFill(0x9966FF);

        circle.lineStyle(5, 0x000000);

        circle.drawCircle(0, 0, 50);

        circle.endFill();

        circle.x = 0;

        circle.y = 0;

        stage.addChild(circle);

​

        balls.push({

            x: Math.random() * window.innerWidth,

            y: Math.random() * window.innerHeight,

            v: 1,

            a: Math.random() * 2 * Math.PI,

            element: circle,

        });

    }

​

    function move() {

        for(b in balls) {

            var ball = balls[b];

            ball.x += ball.v * Math.cos(ball.a);

            ball.y += ball.v * Math.sin(ball.a);

            ball.a += 0.03;

            ball.element.x = ball.x;

            ball.element.y = ball.y;

        }

​

        //Tell the `renderer` to `render` the `stage`

        renderer.render(stage);

​

        window.requestAnimationFrame(move); //

    }

​

    move();

}, 1000);

​