# Animate Along Bezier Curve

Actionscript:
1. var circle:Shape = Shape(addChild(new Shape));
2. with(circle.graphics) beginFill(0x000000), drawCircle(0,0,5);
3.
4. var bezierPoint:Point = new Point();
5. function bezier(a:Number, x1:Number, y1:Number, x2:Number, y2:Number, x3:Number, y3:Number):void {
6.         var b:Number =1-a;
7.         var pre1:Number=a*a;
8.         var pre2:Number=2*a*b;
9.         var pre3:Number=b*b;
10.         bezierPoint.x = pre1*x1 + pre2*x2  + pre3*x3;
11.         bezierPoint.y = pre1*y1 + pre2*y2 + pre3*y3;
12. }
13.
14. var inc:Number = 0;
15. var theta:Number = 0;
16.
18. function onLoop(evt:Event):void {
19.
20.      graphics.clear();
21.      graphics.lineStyle(0,0xFF0000);
22.      graphics.moveTo(200,200);
23.      graphics.curveTo(mouseX, mouseY, 400, 200);
24.
25.     theta+= .05;
26.     inc = .5 + .5*Math.sin(theta);
27.
28.     bezier(inc, 200, 200, mouseX, mouseY, 400, 200);
29.     circle.x = bezierPoint.x;
30.     circle.y = bezierPoint.y;
31. }

The above animates a circle along a quadratic bezier curve. This snippet was written in response to a question spurned by some of the recent bezier posts. I used Math.sin() to animate the circle but you could just as easily use modulus... simply replace lines 25-26 with the following:

Actionscript:
1. inc += .03;
2. inc %= 1;

1. Yu-Chung Chen
Posted January 27, 2009 at 1:14 pm | Permalink

Hi Zevan,

Just wanted to say thank you because this snippet is exactly what I need for a university project.

Greatly appreciated,
YC

2. Zevan
Posted January 27, 2009 at 1:33 pm | Permalink

Hey Yu-Chung,

Glad to hear you’ll be able to make use of this snippet. If you have any questions or problems related to it… feel free to post them here… and I’ll help if I can 3. Philipp
Posted November 2, 2009 at 8:33 pm | Permalink

Hi. This is a really cool snippet. I am quite new to AS3, but I am trying to do something quite advanced and am a bit lost. I am trying to animate an electron flying somewhat randomly around a point (the nucleus). I don’t want the animation to be fixed on a predefined Bezier curve, but would rather continually add new points to the Bezier while removing points which the electron has already passed. By adding the points randomly I hope to get something that looks like nice, random animation. Do you know if this is possible?

Currently I am just animating the electron to a new random point within a certain radius of the nucleus, once the electron reaches the new point, I just add another and it flies there, etc. The problem with this is that the animation ends up looking very angular, like the electron is just turning on a dime.

Any input would be much appreciated!