Make your own free website on Tripod.com

CurveTo and animation
by ericlin


Since Flash MX, we can draw a smooth curve dynamically by drawing API "curveTo". We supply two anchor points, one for start and one for end. We need another control point to guide the direction.

Two asked questions are:

1. Can we animate a clip to move along the dynamically drawn curve line, like we do in guide layer ?

Yes, we need a formula to calculate the math of the curve ? But is it complex ?

2. Can we animate the drawing by progressively draw a short segment of curve on Enterframe ?

Well, if we can move the clip along the curve, we can draw many short segments of straight line connecting the old position and the new position. 

Wait ! I dont want "straight line". I want "curve". Can I ? Yes, we can.

Here is the movie: The part of script for these two animations is about 20 lines only.

Play it a bit and then read my discussion.

//movie


Several points are basic before we go to deeper discussions:

1. The curve is a "Bezier curve".

2 The curveTo function adopts 3 points only. There is only one single "control point".

Please note that, in authoring enviroment, the pen tool draws a curve by 2 control points. This is different from the curveTo function. The math formula is similar but different.

What is Bezier curve ? Well, for many people, it means "smooth curve" only. If we search the web for the information about "Bezier curve", we are likely to get headache only. Most of the explanation consists of complex equations if any.

In fact, it is not so complicated. At least it is not so complicated in curveTo function. Since there is only one control point, every thing is simple enough.

When there is only one control point, the "Bezier curve" is a "Parabolic curve". Then, what is parabolic curve ? It is a curve when we throw a ball. For math term, it is a curve contains "acceleration". Or, by simple word, it is something like "gravity". 

Try to tilt your head, and  you will find that, the curve is really a "throw-ball-curve". Just that, the gravity is an oblque one not directed straight downward.


Lets observe the curve first. Please play with that movie above, drag those 3 points randomely and try to figure out the relationships between them and the curve. Then, see this diagram picture to understand the relationships.

1. The line connecting control point and the start point is "tangential" to the curve at the start point.

2. Draw a line connecting control point and the end point. And, it is also "tangential" to the curve at the end point.

3. "Tangental vector" in math world means the travel speed (vx,vy) at that moment.

4. So, this is a ball thrown with a speed toward control point, and after some time, the ball arrives at the end point with a travel speed of something like a vector from control point toward end point.

5.  Lets say, the ball travel with initial speed of 

vx0=controlPoint._x-startPoint._x; 
vy0=controlPoint._y-startPoint._y;

initial speed is the vector connecting two points - the control point and startPoint;

6. At the end, the ball travel with a speed of 

vx1=endPoint._x-controlPoint._x;
vy1=endPoint._y-controlPoint._y;

end speed is the vector connecting two points - the end point and the control point.

7. This is an accleration curve with an oblique gravity. So, we can calculate the aceleration speed of x and y; What are they ? Simple, it is the end speed- start speed.

ax=vx1-vx0; 
ay=vy1-vy0;

if we mirror the triangle to created another control point , lets say "control2". Then we connect the line into a quadrangle, acceleratioin vector is the diagnonal line. That is the vector of control->control2. This is the gravity vector, the acceleration vector. If we tilt it, we will easily see the "throw ball curve" along the gravity vector.

8. In conclusion, this is a curve path that a thrown ball travels. The 2 side of the triangle represent respectively: the initial speed, the end speed. The diagonal line is the gravity accleration vector.

Ready ?


A ball moves along the curve line

To make an animation to demonstrate a ball travelling along the curve, we need to know the x,y position of the ball in a specific time.

The formula for travel distance is: the travel of initial speed + travel by gravity accleration. In high school we remember the formula is : 1/2 g t2 .

OK, the formula is:

_x=startPoint._x+vx0*t+(1/2)*ax*t*t;
_y=startPoint._y+vy0*t+(1/2)*ay*t*t;

We know that, after 1 unit of time, the speed will be (vx1,vy1) and the position will be endPoint, so we do our animation by calculate the position for each (1/30) unit time. Thus, the animation is created out.


Animation of progressive drawing curve

To make a progressive drawing curve, we need to draw a short segment of curve by curveTo function. Here, we need to create a small triangle containg startPoint, endPoint and control point.

From the discussion about making a clip along the curve, we already know how to calculate the startPosition and endPosition. The startPosition is the old position of the ball. The end position is the present x,y of this ball. Now, where is the control point ? Well, it is easy. We know one side of the triangle (the side connecting control point and end point) represents the endSpeed of the ball. If we know the end speed, then we can calculate the control point. Or, we can use the other side (the side connecting the start Point and the control point). It represents the start speed. If we know the start speed, we can calculate the control point.

The end speed at that moment is calculated by "initial speed +accleration speed*time".

vvX=vx0+ax*t;
vvY=vy0+ay*t;

Since (controlPoint-endPoint) is the speed (vvX,vvY), we know where is the control point. The x,y of control point is end point x,y subtract this speed. 

Of course, this end speed will be the start speed of the next curve segment. We can also calculate the control point of the next curve segment by adding this speed vector to startPoint x,y 

Becareful, this is a small triangle. It is 1/30 of the unit. We need to adjust this factor.

All right, we can draw a short curve now.

Above is the mechanism and principles. You may try yourself. Then read my fla if you get no success.

download fla