Using the Standard Inverse Kinematics Method | Foundation Actionscript 3.0 Animation: Making Things Move!

Ill be perfectly honest with you. The method of calculating inverse kinematics Ive described so far is something I came up with completely on my own. I think the first time I did it, I didnt even know that what I was doing was called inverse kinematics. I simply wanted something to reach for something else, and I worked out what each piece had to do in order to accomplish that, fooled around with it, got it working, and got it down to a system that I could easily duplicate and describe to others. It works pretty well, looks pretty good, and doesnt kill the CPU, so Im happy with it. I hope you are too.

But, shocking as this may seem to you, I was not the first one to consider this problem. Many others, with much larger IQs and much more formal training in math, have tackled this problem and come up with alternate solutions that are probably much more in line with how physical objects actually move. So lets take a look at the standard way of doing inverse kinematics. Then youll have a couple different methods at your disposal and can choose whichever one you like.

Introducing the law of cosines

The usual way for doing inverse kinematics uses, as the section title implies, something called the law of cosines . Uh-oh, more trigonometry? Yup. Recall that in Chapter 3, all the examples use right trianglestriangles with one right angle (90 degrees). The rules for such triangles are fairly simple: sine equals opposite over hypotenuse, cosine equals adjacent over hypotenuse , and so on. Ive used these rules quite extensively throughout the book.

But what if you have a triangle that doesnt have a 90-degree angle? Are you just left out in the cold? No, the ancient Greeks thought of that one, too, and gave us the law of cosines to help us figure out the various angles and lengths of even this kind of shape. Of course, it is a little more complex, but if you have enough information about the triangle, you can use this law to figure out the rest.

The question you should be asking now is What the heck does this have to do with inverse kinematics? Well, take a look at the diagram in Figure 14-7.

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 is the base. Its fixed, so you know that location. You want to put the free end at the location shown. Youve formed an arbitrary triangle.

What do you know about this triangle? You can easily find out the distance between the two endsside c. And you know the length of each segmentsides a and b. So, you know all three lengths.

What do you need to know about this triangle? You just need to know the two angles of the two segmentsangles B and C. This is what the law of cosines helps you discover. Let me introduce you to it:

 c ² = a ² + b ²   2 * a * b * cos C

Now, you need to know angle C, so you can isolate that on one side. I wont go through every step, as its pretty basic algebra. You should wind up with this:

 C = acos ((a2 + b2 - c2) /  (2 * a * b))

The acos there is arccosine, or inverse cosine. The cosine of an angle gives you a ratio, or decimal. The arccosine of that ratio gives you back the angle. The Flash function for this is Math.acos() . Since you know sides a, b, and c, you can now find angle C. Similarly, you need to know angle B. The law of cosines says this:

 b ² = a ² + c ²   2 * a * c * cos B

And that boils down to this:

 B = acos((a ² + c ² - b ² )/ (2 * a * c))

Converting to ActionScript gives you something like this:

 B = Math.acos((a * a + c * c - b * b) / (2 * a * c)); C = Math.acos((a * a + b * b - c * c) / (2 * a * b));

Now you have almost everything you need to start positioning things. Almost, because the angles B and C arent really the angles of rotation youll be using for the segment movie clips. Look at the next diagram in Figure 14-8.

Figure 14-8: Figuring the rotation of seg1

While you know angle B, what you need to determine is how much to actually rotate seg1 . This is how far from zero, or horizontal, its going to be, and is represented by angles D plus B. Luckily, you can get angle D by figuring out the angle between the base and free end, as illustrated in Figure 14-9.

Figure 14-9: Figuring the rotation of seg0

Then you know angle C, but that is only in relation to seg1 . What you need for rotation is seg1 s rotation, plus 180, plus C. Ill call that angle E.

OK, enough talk. Lets see it in code, and it will all become clear.

ActionScripting the law of cosines

Im just going to give you the inverse kinematics code in one big lump, and then explain it. Heres the code ( ch14_09.fla ):

 var segLength:Number = 60; function onEnterFrame():Void {       var dx:Number = _xmouse - seg1._x;       var dy:Number = _ymouse - seg1._y;       var dist:Number = Math.sqrt(dx * dx + dy * dy);       var a:Number = segLength;       var b:Number = segLength;       var c:Number = Math.min(dist, a + b);       var B:Number = Math.acos((b * b - a * a - c * c) /                                (-2 * a * c));       var C:Number = Math.acos((c * c - a * a - b * b) /                                (-2 * a * b));       var D:Number = Math.atan2(dy, dx);       var E:Number = D + B + Math.PI + C;       seg1._rotation = (D + B) * 180 / Math.PI;       seg0._x = seg1._x + Math.cos(D + B) * segLength;       seg0._y = seg1._y + Math.sin(D + B) * segLength;       seg0._rotation = E * 180 / Math.PI; }

Heres the procedure:

Get the distance from seg1 to the mouse.
Get the three sides lengths. Sides a and b are easy. They are equal to segLength . Side c is equal to dist or a + b , whichever is smaller. This is because one side of a triangle cant be longer than the other two sides added together. If you dont believe me, try to draw such a shape. This also gets back into the reaching paradigm. If the distance from the base to the mouse is 200, but the length of the two segments adds up to only 120, it just isnt going to make it.
Figure out angles B and C using the law of cosines formula, and angle D using Math.atan2 . E , as mentioned, is D + B + 180 + C . Of course, in code, you substitute Math.PI radians for 180 degrees.
Just as the diagram in Figure 14-9 shows, convert angle D + B to degrees, and thats seg1 s rotation. Use the same angle to find the end point of seg1 and position seg0 on it.
Finally, seg0 s rotation is E , converted to degrees.

There you have it: inverse kinematics using the law of cosines. You might notice that the joint always bends the same way. This might be good if youre building something like an elbow or a knee that can bend only one way.

When youre figuring out the angles analytically like this, there are two solutions to the problem: It could bend this way, or it could bend that way. Youve hard-coded it to bend one way by adding D and B, and then adding C. If you subtracted them all, youd get the same effect, but the limb would bend in the other direction.

 var segLength:Number = 60; function onEnterFrame():Void {       var dx:Number = _xmouse - seg1._x;       var dy:Number = _ymouse - seg1._y;       var dist:Number = Math.sqrt(dx * dx + dy * dy);       var a:Number = segLength;       var b:Number = segLength;       var c:Number = Math.min(dist, a + b);       var B:Number = Math.acos((b * b - a * a - c * c) /                                (-2 * a * c));       var C:Number = Math.acos((c * c - a * a - b * b) /                                (-2 * a * b));       var D:Number = Math.atan2(dy, dx);  var E:Number = D - B + Math.PI - C;   seg1._rotation = (D - B) * 180 / Math.PI;   seg0._x = seg1._x + Math.cos(D - B) * segLength;   seg0._y = seg1._y + Math.sin(D - B) * segLength;  seg0._rotation = E * 180 / Math.PI; }

If you want it to bend either way, youll need to figure out some kind of conditional logic to say, If its in this position, bend this way; otherwise , bend that way. Unfortunately, I have only enough space to give you this brief introduction to the law of cosines method. But if this is the kind of thing youre interested in doing, Im sure youll be able to find plenty of additional data on the subject. A quick web search for inverse kinematics just gave me more than 90,000 results. So yeah, youll be able to dig up something!