Go to Chapter 2 inverse kinematics: Drag and Drop (as3.0)

 Chapter 2 introduces some basic kinematics and the difference between forward and reverse kinematics.In the previous chapter, we talked about
In this chapter, we need to learn the inverse kinematics closely related to it. The actions involved are drag and drop and stretch.
   The examples in this chapter are the same as those in forward kinematics. The examples in this chapter are also examples of establishing a system from an independent joint.From a single off
And then to multiple joints. First, I will show you the simplest way to calculate the angle and position. Just in
Use basic triangle learning in the Code for rough calculation. Finally, we will briefly introduce how to use the cosine theorem,
In this way, the calculated results are more accurate, but a large amount of computing is consumed-this is the so-called balance.
Drag and Drop and stretch of a single object
   As mentioned above, the inverse kinematics system can be divided into two different types: Drag and Drop and stretch.
   When the free end of the system is stretched to the target point, the other end of the system-the fixed end may not be able to move.
If the target point is beyond the range of the free-end motion, the free-end will never reach the target point. For example, when
When we try to catch something, our fingers move toward this object,Turning our wrist will make our fingers and target positions
Close and close, and stretch your elbows, shoulders, and other parts as much as possible. Sometimes, the combination of all these locations
It will expose your fingers to objects. Sometimes it may not work. If the object is moving back and forth, our limbs need to be instantly
Constantly adjust the position, in order to allow the finger to reach the object as much as possible. The inverse kinematics will tell us, as shown in figure
How to set the positions of all these parts to achieve the best stretching effect.
   Another type of inverse kinematics is when an object is dragged. In this example,The free end is dragged by some external forces.
Dynamic. At any time, the rest of the system is immediately followed, and they place themselves in natural locations. Yes
Think of it as an unconscious zombie (Sorry, this is the only thing I can think). Hold his hand and drag it away.
   The power we put on each other's hand passes to the wrist, elbows, shoulders, and the rest of the body along
The drag direction. In this example, the inverse kinematics will tell us how all of these parts follow the drag and drop Group
Correct position for merging.
   The best way to understand this is to explain the use case subroutine. Each example uses a joint. We need to use
Segment class, so make sure it is in the project or class path we work on.
Single-joint stretch
     For stretching, all joints must be able to rotate to the target. Target. If you haven't understood what I mean, think about it.
You need to know the distance between the two points on the X and Y axes. Then you can use math. atan2 as the mouse. Rotate the joint to the target,

Returns the radians of the angle. Convert it to the angle to get the rotation of the joint. The Code is as follows (visible
Onesegment.):

Package {
 Import flash. display. Sprite;
 Import flash. Events. event;
 Public class onesegment extends sprite {
  Private var segment0: segment;
  Public Function onesegment (){
    Init ();
  }
  Private function Init (): void {
    Segment0 = new segment (100, 20 );
    Addchild (segment0 );
    Segment0.x = stage. stagewidth/2;
    Segment0.y = stage. stageheight/2;
     Addeventlistener (event. enter_frame, onenterframe );
   }
   Private function onenterframe (Event: Event): void {
     VaR DX: Number = mousex-segment0.x;
     VaR DY: Number = mousey-segment0.y;
     VaR angle: Number = math. atan2 (dy, dx );
     Segment0.rotation = angle * 180/Math. Pi;
   }
 }
}
      Figure 14-1 shows the running result. Test how the joint follows the mouse. Even if the joints are far away,
It is like holding the mouse.

 

Figure 14-1 stretching a single joint over the mouse

 

Single-joint drag
     Now, let's try and drag it. The drag method mentioned here is not the startdrag and stopdrag methods (although
You can also do this ). Assume that the second pivot point of the joint is connected to the mouse.
     The first part of the drag is the same as the stretch: Let the sprite film rotate toward the mouse. Then we need to do more,
Move the joint to the position where the second pivot point can be placed on the mouse. In this way, you need to know each of the two Pivot
Axis Position. We can use the getpin () method of the joint and the actual x and y positions of the joint to calculate them.
. Call the two distances W and H. Finally, subtract W and H from the current position of the mouse.
Know where to put the joints. The onenterframe method in onesegmentdrag. As is the only sending method.
Change:
Private function onenterframe (Event: Event): void {
 VaR DX: Number = mousex-segment0.x;
 VaR DY: Number = mousey-segment0.y;
 VaR angle: Number = math. atan2 (dy, dx );
 Segment0.rotation = angle * 180/Math. Pi;
 VaR W: Number = segment0.getpin (). X-segment0.x;
 VaR H: Number = segment0.getpin (). Y-segment0.y;
 Segment0.x = mousex-W;
 Segment0.y = mousey-h;
}
     We can see that this joint is permanently connected to the mouse and rotated, dragging behind the mouse. We can even
This joint is pushed to the opposite direction.

Multi-joint drag

     Dragging a system using inverse kinematics is easier than stretching, so we should first introduce dragging. Drag from two joints
Start.
Drag two joints
     In the preceding example, create a joint named segment1 and add it to the display list. Simple strategy
Single. We already have the position of segment0 dragging on the mouse. You only need to drag segment1
Segment0. First, simply copy some code and then change some references. Bold representation of the new Code.
Private function onenterframe (Event: Event): void {
 VaR DX: Number = mousex-segment0.x;
 VaR DY: Number = mousey-segment0.y;
 VaR angle: Number = math. atan2 (dy, dx );
 Segment0.rotation = angle * 180/Math. Pi;
 VaR W: Number = segment0.getpin (). X-segment0.x;
 VaR H: Number = segment0.getpin (). Y-segment0.y;
 Segment0.x = mousex-W;
 Segment0.y = mousey-h;
 DX = segment0.x-segment1.x;
 DY = segment0.y-segment1.y;
 Angle = math. atan2 (dy, dx );
 Segment1.rotation = angle * 180/Math. Pi;
 W = segment1.getpin (). X-segment1.x;
 H = segment1.getpin (). Y-segment1.y;
 Segment1.x = segment0.x-W;
 Segment1.y = segment0.y-h;
}
     We can see how the new code block calculates the distance from segment1 to segment0 and uses them to calculate
Angle, rotation, and segment1. Test the example program and observe that it is very real.
Dual-joint system.
     Now we have a lot of copied code, which is not very good. If you want to add more joints, this file will
Repeated codes become longer and longer. The solution is to separate the copied code into a project named drag.
Function. This function requires you to know the joints to be dragged and the X and Y of the points to be dragged. Then we can drag
Segment0 to mousex, Mousey, and segment1 to segment0.x, segment0.y. The Code is as follows (same
As shown in twosegmentdrag. ):
Package {
 Import flash. display. Sprite;
 Import flash. Events. event;
 Public class twosegmentdrag extends sprite {
  Private var segment0: segment;
  Private var segment1: segment;
  Public Function twosegmentdrag (){
    Init ();
  }
  Private function Init (): void {
    Segment0 = new segment (100, 20 );
    Addchild (segment0 );
    Segment1 = new segment (100, 20 );
    Addchild (segment1 );
     Addeventlistener (event. enter_frame, onenterframe );
   }
   Private function onenterframe (Event: Event): void {
     Drag (segment0, mousex, Mousey );
     Drag (segment1, segment0.x, segment0.y );
   }
   Private function drag (segment: Segment, xpos: Number, ypos: Number): void {
     VaR DX: Number = xpos-segment. X;
     VaR DY: Number = ypos-segment. Y;
     VaR angle: Number = math. atan2 (dy, dx );
     Segment. Rotation = angle * 180/Math. Pi;
     VaR W: Number = segment. getpin (). X-segment. X;
     VaR H: Number = segment. getpin (). Y-segment. Y;
     Segment. x = xpos-W;
     Segment. Y = ypos-h;
   }
 }
}
Drag more joints
      Now we can add multiple joints at will. Assume that six joints are placed and named from segment0
Segment1 and store them in an array. Then, use the for loop to call the drag function for each joint. You can
Find this example in multisegmentdrag.. The Code is as follows:
Package {
 Import flash. display. Sprite;
 Import flash. Events. event;
 Public class multisegmentdrag extends sprite {
  Private var segments: array;
  Private var numsegments: uint = 6;
  Public Function multisegmentdrag (){
    Init ();
  }
  Private function Init (): void {
    Segments = new array ();
    For (var I: uint = 0; I <numsegments; I ++ ){
      VaR segment: Segment = new segment (50, 10 );
      Addchild (segment );
      Segments. Push (segment );
    }
    Addeventlistener (event. enter_frame, onenterframe );
  }
  Private function onenterframe (Event: Event): void {
    Drag (segments [0], mousex, Mousey );
    For (var I: uint = 1; I <numsegments; I ++ ){
      VaR Segmenta: Segment = segments [I];
      VaR segmentb: Segment = segments [I-1];
      Drag (Segmenta, segmentb. X, segmentb. y );
     }
   }
   Private function drag (segment: Segment, xpos: Number, ypos: Number): void {
     VaR DX: Number = xpos-segment. X;
     VaR DY: Number = ypos-segment. Y;