Reaching and Dragging Single Segments

As I mentioned in the previous chapter, inverse kinematics systems can be broken down into a couple of different types: reaching and dragging.

When the free end of the system is reaching for a target, the other end of the system, the base, may be unmovable, so the free end may never be able to get all the way to the target if it is out of range. An example of this is when youre trying to grab hold of something. Your fingers move toward the object, your wrist pivots to put your fingers as close as possible, and your elbow , shoulder, and the rest of your body move in whatever way they can to try to give you as much reach as possible. Sometimes, the combination of all these positions will put your fingers in contact with the object; sometimes, you wont be able to reach it. If the object were to move from side to side, all your limbs would constantly reposition themselves to keep your fingers reaching as close as they could to the object. Inverse kinematics will show you how to position all those pieces to give the best reach.

The other type of inverse kinematics is when something is being dragged. In this case, the free end is being moved by some external force. Wherever it is, the rest of the parts of the system follow along behind it, positioning themselves in whatever way is physically possible. For this, imagine an unconscious or dead body (sorry, thats all I could come up with). You grab it by the hand and drag it around. The force you apply to the hand causes the wrist, elbow, shoulder, and rest of the body to pivot and move in whatever way they can as they are dragged along. In this case, inverse kinematics will show you how those pieces will fall into the correct positions as they are dragged.

To give you a quick idea of the difference between these two methods , lets run through an example of each one with a single segment. To start with, place whatever movie clip youre using as a segment on stage and name it seg0 . Ill continue to use the same segment movie clip symbol I used in Chapter 13. You can use that one or anything similar. If you prefer to make your own movie clip, just review the section in the previous chapter that describes what this segment needs to contain. Then youll add the code to frame 1.

Reaching with a single segment

For reaching, all the segment will be able to do is turn toward the target. The target, if you havent read my mind already, will be the mouse. To turn the segment toward the target, you need the distance between the two, on the x and y axes. You then can use Math.atan2 to get the angle between them in radians. Converting that to degrees, you know how to rotate the segment. Heres the code ( ch14_01.fla ):

 function onEnterFrame():Void {       var dx:Number = _xmouse - seg0._x;       var dy:Number = _ymouse - seg0._y;       var angle:Number = Math.atan2(dy, dx);       seg0._rotation = angle * 180 / Math.PI; } 

Figure 14-1 shows the result, Test this and watch how the segment follows the mouse around. Even if the segment is too far away, you can see how it seems to be reaching for the mouse.

Figure 14-1: A single segment reaching toward the mouse

Dragging with a single segment

Now, lets try dragging. Here, youre not actually dragging using the startDrag and stopDrag movie clip methods (though you could conceivably do it that way). Instead, youll just assume that the segment is attached to the mouse right at that second pivot point.

The first part of the dragging method is exactly the same as the reaching method: You rotate the clip toward the mouse. But then you go a step further and move the segment to a position that will place the second pivot point exactly where the mouse is. To do that, you need to know the distance between the two pivot points (see Chapter 13), and the angle, which you just calculated. From there, its a simple matter of using sine and cosine to place the segment where it needs to go. Heres the code ( ch14_02.fla ):

 var segLength:Number = 120; function onEnterFrame():Void {       var dx:Number = _xmouse - seg0._x;       var dy:Number = _ymouse - seg0._y;       var angle:Number = Math.atan2(dy, dx);       seg0._rotation = angle * 180 / Math.PI;  seg0._x = _xmouse - Math.cos(angle) * segLength;   seg0._y = _ymouse - Math.sin(angle) * segLength;  } 

You can see how the segment is permanently attached to the mouse and rotates to drag along behind it. You can even push the segment around in the opposite direction.