Inverse Kinematics: Dragging and Reaching - HTML5 Animation with JavaScript - page 327

mathematical, solution to this problem using the law of cosines. We take a look at the standard way of
doing inverse kinematics, so then you have a couple different methods at your disposal and can choose
whichever one you like.

Introducing the Law of Cosines

This way of calculating inverse kinematics uses something called the law of cosines . Recall that in Chapter
3, all the examples used right triangles, which are triangles with one right angle (90 degrees). The rules for
such triangles are fairly simple: Sine equals opposite over hypotenuse, cosine equals adjacent over
hypotenuse, etc. We use these rules quite extensively throughout the topic.

But what if you have a triangle that doesn't have a 90-degree angle? Well, that's where the law of cosines
fits in, it can help us figure out the various angles and lengths of this kind of triangle. It is a little more
complex, but if you have enough information about the triangle, you can use this formula to figure out the
rest. So what does this have to do with inverse kinematics? Take a look at the diagram in Figure 14-7.

Base

c

B

A

Free end

a

C

b

Figure 14-7. Two segments form a triangle with sides a, b, c, and angles A, B, C.

Here, you have two segments. The one on the left (side a ) is the base, which is fixed, so you know that
location. You want to put the free end at the position shown. Thus, you've formed a triangle.

What do we know about this triangle? You can easily find the distance between the two ends—the length
of side c . And you know the length of each segment—sides a and b . So, you know all three lengths.

What do you need to know about this triangle? You just need the two angles of the two segments—angles
B and C . This is where the law of cosines can help you:

c 2 = a 2 + b 2 - 2 × a × b × cos C

Now, you need to know angle C , so you can isolate that on one side. We won't go through each step, but,
with a little algebra, you should wind up with this:

C = acos ((a 2 + b 2 - c 2 ) / (2 × a × b))
The acos there is arccosine, or inverse cosine. The cosine of an angle gives you a ratio, and the arccosine
of that ratio gives you back the angle. The JavaScript function for this is Math.acos . Because you know
sides a , b , and c , you can now find angle C . Similarly, you need to know angle B , and the law of cosines
says this:

b 2 = a 2 + c 2 - 2 × a × c × cos B

Which, when isolating angle B , boils down to this: