AS:Constant Distance
AS:Main
Saw there wasn't one of these yet, so decided to make one. Any errors/mistakes please alert me straight away.
Ever wanted to ensure 2 points (e.g movie clip co ordinates) are always a constant distance from eachother?
We can do this using trigonometry through Kinematics (or Inverse Kinematics)
Required reading:
-AS:Trigonometry by BleeBlap
-A helpful tut by Denvish
-Basic knowledge of most AS:Main topics
Kinematics is the process of finding a point in space when given the length and angle of an armature.
Kinematics can be used to achieve effects such as a ragdoll, or to bind wheels on a car/bike together during gameplay.
I’m just going over the VERY BASICS in this tutorial; the possibilities for application of the concept are near endless. However going into detail here would be unnecessary and over complicated.
The Trig
First take a look at the example diagram .
Try dragging point 2 (bottom one) with the mouse, you will see that point 1 (top one) is pushed away to always keep a constant distance.
We work with the points as a triangle, with the distance between their _x co ordinates acting as side X, and the distance between their _y co ordinates acting as side Y.
Place your two point mc’s on stage, give them instance names point1_mc and point2_mc.
In our example, point 2 is made draggable when clicked, and will have authority over point 1, force changing its _x and _y values to always maintain a constant distance away.
This means our kinematics code will just be applied to point 1, as point 2 isn’t being affected.
(Bear in mind Flash works with radians instead of degrees while performing trigonometric equations)
I’m coding on the frame itself for simplicity purposes during the tutorial, but you can easily change yours to be placed onto the movie clips themselves.
var hypotenuse:Number = 170;
//Our defined hypotenuse side length (see diagram)
//This is important for finding the allowed X and Y sides of the triangle, and determines the distance the points will always be from eachother
_root.onEnterFrame = function() {
//Manipulates values every frame (example is running at 30 fps)
point2_mc.xDist = point1_mc._x-point2_mc._x;
//Finds the length of side X in the diagram by subtracting point 2's _x from point 1's
point2_mc.yDist = point1_mc._y-point2_mc._y;
//Finds the length of side Y in the diagram by doing the same with _y co ordinates
point2_mc.angle = Math.atan2(point2_mc.yDist, _root.point2_mc.xDist);
//Finds the Angle marked in the diagram using tangent (opposite side (Y) / adjacent side (X)
point1_mc._x = point2_mc._x + (Math.cos(point2_mc.angle)*hypotenuse);
// In triangles ,we know that an angles Cosine value is equal to the result of dividing the side adjacent to it (side X in the diagram) by the Hypotenuse side.
We can work this formula backwards to find the allowed value of side X when both the Angle and the Hypotenuse already have values.
We first find the cosine of the angle, using Math.cos()
We then multiply this value by the hypotenuse, to get side X. (remember Cosine = Side X / Hypotenuse). So side X is given a value based on the values of the Hypotenuse and the Angle.
As the Hypotenuse is always constant, the X value will be lengthened or shortened depending on the angle, and the effect will be that when the _y distance between the points become greater, the _x distance will become shorter in ratio.
We then have to add side X onto the _x co ordinate of point 2, to get point 1’s allowed _x co ordinate.
point1_mc._y = point2_mc._y + (Math.sin(point2_mc.angle)*hypotenuse);
This is basically the same method, but finds side Y instead of side X (because The Sine value of an angle = opposite side (side Y in diagram ) / hypotenuse).
Side Y is then added onto point 2’s _y co ordinate value to get point 1’s allowed _y value.
point2_mc.onPress = function() {
point2_mc.startDrag();
};
//Makes point 2 draggable when clicked
point2_mc.onRelease = function() {
point2_mc.stopDrag();
};
//Makes point 2 stay put when released
};
//End of enterFrame handler
Complete code on Frame
var hypotenuse:Number = 170;
_root.onEnterFrame = function() {
point2_mc.xDist = point1_mc._x-point2_mc._x;
point2_mc.yDist = point1_mc._y-point2_mc._y;
point2_mc.angle = Math.atan2(point2_mc.yDist, _root.point2_mc.xDist);
point1_mc._x = point2_mc._x+(Math.cos(point2_mc.angle)*hy
potenuse);
point1_mc._y = point2_mc._y+(Math.sin(point2_mc.angle)*hy
potenuse);
point2_mc.onPress = function() {
point2_mc.startDrag();
};
point2_mc.onRelease = function() {
point2_mc.stopDrag();
};
};
Examples and other Tutorials
-GotoAndPlay.it - slightly more in-depth and complex
-Something for the hardcore people
-A VERY WEIRD example of Kinematics in action
-Everyone's favorite
