Pixi.js WebGL using spritesheet with colision physics

Rendering test with collision detection

Features

Collisions between nodes
Based on this example but enhanced to accurately model relative "mass" the rebound velocities are solved for using the equations for conservation of momentum and conservation of energy. The "efficiency" of the collisions - as defined by the ratio of the actual final velocities divided by the ideal, perfectly elastic system - is set internally.
Boundary constraints and collisions
This behaviour is also included in the gravity function and uses basic geometry to reflect the incident velocity in the plane of the boundary. It does this by using the Node velocity API to manipulate the d.px and d.py values of the nodes. It is possible, however, for nodes to penetrate the boundaries due to limitations in the temporal resolution of the layout.
Recovering escaped nodes
If a node escapes the boundaries of the bounding box, the velocity is still reflected in the plane of the penetrated boundary. If the escaped node's normal velocity component is zero then the node is steered back toward the boundary, with constant speed.

Other endering experiments with Pixi.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body {
            margin: 0;
        }
        canvas {
            border: 1px solid rgba(0,0,0,0.5);
        }
        #results, #container {
            display: inline-block;
            /*margin: 10px;*/
        }
        p {
            margin: 10px;
        }
        td {
            border: 1px solid #bbb;
            text-align: right;
        }
        .header {
            font-weight: bold;
        }
    </style>
</head>
<body>
<p id="user-agent"></p>
<div id="container"></div>
<table id="results">
    <tr class="header">
        <td>Circles</td>
        <td>FPS</td>
        <td>repaint [ms]</td>
    </tr>
</table>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.1.2/tinycolor.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/filters/shadow.js"></script>
<div id="log1"></div>
<div id="log2"></div>
<script>
    $(function (){
        var iFrame = {width: 1600, height: 840};
        d3.select(self.frameElement)
            .style({
                height: [iFrame.height,"px"].join(""),
                width: [iFrame.width,"px"].join(""),
                position: 'relative',
                left: '50%',
                transform: 'translateX(-50%)'
            });

/* global requestAnimationFrame, $, PIXI, canvg */
        window.requestAnimationFrame = (function() {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function(/* function FrameRequestCallback */ callback, /* DOMElement Element */ element) {
                    return window.setTimeout(callback, 1000/60);
                };
        })();

//        var tests = [250, 500, 750, 1000, 2000, 6000, 10000, 20000, 40000, 60000];
        var tests = [250, 500, 750, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, 10000];
//        var tests = [1000];
        var refTest = tests[0];

var maxRadius = 20,
            c20 = d3.scale.category20(),
            maxX = 1400 /*680*/,
            maxY = 800 /*400*/,
            renderer,
            dropShadow;
        //
        var x = d3.scale.linear()
                .range([0, maxX])
                .domain([maxX * 0.05, maxX * 0.95]),
            y = d3.scale.linear()
                .range([0, maxY])
                .domain([maxY * 0.05, maxY * 0.95]);

function addRecord(count) {
                var results = d3.select("#results")
                    .append("tr").selectAll("td").data([d3.format(",f")(count), "", ""])
                results.enter().append("td")
                    .text(function(d) {
                        return d
                    });

return function updateResults(time, steps) {
                    var repaint = time / steps;
                    results.datum([count, (1000 / repaint).toFixed(2), repaint.toFixed(2)])
                        .text(function(d, i) {
                            return this.textContent || d[i]
                        });
                }
            }

// set up webgl
        renderer = new PIXI.autoDetectRenderer(maxX, maxY);
        $("#container").append(renderer.view);
        renderer.backgroundColor = +("0x" + tinycolor("rgba(255,255,255,0)").toHex());

dropShadow = new PIXI.filters.DropShadowFilter();
        dropShadow.color = "0x" + tinycolor("steelblue").toHex();
        dropShadow.angle = Math.PI/4;
        dropShadow.blur = 4;
        dropShadow.distance = 5;

function test() {
            // get the next sample count
            if (tests.length > 0) {
                count = tests.shift();
            } else {
                return;
            }

var count,
                maxSteps = 100,
                steps = 0,
                stage = new PIXI.Container(),
                nodes = new PIXI.Container(),
                startTime,
                v = 10,
                constraints = new PIXI.Graphics(),
                data = [],

// prepare next table row
                updateResults = addRecord(count),

// prepare the sprite sheet
                r = Math.pow(1.2, -(count - refTest) / refTest) * (1 - 1/4) + 1/4,
                spriteSheet = filters.makeSpriteSheet((maxRadius * r).toFixed(), d3.range(20).map(c20));

stage.filters = [dropShadow];
            // define the containing rectangle
            constraints.lineStyle(1, 0, 0.5)
                .drawRect(x.invert(0), y.invert(0), (x.invert(maxX) - x.invert(0)), y.invert(maxY) - y.invert(0));

// prepare the data and bind it to the sprites
            d3.range(count).forEach(function(i){
                var rMax = maxRadius * r,
                    vx = (Math.random() - 0.5) * v * 2,
                    species = Math.random(),
                    s = species + 0.5,
                    radius = rMax * s,
                    circle = new PIXI.Sprite(spriteSheet(Math.round(species * 19)));
                data.push({
                    x: x.invert(rMax + (maxX - rMax*2) * Math.random()),
                    y: y.invert(rMax + (maxY - rMax*2) * Math.random()),
                    r: radius,
                    m: Math.pow(radius, 3),
                    vx: vx,
                    vy: Math.sqrt(v*v - vx*vx)*(Math.random() >= 0.5 ? 1 : -1)/*(Math.random() - 0.5) * v*/,
                    ax: a("vx"),
                    ay: a("vy"),
                    index: i
                });
                function a(w) {
                    var prev = 0;
                    return function a() {
                        var ret = this[w] - prev;
                        return (prev = this[w], ret)
                    }
                }
                circle.data = data[i];
                circle.scale.set(s);
                circle.anchor.set(0.5);
                circle.interactive = true;
                circle
                    .on("mouseover", onMouseOver)
                    .on("mouseout", onMouseOut)
                    // events for drag start
                    .on('mousedown', onDragStart)
                    .on('touchstart', onDragStart)
                    // events for drag end
                    .on('mouseup', onDragEnd)
                    .on('mouseupoutside', onDragEnd)
                    .on('touchend', onDragEnd)
                    .on('touchendoutside', onDragEnd)
                    // events for drag move
                    .on('mousemove', onDragMove)
                    .on('touchmove', onDragMove);
                nodes.addChild(circle);
            });
            stage.addChild(nodes);
            stage.children.lastActive = stage.children.length - 1;
            stage.addChild(constraints);

// Start animation.
            startTime = new Date().getTime();
            requestAnimationFrame(step);
            function step() {
                var time, moreThan,
                    collision = collide(data, 0.05,.99);
                nodes.children.forEach(function(c){
                    if(!c.data) return;
                    if(!c.data.fixed){

// resolve collisions
                        collision(c.data);

// check for boundary collisions and reverse velocity if necessary
                        if ((moreThan = x(c.data.x) >= (maxX - c.data.r)) ||x(c.data.x) <= c.data.r){
                            // if the object is outside the boundaries
                            //   manage the sign of its x velocity component to ensure it is moving back into the bounds
                            if(~~c.data.vx) c.data.vx *= moreThan && c.data.vx > 0 || !moreThan && c.data.vx < 0 ? -1 : 1;
                            //   if vx is too small, then steer it back in
                            else c.data.vx = ~~c.data.vy * (moreThan ? -1 : 1)

}
                        if ((moreThan = y(c.data.y) >= (maxY - c.data.r)) || y(c.data.y) <= c.data.r){
                            if(~~c.data.vy) c.data.vy *= moreThan && c.data.vy > 0 || !moreThan && c.data.vy < 0 ? -1 : 1;
                            else c.data.vy = ~~c.data.vx * (moreThan ? -1 : 1)
                        }

// move the nodes according to their velocity
                        c.data.x += c.data.vx;
                        c.data.y += c.data.vy;
                        // update the sprite attributes
                        c.position.x = c.data.x;
                        c.position.y = c.data.y;
                    } else {
                        // update the data to reflect the moved to position
                        c.data.x = c.position.x;
                        c.data.y = c.position.y;
                    }
                });
                renderer.render(stage);
//                renderer.clearBeforeRender = false;
//                renderer.render(background);
                renderer.clearBeforeRender = true;

if (steps < maxSteps) {
                    steps++;
                    requestAnimationFrame(step);
                } else {
                    time = new Date().getTime() - startTime;
                    updateResults(time, maxSteps);
                    test();
                }
            }
            function onMouseOver(event) {
                this.data.fixed |= 4;
                console.log([myName(arguments), this.index].join(": "))
                this.data.x = this.position.x -= this.data.vx;
                this.data.y = this.position.y -= this.data.vy;
                bringToFront.call(stage.children, this);
            }
            function bringToFront(c){
                var i = this.lastActive;
                this.splice(c.data.index, 1);
                this.splice(i, 0, (c.data.index = i, c))
//                this.push(c);
                this.forEach(function(d, i) {if(d.data) d.data.index = i});
            }
            function onMouseOut(event) {
                console.log(["\t", myName(arguments), this.index].join(": "))
                this.data.fixed &= ~4;
            }
            function onDragStart(event) {
                console.log([myName(arguments), this.index].join(": "))
                // store a reference to the data
                // the reason for this is because of multitouch
                // we want to track the movement of this particular touch
                this.eventData = event.data;
                this.alpha = 0.5;
                this.data.fixed  |= 2;
            }

function onDragEnd() {
                console.log(["\t", myName(arguments), this.index].join(": "))
                this.alpha = 1;
                this.data.fixed &= ~6;
                // set the interaction data to null
                this.eventData = null;
            }

// collision detection
        // physically accurate: cons of energy and momentum
        function collide(data, alpha, eff) {
            var quadtree = Math.random()>0 && d3.geom.quadtree(data) || null;
            return quadtree ? function(d) {
                var d_r = d.r, d_x = d.x, d_y = d.y,
                    nx1 = d_x - d_r,
                    nx2 = d_x + d_r,
                    ny1 = d_y - d_r,
                    ny2 = d_y + d_r;
                quadtree.visit(function(quad, x1, y1, x2, y2) {
                    var possible = !(x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1);
                    var q = quad.point;
                    if (q && (q !== d) && possible) {
                        var x = d_x - q.x,
                            y = d_y - q.y,
                            l = Math.sqrt(x * x + y * y),
                            r = d_r + q.r;
                        if (l < r) {
                            var m = d.m,
                                mq = q.m,
                                mT = m + mq,
                                mr = m/mT, mqr = mq/mT;

bounce(d,q,x,y, m,mq);

l = (l - r) / l * (1/2 + alpha);
                            d.x -= (x *= l)*mqr;
                            d.y -= (y *= l)*mqr;
                            q.x += x*mr;
                            q.y += y*mr;

}
                    }
                    return !possible;
                });
                function bounce(d, q,x,y,m,mq){
                    // Note: confirmed that lookup tables for sin and cos are an order of magnitude slower
                    var collision_angle = Math.atan2(y, x),
                        magnitude_d = Math.sqrt(d.vx*d.vx+d.vy*d.vy),
                        magnitude_q = Math.sqrt(q.vx*q.vx+q.vy*q.vy),
                        direction_d = Math.atan2(d.vy, d.vx),
                        direction_q = Math.atan2(q.vy, q.vx),
                        new_vx_d = magnitude_d*Math.cos(direction_d-collision_angle)*eff,
                        new_vy_d = magnitude_d*Math.sin(direction_d-collision_angle)*eff,
                        new_vx_q = magnitude_q*Math.cos(direction_q-collision_angle)*eff,
                        new_vy_q = magnitude_q*Math.sin(direction_q-collision_angle)*eff,
                        final_vx_d = ((m-mq)*new_vx_d+(mq+mq)*new_vx_q)/(m+mq),
                        final_vx_q = ((m+m)*new_vx_d+(mq-m)*new_vx_q)/(m+mq),
                        final_vy_d = new_vy_d,
                        final_vy_q = new_vy_q,
                        cos_collision_angle=Math.cos(collision_angle),
                        sin_collision_angle=Math.sin(collision_angle),
                        cos_collision_angle_plus_90=Math.cos(collision_angle+Math.PI/2),
                        sin_collision_angle_plus_90=Math.sin(collision_angle+Math.PI/2);

d.vx = cos_collision_angle*final_vx_d+cos_collision_angle_plus_90*final_vy_d;
                    d.vy = sin_collision_angle*final_vx_d+sin_collision_angle_plus_90*final_vy_d;
                    q.vx = cos_collision_angle*final_vx_q+cos_collision_angle_plus_90*final_vy_q;
                    q.vy = sin_collision_angle*final_vx_q+sin_collision_angle_plus_90*final_vy_q;
                }
            } : function(){};
        };

function myName(args) {
            return /function\s+(\w*)\(/.exec(args.callee)[1];
        }

})
</script>
</body>
</html>

Updated missing url https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/filters/shadow.js to https://cdn.jsdelivr.net/gh/repo/cool-blue/d3-lib/filters/shadow.js

https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/pixi.js/3.0.7/pixi.js

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.1.2/tinycolor.min.js

https://gitcdn.xyz/repo/cool-Blue/d3-lib/master/filters/shadow.js