Moving an image along an arc

Am writing a backgammon game and when the CPU moves I would like to move the pieces along an arc (yellow line in below screenshot) to give a hopping effect.

http://www.stephenoreilly.net/bg.jpg

The only way I can think of is to to calculate the center of the rotating circle (red triange in screen shot), and calculate the piece position by decreasing the inner angle (until the piece reaches its destination)… The maths for this is quite complexish but just about doable (for me!) but if anyone knows of an easier way would be appreciated. Thnx.

Apologies if this is documented but google/forum search didnt give me an answer.

Rather than messing around with circles you should create a curve between the two points and move the piece along it. Bezier curves are quite simple, a quadratic or cubic bezier would work nicely, you just have to generate a couple of control points (for movement along the same side of the board then generate the control points by shifting the start/end points towards the thin end of the triangles, for movement between sides you may need some special cases, but shifting towards the center of the board might work).

Once you’ve got your control points, animating along it is as simple as interpolating the t value and calculating the corresponding point on the curve.

This is what am looking for. Thanks Orangy Tang.
Should have paid more attention at Uni :wink: