javascript - How to make a realistic roulette ball spinning animation -

i'm using physicsjs make 2d roulette ball spinning animation.

so far, i've implemented following:

• used constraint ball wouldn't "fly away":
  rigidconstraints.distanceconstraint( wheel, ball, 1 );
• used drag slow down ball:
  world.add(physics.integrator('verlet', { drag: 0.9 }));
• made wheel attract ball, fall towards when drag has slowed down ball enough

my questions:

1. how gradually slow down ball spinning?
   have high drag value, doesn't it's doing anything
2. how make attraction towards wheel work?
   distance constraint should keep ball escaping, not getting closer wheel.
3. why does angularvelocity: -0.005 not work @ on wheel?

my code, on jsfiddle

physics(function (world) {     var viewwidth = window.innerwidth         ,viewheight = window.innerheight         ,renderer         ;      world.add(physics.integrator('verlet', {         drag: 0.9     }));      var rigidconstraints = physics.behavior('verlet-constraints', {         iterations: 10     });      // create renderer     renderer = physics.renderer('canvas', {         el: 'viewport'         ,width: viewwidth         ,height: viewheight     });      // add renderer     world.add(renderer);     // render on each step     world.on('step', function () {         world.render();     });      // create bodies     var ball = physics.body('circle', {         x: viewwidth / 2         ,y: viewheight / 2 - 300         ,vx: -0.05         ,mass: 0.1         ,radius: 10         ,cof: 0.99         ,styles: {             fillstyle: '#cb4b16'             ,angleindicator: '#72240d'         }     })      var wheel = physics.body('circle', {         x: viewwidth / 2         ,y: viewheight / 2         ,angularvelocity: -0.005         ,radius: 100         ,mass: 100         ,restitution: 0.35         // ,cof: 0.99         ,styles: {             fillstyle: '#6c71c4'             ,angleindicator: '#3b3e6b'         }         ,treatment: "static"     });      world.add(ball);     world.add(wheel);      rigidconstraints.distanceconstraint( wheel, ball, 1 );      world.add( rigidconstraints );      // add things world     world.add([         physics.behavior('interactive', { el: renderer.el })         ,physics.behavior('newtonian', { strength: 5 })         ,physics.behavior('body-impulse-response')         ,physics.behavior('body-collision-detection')         ,physics.behavior('sweep-prune')     ]);      // subscribe ticker advance simulation     physics.util.ticker.on(function( time ) {         world.step( time );     });      // start ticker     physics.util.ticker.start(); }); 

1. drag has bug in version of physicsjs, try using updated version github. https://github.com/wellcaffeinated/physicsjs/issues/94

2. unfortunately distance constraint imposes fixed distance. prevent ball's escape in way, you'd need implement own behavior. (more below)

3. you'll have change behavior: "static" behavior: "kinematic". static bodies don't ever move on own.

to create custom behavior check out documentation here: https://github.com/wellcaffeinated/physicsjs/wiki/behaviors#creating-a-custom-behavior

in order functionality you're describing, you'll need this:

// in behave method // calculate displacement of ball wheel... like.... disp.clone( wheel.state.pos ).vsub( ball.state.pos ); // if it's greater max distance, move inside max radius if ( disp.norm() > maxdist ){     var moveby = disp.norm() - maxdist;     disp.normalize(); // unit vector towards wheel     disp.mult( moveby );     ball.state.pos.vadd( disp ); // move inside max radius } 

of course, "just done" way of doing should work.