0

I found this example that works for physics.js 0.6.0 http://jsfiddle.net/REGCU/22/

but I cannot get it to work with 0.7.0 http://jsfiddle.net/REGCU/23/

javascript:

Physics(function (world) {

    var viewWidth = window.innerWidth
        ,viewHeight = window.innerHeight
        // bounds of the window
        ,viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight)
        ,edgeBounce
        ,renderer
        ;

    // create a renderer
    renderer = Physics.renderer('canvas', {
        el: 'viewport'
        ,width: viewWidth
        ,height: viewHeight
    });

    // add the renderer
    world.add(renderer);
    // render on each step
    world.on('step', function () {
        world.render();
    });

    // constrain objects to these bounds
    edgeBounce = Physics.behavior('edge-collision-detection', {
        aabb: viewportBounds
        ,restitution: 0.2
        ,cof: 1
    });

    var gravity = Physics.behavior('constant-acceleration', {
        acc: { x : 0, y: 0.0004 } // this is the default: .0004
    });


    // resize events
    window.addEventListener('resize', function () {

        viewWidth = window.innerWidth;
        viewHeight = window.innerHeight;

        renderer.el.width = viewWidth;
        renderer.el.height = viewHeight;

        viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight);
        // update the boundaries
        edgeBounce.setAABB(viewportBounds);

    }, true);

    // for constraints
    var rigidConstraints = Physics.behavior('verlet-constraints', {
        iterations: 10
    });

    // the "basket"
    var basket = [];
    var fpos = window.innerWidth / 2;
    var epos = window.innerHeight / 2;
    for ( var i = fpos; i < fpos + epos; i += 5 ){

        l = basket.push(
            Physics.body('circle', {
                x: i
                ,y: 50 - (i-fpos)
                ,radius: 1
                ,restitution: 0
                ,mass: 1000
                ,conf: 1
                ,hidden: true
            })
        );

        rigidConstraints.distanceConstraint( basket[ l - 1 ], basket[ l - 2 ], 2 );
    }
    
    var box = Physics.body('rectangle', {
        x: i
        ,y: 50 - (i-fpos)
        ,width: 60
        ,height: 60
        ,styles: { fillStyle: '#fff' }
    });
    
    rigidConstraints.distanceConstraint( basket[ l - 1 ], box, 2 );
    
    world.add(box);

    world.on('render', function( data ){

        var renderer = data.renderer;
        for ( var i = 1, l = basket.length; i < l; ++i ){

            renderer.drawLine(basket[ i - 1 ].state.pos, basket[ i ].state.pos, {
                strokeStyle: '#ccc'
                ,lineWidth: 5
                ,restitution: 0
                ,mass: 1000
                ,conf: 1
            });
        }
    });

    // fix the ends
    basket[ 0 ].treatment = 'static';

    world.add( basket );
    world.add( rigidConstraints );

    // add things to the world
    world.add([
        Physics.behavior('interactive', { el: renderer.el })
        ,Physics.behavior('constant-acceleration')
        ,Physics.behavior('body-impulse-response')
   //     ,Physics.behavior('body-collision-detection')
        ,Physics.behavior('sweep-prune')
        ,edgeBounce
        ,gravity
    ]);

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

    // start the ticker
    Physics.util.ticker.start();
});
body{
    background: #1d1d1d;
    margin: 0;
    padding: 0;
}
<script src="http://wellcaffeinated.net/PhysicsJS/assets/scripts/vendor/physicsjs-current/physicsjs-full.js"></script>

and I get no error messages (just nothing happens on the output).

I have also been able to run the 0.6.0 version on my computer, but had similar non-results for the 0.7.0 version.

Any ideas on what I need to change?

  • Can you tell us what's not working? – Marc Nov 09 '15 at 20:08
  • When one runs the code snippet, the result is just a black background. There are no error messages. When one runs the 0.6.0 version (available at http://jsfiddle.net/REGCU/22/) the expected animation is visible. – user1908430 Nov 09 '15 at 23:48
  • I'm using Chrome browser, and I'm seeing the object show up for both fiddles you posted and the code snippet. This sounds like a browser compatibility issue. – Marc Nov 10 '15 at 14:53
  • I am running Ubuntu 14.04, Firefox 42.0, also Chrome Version 46.0.2490.80 (64-bit). I get the blank result with either browser. – user1908430 Nov 10 '15 at 15:31
  • On a Macbook Firefox 42.0, the 0.6.0 jsfiddle version worked (showed the animation), the 0.7.0 version did not show the animation. Safari did not work with either version. – user1908430 Nov 10 '15 at 15:55
  • And on a windows 8 machine, IE worked [!], Chrome 46.0 did not, and Firefox did not. I think that I will stay with physicsjs 0.6.0 for now. – user1908430 Nov 10 '15 at 16:07
  • On an android phone Chrome, the 0.6.0 jsfiddle worked, the 0.7.0 version did not. – user1908430 Nov 10 '15 at 16:13
  • One thing that helped me was to use a container element with id "viewport" which is referenced by the renderer. – Gavin Palmer Dec 13 '15 at 22:38

0 Answers0