Animate Along Bezier Curve

  1. var circle:Shape = Shape(addChild(new Shape));
  2. with( beginFill(0x000000), drawCircle(0,0,5);
  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. }
  14. var inc:Number = 0;
  15. var theta:Number = 0;
  17. addEventListener(Event.ENTER_FRAME, onLoop);
  18. function onLoop(evt:Event):void {
  20.      graphics.clear();
  21.      graphics.lineStyle(0,0xFF0000);
  22.      graphics.moveTo(200,200);
  23.      graphics.curveTo(mouseX, mouseY, 400, 200);
  25.     theta+= .05;
  26.     inc = .5 + .5*Math.sin(theta);
  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:

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

This entry was posted in Graphics, bezier, graphics algorithms, motion and tagged , . Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.


  1. 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,

  2. 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!

Post a Comment

Your email is never published nor shared. Required fields are marked *