如何制作一个逼真的轮盘赌球旋转动画

Question

我使用PhysicsJS制作一个2D轮盘赌球旋转动画。

到目前为止，我已经实现了以下内容:

• 使用了一个约束，使球不会"飞走":
  rigidConstraints.distanceConstraint( wheel, ball, 1 );
• 使用拖拽使球减速:
  world.add(Physics.integrator('verlet', { drag: 0.9 }));
• 使轮子吸引球，这样当阻力使球足够慢时，球就会向它下落

我的问题:

1. 我如何逐渐减慢球的旋转速度?
   我已经有一个非常高的drag值，但它看起来没有做任何事情
2. 我如何使对车轮的吸引力工作?
   距离限制应该防止球逸出，而不是离轮子更近。
3. 为什么 angularVelocity: -0.005 在车轮上根本不工作?

我的代码，也在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 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();
    });
    // create some 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 to the 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 to ticker to advance the simulation
    Physics.util.ticker.on(function( time ) {
        world.step( time );
    });
    // start the ticker
    Physics.util.ticker.start();
});

Answer 1

1. 在那个版本的PhysicsJS中有一个bug，尝试使用github上最新的版本。https://github.com/wellcaffeinated/PhysicsJS/issues/94

2. 不幸的是，距离约束施加了一个固定的距离。所以为了防止球以这种方式逃逸，你需要实现你自己的行为。(下图)

3. 您必须将behavior: "static"更改为behavior: "kinematic"。静态物体永远不会自己移动。

要创建自定义行为，请查看这里的文档:https://github.com/wellcaffeinated/PhysicsJS/wiki/Behaviors#creating-a-custom-behavior

为了获得你所描述的功能，你需要做这样的事情:

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

当然，这是一种"完成它"的方式，但它应该工作。