I'm trying to do a Tiny Wings like in javascript.

I first saw a technique using Box2D, I'm using the closure-web version (because of the memory leaks fix).
In short, I explode the curve into polygons so it looks like that:

I also tried with Chipmunk-js and I use the segment shape to simulate my ground like that:

In both cases, I'm experiencing some "crashes" or "bumps" at the mon points between polygons or segments when a circle is rolling.

I asked about it for Chipmunk and the author said he implemented a radius property for the segment to reduce this behavior. I tried and it indeed did the trick but it's not perfect. I still have some bumps(I had to set to 30px of radius to get a positive effect).

The "bumps" append at the shared points between two polygons :

Using, as illandril suggested to me, the edging technique (he only tested with polygon-polygon contact) to avoid the circle to crash on an edge:

Also tried to add the bullet option as Luc suggested and nothing seems to change.

Here the demo of the issue.
You can try to change the value to check :

• bullet option
• edge size
• iterations count
• the physics

(only tested on latest dev Chrome)
Be patient (or change the horizontal gravity) and you'll see what I mean.
Here the repo for the interested.

I'm trying to do a Tiny Wings like in javascript.

I first saw a technique using Box2D, I'm using the closure-web version (because of the memory leaks fix).
In short, I explode the curve into polygons so it looks like that:

I also tried with Chipmunk-js and I use the segment shape to simulate my ground like that:

In both cases, I'm experiencing some "crashes" or "bumps" at the mon points between polygons or segments when a circle is rolling.

I asked about it for Chipmunk and the author said he implemented a radius property for the segment to reduce this behavior. I tried and it indeed did the trick but it's not perfect. I still have some bumps(I had to set to 30px of radius to get a positive effect).

The "bumps" append at the shared points between two polygons :

Using, as illandril suggested to me, the edging technique (he only tested with polygon-polygon contact) to avoid the circle to crash on an edge:

Also tried to add the bullet option as Luc suggested and nothing seems to change.

Here the demo of the issue.
You can try to change the value to check :

• bullet option
• edge size
• iterations count
• the physics

(only tested on latest dev Chrome)
Be patient (or change the horizontal gravity) and you'll see what I mean.
Here the repo for the interested.

• javascript
• box2d
• physics
• curve
• chipmunk

• 1 What you need is a cublic spline, which guarantees vertex and slope continuity. – John Alexiou Commented May 17, 2012 at 19:35
• I'm actually using Smooth.js and the cubic method to curve my ground. That's not the issue because you can to try with a linear slope with multiple adjacent polygons (or segments) and you'll still get the "bumps" when the circle is rolling on an edge. – njord Commented May 18, 2012 at 1:05
• Smooth.js applies the cubic to each dimension separately and does not deal with the slopes exactly. Look at the getTangent method which does a finite difference (next_value-prev_value)/stride instead of the proper mathematical treatment. I don't know js but in FORTRAN and C# I have used numerical recipes (apps.nrbook./c/index.html) section 3.3, cubic splines. – John Alexiou Commented May 18, 2012 at 13:02
• Let me add, that a cubic spline establishes continuity not only in values and slopes, but also in curvature. – John Alexiou Commented May 18, 2012 at 14:54
• I' m afraid that beyond my skills :/ Could you explain with a scheme? I'm using Smooth.js to curve my grouped slopes and it seems to work visually and physically. I' guessing the problem is that two adjacent polygons share some points, see this drawing in the updated question. I'm setting a demo to be able to more explicit. – njord Commented May 18, 2012 at 15:02

3 Answers 3

The best solution is edge shapes with ghost vertices, but if that's not available in the version/port you're using, the next best thing is like the diagram in your question called 'edging', but extend the polygons further underground with a very shallow slope, like in this thread: http://www.box2d/forum/viewtopic.php?f=8&t=7917

I first thought the problem could e from the change of slope between two adjacent segments, but since on a flat surface of polygons you still have bumps I think the problem is rather hitting the corner of a polygon.

I don't know if you can set two sets of polygons, overlapping each other ? Just use the same interpolation calculations and generate a second set of polygons just like in the diagram hereafter : you have the red set of polygons built and add the green set by setting the left vertices of a green polygon in the middle of a red polygon, and its right vertices in the middle of the next red polygon.

![diagram][1]

This should work on concave curves and... well you should be flying over the convex ones anyway.

If this doesn't work try setting a big number of polygons to build the slope. Use a tenth of the circle's radius for the polygon's width, maybe even less. That should reduce your slope discontinuities.

-- Edit

In Box2D.js line 5082 (in this repo at least) you have the PreSolve(contact, manifold) function that you can override to check if the manifolds (directions in which the snowball are impulsed when colliding the polygons) are correct.

To do so, you would need to recover the manifold vector and pare it to the normal of the curve. It should look like that (maybe not exactly) :

Box2D.Dynamics.b2ContactListener.prototype.PreSolve = function (contact, oldManifold) {
    // contact instanceof Box2D.Dynamics.Contacts.b2Contact == true
    var localManifold, worldManifold, xA, xB, man_vect, curve_vect, normal_vect, angle;
    localManifold = contact.GetManifold();

    if(localManifold.m_pointCount == 0)
        return; // or raise an exception

    worldManifold = new Box2D.Collision.b2WorldManifold();
    contact.GetWorldManifold( worldManifold );

    // deduce the impulse direction from the manifold points
    man_vect = worldManifold.m_normal.Copy();

    // we need two points close to & surrounding the collision to pute the normal vector
    // not sure this is the right order of magnitude
    xA = worldManifold.m_points[0].x - 0.1;
    xB = worldManifold.m_points[0].x + 0.1;

    man_vect.Normalize();

    // now we have the abscissas let's get the ordinate of these points on the curve
    // the subtraction of these two points will give us a vector parallel to the curve

    var SmoothConfig;

    SmoothConfig = {
        params: {
            method: 'cubic',
            clip: 'mirror',
            cubicTension: 0,
            deepValidation: false
        },
        options: {
            averageLineLength: .5
        }
    }
    // get the points, smooth and smooth config stuff here
    smooth = Smooth(global_points,SmoothConfig);

    curve_vect = new Box2D.Common.Math.b2Vec2(xB, smooth(xB)[1]);
    curve_vect.Subtract(new Box2D.Common.Math.b2Vec2(xA, smooth(xA)[1]));

    // now turn it to have a normal vector, turned upwards
    normal_vect = new Box2D.Common.Math.b2Vec2(-curve_vect.y, curve_vect.x);
    if(normal_vect.y > 0)
        normal_vect.NegativeSelf();
    normal_vect.Normalize();
    worldManifold.m_normal = normal_vect.Copy();

    // and finally pute the angle between the two vectors
    angle = Box2D.Common.Math.b2Math.Dot(man_vect, normal_vect);

    $('#angle').text("" + Math.round(Math.acos(angle)*36000/Math.PI)/100 + "°");
    // here try to  raise an exception if the angle is too big (maybe after a few ms)
    // with different thresholds on the angle value to see if the bumps correspond
    // to a manifold that's not normal enough to your curve 
};

I'd say the problem has been tackled in Box2D 2.2.0 , see its manual, section 4.5 "Edge Shapes"

The thing is it's a feature of the 2.2.0 version, along with the chainshape thing, and the box2dweb is actually ported from 2.2.1a - don't know about box2dweb-closure.

Anything I've tried by modifying Box2D.Collision.b2Collision.CollidePolygonAndCircle has resulted in erratic behaviour. At least a part of the time (e.g. ball bumping in random directions, but only when it rolls slowly).