Tutorial
first of all, this tutorial is only for the purpose of learning communication, and no one may use it for commercial purposes without my permission.
The approximate final result: Problem analysis, the main focus in two aspects, one is the construction of dynamic model, one is how to draw a smooth curve. First of all about the curve, first of all, referring to the 1th example, the inside of the code is very simple. http://www.webjx.com/upfiles/20070417/ 20070417213136_webjx_com_01.flahttp://www.webjx.com/upfiles/20070417/20070417213150_webjx_com_01.swf
This.createemptymovieclip ("CIRCLE_MC", 1);
This.onenterframe = function () {
With (CIRCLE_MC) {
Clear ();
LineStyle (0, 0x000000, 100);
MoveTo (275, 150);
Curveto ((275+_xmouse)/2, (150+_ymouse)/2+50,_xmouse,_ymouse);
}
The entire code is simple, just to draw a Bezier curve that follows the mouse.
One of the most important statements is 2:
MoveTo (275, 150); Is the beginning of the drawing (red dot)
Curveto ((275+_xmouse)/2, (150+_ymouse)/2+50,_xmouse,_ymouse), draw a curve where the endpoint coordinates are: _xmouse,_ymouse (blue dots). Control point coordinates are: (275+_xmouse)/2, (150+_ymouse)/2+50 (black dots).
If you think you really understand the three-point relationship, you can go on. The following problem is the establishment of a kinetic model. Here is a brief model based on classical physics, which does not involve calculus or anything.
OK, open the first two example, there are 3 points in the scene:
The original point, the instance name: Yuandian. Red
Center point, instance Name: Zhongxindian. Blue
Mouse point, instance name: Shubiaodian. Green
http://www.webjx.com/upfiles/20070417/20070417212136_webjx_com_02.flahttp://www.webjx.com/upfiles/20070417/ 20070417212319_webjx_com_02.swf
Then write as on the frame:
This.createemptymovieclip ("_MC", 1);
tx=0;ty=0;
ax=0;ay=0;
i=7;
q=0.81;
lenmax=220;
r=0.2;
Pianyi=0, all the above parameters, for the time being ignored.
This.onenterframe = function () {
Shubiaodian._x=_xmouse;
shubiaodian._y=_ymouse;//the mouse punctuation component on the mice, of course, you can use drag, the effect is the same.
lenx=shubiaodian._x-yuandian._x;
leny=shubiaodian._y-yuandian._y;
LEN=MATH.SQRT (Lenx*lenx+leny*leny);
Pianyi= (Lenmax-len) *r;
if (pianyi<0) pianyi=0;
The part that calculates the offset is temporarily ignored
Ax= ((yuandian._x+shubiaodian._x)/2-zhongxindian._x)/I;
This statement is the horizontal acceleration of the computing center point, which, by default, should be at the center of the origin and the mouse point. Therefore, by subtracting the "actual coordinates" from the "objective coordinates" of the center point and multiplying the previous coefficient, the acceleration of the center point in the horizontal direction can be obtained.
Ay= ((yuandian._y+shubiaodian._y)/2-zhongxindian._y+pianyi)/I;
For the same reason in Y-values, the coordinates of the center point are shifted slightly downward to form a sense of gravity. The calculation of the offset is then explained.
TX +=ax;//The speed of the point in the horizontal direction is the speed plus acceleration.
Ty +=ay;//ditto, portrait on the
TX *=q; Let the center point of the speed gradually decay, so that it appears to slowly stop the effect. You can try changing the Q value to 1 or 0.
Ty *=q; Ditto
Zhongxindian._x +=tx; Let the center point move and move the TX point horizontally.
Zhongxindian._y +=ty; Let the center point move, and move the Ty point in the vertical direction.
With (_MC) {
Clear ();
LineStyle (0, 0x000000, 100);
MoveTo (yuandian._x, yuandian._y);
LineTo (zhongxindian._x, zhongxindian._y);
LineTo (shubiaodian._x, shubiaodian._y);
LineTo (yuandian._x, yuandian._y);
}
The above drawing line (straight line), is very simple, does not repeat.
}
Such a simple kinetic model is coming out. But if there is no offset calculation, the center coordinates will always be in the middle of the origin and the mouse point. So you need to calculate the offset in the y direction. The so-called offset is the distance from the center point to the bottom. In a nutshell, the offset has a feature, because it's a soft rope. , so the closer the origin and the mouse point, the greater the value should be, the smaller the opposite. We simply use this as a linear description. For example, the maximum length of a rope is: lenmax=220;
lenx=shubiaodian._x-yuandian._x;
leny=shubiaodian._y-yuandian._y;
LEN=MATH.SQRT (Lenx*lenx+leny*leny); The above statement calculates the origin and the mouse point of the distance Len, of course you can use point class to calculate more convenient, but I keep the middle school geometry writing.
Pianyi= (Lenmax-len) *r;
if (pianyi<0) pianyi=0; Calculates the offset, if found to be negative, to 0.
Next draw the line, the problem is very simple, change the line to a curve is.
http://www.webjx.com/upfiles/20070417/20070417212501_webjx_com_03.flahttp://www.webjx.com/upfiles/20070417/ 20070417212603_webjx_com_03.swf previous code is the same
With (_MC) {
Clear ();
LineStyle (0, 0x000000, 100);
MoveTo (yuandian._x, yuandian._y);
kongzhidian1_x= (yuandian._x+zhongxindian._x)/2-tx;
Kongzhidian1_y= (yuandian._y+zhongxindian._y)/2+pianyi/2-ty;
The above statement is to locate the control point 1 coordinates, first simple use the algorithm in the preceding example 1.
Curveto (kongzhidian1_x,kongzhidian1_y,zhongxindian._x, zhongxindian._y);
kongzhidian2_x= (zhongxindian._x+shubiaodian._x)/2-tx;
Kongzhidian2_y= (zhongxindian._y+shubiaodian._y)/2+pianyi/2-ty;
Curveto (kongzhidian2_x,kongzhidian2_y,shubiaodian._x, shubiaodian._y);
The above statement is to locate the control point 2 coordinates, first simple use the algorithm in the preceding example 1.
The result of this calculation is flawed, it is obvious that the center point is not a rounded corner, and show the characteristics of the edges and corners, this and the appearance of the soft rope does not conform to. Then we need to go back to Example 1 to analyze. Here's a simple way to get a conclusion. It's clear that when a curve is finished, Then the tangent of the second curve should tangent to the previous curve, that is, the control point of the second curve should be in a straight line with the control point of the previous curve, or they would have the same slope. (3 dots of a straight line on the map)
OK, in Example 4, the relevant code was changed. http://www.webjx.com/upfiles/20070417/20070417213505_webjx_com_04.swfhttp://www.webjx.com/ Upfiles/20070417/20070417213432_webjx_com_04.fla
http://space.flash8.net/bbs/attachment.php?aid=321430
http://space.flash8.net/bbs/attachment.php?aid=321431
With (_MC) {
Clear ();
LineStyle (0, 0x000000, 100);
MoveTo (yuandian._x, yuandian._y);
kongzhidian1_x= (yuandian._x+zhongxindian._x)/2-tx*2;
Kongzhidian1_y= (yuandian._y+zhongxindian._y)/2+pianyi/2-ty;
kongzhidian1._x=kongzhidian1_x;
kongzhidian1._y=kongzhidian1_y;
LineTo (kongzhidian1_x,kongzhidian1_y);
MoveTo (yuandian._x, yuandian._y);
Curveto (kongzhidian1_x,kongzhidian1_y,zhongxindian._x, zhongxindian._y);
len2_x=zhongxindian._x-shubiaodian._x;
len2_y=zhongxindian._y-shubiaodian._y;
LEN2=MATH.SQRT (len2_x*len2_x+len2_y*len2_y);
lent_x=kongzhidian1_x-zhongxindian._x;
lent_y=kongzhidian1_y-zhongxindian._y;
LENT=MATH.SQRT (lent_x*lent_x+lent_y*lent_y);
KONGZHIDIAN2_X=ZHONGXINDIAN._X-LEN2*LENT_X/LENT*P1;
KONGZHIDIAN2_Y=ZHONGXINDIAN._Y-LEN2*LENT_Y/LENT*P1;;
kongzhidian2._x=kongzhidian2_x;
kongzhidian2._y=kongzhidian2_y;
LineTo (kongzhidian2_x,kongzhidian2_y);
MoveTo (zhongxindian._x, zhongxindian._y);
Curveto (kongzhidian2_x,kongzhidian2_y,shubiaodian._x, shubiaodian._y);
There is no time to interpret the code, but simply to put the second control point on the extension line. Such a simple rope of soft power comes out. Probably trim the relevant parameters, the final result example 5.
http://www.webjx.com/upfiles/20070417/20070417212723_webjx_com_05.swfhttp://www.webjx.com/upfiles/20070417/ 20070417213702_webjx_com_05.fla
This is the simplest soft rope, just do imitation, want to reflect more complex effect, please study the relevant algorithm, and set more center point.
