PhysicsJS - A modular, extendable, and easy-to-use physics engine for javascript

v0.7.0 (beta)
Download
GitHub
MIT License

//
// PhysicsJS
// A modular, extendable, and easy-to-use physics engine for javascript
//
// Use the select box in the top right to see more examples!
//
Physics(function (world) {

// bounds of the window
    var viewportBounds = Physics.aabb(0, 0, window.innerWidth, window.innerHeight)
    ,width = window.innerWidth
    ,height = window.innerHeight
    ,renderer
    ;

// let's use the pixi renderer
    require(['vendor/pixi'], function( PIXI ){
        window.PIXI = PIXI;
        // create a renderer
        renderer = Physics.renderer('pixi', {
            el: 'viewport'
        });

// add the renderer
        world.add(renderer);
        // render on each step
        world.on('step', function () {
            world.render();
        });
        // add the interaction
        world.add(Physics.behavior('interactive', { el: renderer.container }));
    });

// some fun colors
    var colors = {
        blue: '0x1d6b98',
        blueDark: '0x14546f',
        red: '0xdc322f',
        darkRed: '0xa42222'
    };

// scale relative to window width
    function S( n ){
        return n * window.innerWidth / 600;
    }

// create the zero
    var zero = Physics.body('compound', {
        x: width/2 - S(80)
        ,y: height/2
        ,treatment: 'static'
        ,styles: {
            fillStyle: colors.red
            ,lineWidth: 1
            ,strokeStyle: colors.darkRed
            ,alpha: 0.0001 //pixi bug
        }
        ,children: [
        // coords of children are relative to the compound center of mass
        Physics.body('rectangle', {
            x: S(-50)
            ,y: 0
            ,width: S(20)
            ,height: S(97)
            ,mass: 20
        })
        ,Physics.body('rectangle', {
            x: S(50)
            ,y: 0
            ,width: S(20)
            ,height: S(97)
            ,mass: 20
        })
        ,Physics.body('rectangle', {
            x: 0
            ,y: S(75)
            ,width: S(48)
            ,height: S(20)
            ,mass: 20
        })
        ,Physics.body('rectangle', {
            x: -S(35)
            ,y: S(60)
            ,angle: Math.PI / 4
            ,width: S(50)
            ,height: S(20)
            ,mass: 20
        })
        ,Physics.body('rectangle', {
            x: S(35)
            ,y: S(60)
            ,angle: -Math.PI / 4
            ,width: S(50)
            ,height: S(20)
            ,mass: 20
        })
        ,Physics.body('rectangle', {
            x: 0
            ,y: S(-75)
            ,width: S(48)
            ,height: S(20)
            ,mass: 20
        })
        ,Physics.body('rectangle', {
            x: -S(35)
            ,y: -S(60)
            ,angle: -Math.PI / 4
            ,width: S(50)
            ,height: S(20)
            ,mass: 20
        })
        ,Physics.body('rectangle', {
            x: S(35)
            ,y: -S(60)
            ,angle: Math.PI / 4
            ,width: S(50)
            ,height: S(20)
            ,mass: 20
        })
        ]
    });

// the point...
    var point = Physics.body('circle', {
        x: width/2 + S(6)
        ,y: height/2 + S(76)
        ,radius: S(13)
        ,treatment: 'static'
        ,styles: {
            fillStyle: colors.red
            ,lineWidth: 1
            ,strokeStyle: colors.darkRed
            ,alpha: 0.0001 //pixi bug
            ,mass: 80
        }
    });

// the seven...
    var seven = Physics.body('compound', {
        x: width/2 + S(86)
        ,y: height/2 - S(34)
        ,treatment: 'static'
        ,styles: {
            fillStyle: colors.red
            ,lineWidth: 1
            ,strokeStyle: colors.darkRed
            ,alpha: 0.0001 //pixi bug
        }
        ,children: [
        Physics.body('rectangle', {
            x: S(35)
            ,y: -S(80)
            ,width: S(114)
            ,height: S(24)
            ,mass: 40
        })
        ,Physics.body('rectangle', {
            x: S(51.5)
            ,y: S(2.5)
            ,angle: -70 * Math.PI/180
            ,width: S(160)
            ,height: S(28)
            ,mass: 40
        })
        ]
    });

// create 200 circles placed randomly
    var l = 100;
    var circles = [];
    while( l-- ){
        circles.push(Physics.body('circle', {
            x: Math.random() * width
            ,y: Math.random() * height
            ,radius: S(10)
            ,mass: 1
            ,restitution: 0.5
            ,styles: {
                strokeStyle: colors.darkBlue
                ,fillStyle: colors.blue
                ,lineWidth: 1
            }
        }));
    }

world.add(circles);

// add things to the world
    world.add([
    zero
    ,point
    ,seven
    ]);

// when circles fall past the bottom. reset them
    function wrapY(){
        var b
        ,i
        ,l
        ,h = height + 100
        ,w =  width /2
        ,x = w
        ;

for( i = 0, l = circles.length; i < l; i++){
            b = circles[i];
            if ( b.state.pos.y > height ){
                b.state.pos.y -= h;
                b.state.pos.x = x + w * (2 * Math.random() - 1);
                b.state.vel.zero();
            }
        }
    }

world.on('step', wrapY);

// slowly fade in the numbers
    function fadeIn(){
        zero.view.alpha = 0;
        seven.view.alpha = 0;

new TWEEN.Tween( { alpha: 0 } )
        .to( { alpha: 1 }, 1000 )
        .onUpdate( function () {
            zero.view.alpha = this.alpha;
            point.view.alpha = this.alpha;
            seven.view.alpha = this.alpha;
        } )
        .start()
        ;
    }

world.one('render', function(){
        // set the alpha on children to 1
        function setAlpha(c){
            c.alpha = 1;
        }
        zero.view.children.forEach(setAlpha);
        seven.view.children.forEach(setAlpha);
        zero.view.alpha = 0;
        seven.view.alpha = 0;

// fade in after 2 seconds
        setTimeout(fadeIn, 3000);
    });

// after 10 seconds to some more fun
    setTimeout(function(){
        // constrain objects to these bounds
        var edgeBounce = Physics.behavior('edge-collision-detection', {
            aabb: viewportBounds
            ,restitution: 0
            ,cof: 0.8
        });

world.add( edgeBounce );

// "detach" the 0.7
        zero.treatment = point.treatment = seven.treatment = 'dynamic';
        // wake up sleeping bodies
        world.wakeUpAll();
        world.off('step', wrapY);
    }, 10000)

// add behaviors
    world.add([
    Physics.behavior('constant-acceleration')
    ,Physics.behavior('body-impulse-response')
    ,Physics.behavior('body-collision-detection')
    ,Physics.behavior('sweep-prune')
    ]);

// For this example, we'll use a tweening engine
    // to transition the alpha
    require(['assets/scripts/vendor/tween.js'], function(){
        // only start the sim when tweening engine is ready

// subscribe to ticker to advance the simulation
        Physics.util.ticker.on(function( time ) {
            TWEEN.update();
            world.step( time );
        });
    });
});

// go ahead... expand the code and play around...