PhysicsJS - moving an object

Question

I'm trying to figure out how to use PhysicsJS. I first off just want to simply figure out how to change lets say a position or a speed of an object on click... but I just cant figure it out!

( function()
{
    var viewWidth = 500,
    viewHeight = 300,
    renderer = Physics.renderer( 'canvas', 
    {
        el: 'viewport',
        width: viewWidth,
        height: viewHeight,
        meta: false,
        styles: 
        {
            'circle' : 
            {
                strokeStyle: 'hsla(60, 37%, 17%, 1)',
                lineWidth: 1,
                fillStyle: 'hsla(60, 37%, 57%, 0.8)',
                angleIndicator: 'hsla(60, 37%, 17%, 0.4)'
            }
        }
    }),
    viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight),
    constraint = {
        aabb: viewportBounds,
        restitution: 0.99,
        cof: 0.99
    },
    ballOptions = {
        x: 100,         // x-coordinate
        y: 100,         // y-coordinate
        vx: 0.0,    // velocity in x-direction
        vy: 0.0,    // velocity in y-direction
        radius: 20
    },
    gravity = Physics.behavior('constant-acceleration', 
    {
        acc: { x : 0, y: 0.0004 } 
    }),
    ball = Physics.body('circle', ballOptions );

    Physics( function( world )
    {

    // add the renderer
    world.add( renderer );
    // add circle
    world.add( ball );

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

    // on every step...
    world.subscribe( 'step', function()
    {
        world.render();
    });

    world.subscribe( 'collisions:detected', function( $collision )
    {

    });

    var onElementClick = function()
    {
        // do something
    };

    document.getElementById( 'viewport' ).addEventListener( 'click', onElementClick, false );

    // Lets GO!
    Physics.util.ticker.start();

});
})();

any help much appreciated

Answer 1

One option is to take the gravity that was created but never added to the world and do that onclick.

world.add(gravity);

That's cheating in the sense that you asked about changing the position or speed of an object. To do that, modify the state of the ball. See the docs on Bodies, specifically the properties. You can set state.pos to move it. To put it in motion, set the velocity:

ball.state.vel.set(.1,-.5); // move right and upward

jsfiddle that sets velocity