LogoLogo
  • Home
  • Projects
  • About
  • Contact

Animating Bezier Curves

Devon O. · March 27, 2010 · Actionscript · 11 comments
6

The other day I got the notion in my head that I wanted to draw some bezier curves in an animated fashion. I’m sure this has been done a million times before, but sometimes reinventing the wheel can be a good learning experience, so I turned to my good friend Wikipedia for some quick explanation. When you go to the Wikipedia entry for Bezier Curve, you see close to the top of the page that the formula for a quadratic b curve looks like this:

Seems kinda cryptic at first glance, but it’s pretty simple when broken down. P0 is our starting point, P1 is our control point, P2 is our end point and t is time. Written in actionscript then, we can get the x and y positions of our curve with the following couple lines:

C#
1
2
var xpos:Number = ( (1 - time) * (1 - time)) * startPoint.x + 2 * (1 - time) * time * controlPoint.x + (time * time) * endPoint.x;
var ypos:Number = ( (1 - time) * (1 - time)) * startPoint.y + 2 * (1 - time) * time * controlPoint.y + (time * time) * endPoint.y;

You can see at the end of the formula that time (t) is a number that progresses from 0 to 1. Now in Flash/Actionscript terms, whenever you think of a numeric property changing its value over time, the word “tween” is the first thing that should pop into your head. My two (at least at the moment) favorite tweening engines are the Greensock TweenLite/TweenMax and the libspark BetweenAS3 engine. Both have their advantages and drawbacks. My general rule of thumb (for no real reason) is that I use TweenLite with Flashplayer 9 projects and BetweenAS3 for flashplayer 10. So for that reason, for the quick demo below, I went with BetweenAS3 (Note: if you’ve never used it before, you can check out the intro article I wrote over on TechLabs). Generally speaking all we need to do is create a start point, a control point, an end point, tween a time property from 0 to 1 and on every update use the 2 lines of script above to plot our curve.

As a quick aside, BetweenAS3 is able to handle both AS3 style events and old AS2 style callback functions. Personally speaking, I prefer using events over callbacks whenever possible, however callbacks tend to be quicker and less expensive. So another general rule of thumb: when dealing with data events or just general projects, tend to favor the AS3 Event structure – it will keep your code cleaner, it’s more object oriented, and it aids decoupling. When dealing with animation, games or other things where time and memory of the essence (e.g. mobile devices) go with callbacks as I did below.

Here then is a very quick animated Bezier Curve example:

C#
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
package  {
 
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.geom.Point;
    import org.libspark.betweenas3.BetweenAS3;
    import org.libspark.betweenas3.easing.Quad;
    import org.libspark.betweenas3.tweens.ITween;
 
    /**
     * Quick test of animated Bezier Curve
     * @author Devon O.
     */
 
    [SWF(width='500', height='300', backgroundColor='#CCCCCC', frameRate='60')]
    public class CurveTest extends Sprite {
 
        // Keep this public (or add accessor methods) to make accessible to tweening engine
        public var time:Number;
 
        private var _tween:ITween;
 
        // our 3 points
        private var _startPoint:Point;
        private var _controlPoint:Point;
        private var _endPoint:Point;
 
        public function CurveTest() {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
 
        private function init(event:Event = null):void {
            // start at the left edge two thirds of the way down
            _startPoint = new Point(0, stage.stageHeight * .66);
 
            // curve to the top center of the stage
            _controlPoint = new Point(stage.stageWidth * .5, 0);
 
            // and end on the right side two thirds down
            _endPoint = new Point(stage.stageWidth, stage.stageHeight * .66);
 
            // draw the curve when you click
            stage.addEventListener(MouseEvent.CLICK, clickHandler);
        }
 
        private function clickHandler(event:MouseEvent):void {
            // reset everything
            if (_tween != null && _tween.isPlaying) _tween.stop();
            graphics.clear();
            graphics.moveTo(_startPoint.x, _startPoint.y);
            graphics.lineStyle(2);
            time = 0;
 
            animateCurve();
        }
 
        private function animateCurve():void {
            // our tween to get time to go from 0 to 1 in 3 seconds
            _tween = BetweenAS3.tween(this, { time:1 }, null, 3.0, Quad.easeInOut);
            // using an anonymouse callback rather than event for speed
            _tween.onUpdate = drawCurve;
            _tween.play();
        }
 
        private function drawCurve():void {
            var xpos:Number = ( (1 - time) * (1 - time)) * _startPoint.x + 2 * (1 - time) * time * _controlPoint.x + (time * time) * _endPoint.x;
            var ypos:Number = ( (1 - time) * (1 - time)) * _startPoint.y + 2 * (1 - time) * time * _controlPoint.y + (time * time) * _endPoint.y;
 
            graphics.lineTo(xpos, ypos);
        }
    }
}

And that will give you this (click on the .swf’s stage to see it in action):

Get Adobe Flash player

And there you have a simple animated Bezier Curve.

So what would you use it for? Well, I’m sure you can think of any number of uses (plotting a line between two points on a map always looks nice when animated and curvy).

The whole reason I started digging into this though was because of a tweet from @mrdoob linking to an explanation of the classic Moppi Flower effect and I wanted to do something similar. And so, using the simple math above came up with the item below.

Get Adobe Flash player

Rockin good fun…

  Facebook   Pinterest   Twitter   Google+
bezier
  • Animating Bezier Curves
    March 27, 2010 · 11 comments
    4969
    6
    Read more
  • Photoshop Blend Modes for Unity3D
    June 21, 2018 · 0 comments
    So here's a small thing that may help some folks out. Ages ago, while
    4702
    21
    Read more
  • 3D Box Transition Effect in Flash Player 10
    August 14, 2008 · 13 comments
    2649
    2
    Read more
11 Comments:
  1. Great article. Animating beziers are always nice, your flower effect at the bottom of the post especially so.

    Lawrie · March 27, 2010
  2. mighty fine

    Willie · March 27, 2010
  3. http://bezier.ru/wp-content/uploads/2008/06/bezier.swf?demo=1

    Alexey · March 30, 2010
  4. wow,
    that’s very sweet.

    Pedram · April 10, 2010
  5. Great! I’ve just needed this today :)

    Og2t · October 21, 2010
  6. Cool, Tomek! Glad something here could help…

    Devon O. · October 21, 2010
  7. The equation was just what I needed. Thanks!

    Sold Out Activist · December 02, 2010
  8. This is great and works perfect! How would I move the line over a percentage instead of time?

    Let’s say I want this effect for a preloader in which the line is animated over percentage loaded instead of time?

    leo · August 15, 2011
  9. Hey Leo,

    Thanks for the comment.

    Since time ranges from 0 to 1 in the equation, you could just swap that out with percent loaded (again ranging from 0 to 1). That should work fine as a preloader effect.

    Devon O. · August 15, 2011
  10. Hello Devon,

    Just wanted to take a minute and say thank you for posting this. I’m working on a little android project and was looking for a way to implement moving along a curve – this was the guide that really helped my understanding. I was able to implement and it and it looks really cool =)

    Thanks again

    Ninja · August 02, 2012

Leave a Comment! Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Devon O. Wolfgang

AIR | Unity3D | AR/VR

Unity Certified Developer

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development” and “Starling Game Development Essentials”

Reviewer of “The Starling Handbook”

Unity Engineer at Touch Press.

Categories
  • Actionscript (95)
  • AIR (16)
  • Flash (99)
  • Games (7)
  • Liberty (13)
  • Life (53)
  • Shaders (20)
  • Unity3D (21)
Recent Comments
  • MainDepth on Unity Ripple or Shock Wave Effect
  • Devon O. on Unity Ripple or Shock Wave Effect
  • Feral_Pug on Unity Ripple or Shock Wave Effect
  • bavvireal on Unity3D Endless Runner Part I – Curved Worlds
  • Danielius Vargonas on Custom Post Processing with the LWRP
Archives
  • December 2020 (1)
  • December 2019 (1)
  • September 2019 (1)
  • February 2019 (2)
  • December 2018 (1)
  • July 2018 (1)
  • June 2018 (1)
  • May 2018 (2)
  • January 2018 (1)
  • December 2017 (2)
  • October 2017 (1)
  • September 2017 (2)
  • January 2017 (1)
  • July 2016 (1)
  • December 2015 (2)
  • March 2015 (1)
  • September 2014 (1)
  • January 2014 (1)
  • August 2013 (1)
  • July 2013 (1)
  • May 2013 (1)
  • March 2013 (2)
  • December 2012 (1)
  • November 2012 (1)
  • September 2012 (3)
  • June 2012 (2)
  • May 2012 (1)
  • April 2012 (1)
  • December 2011 (2)
  • October 2011 (3)
  • September 2011 (1)
  • August 2011 (1)
  • July 2011 (1)
  • May 2011 (2)
  • April 2011 (2)
  • March 2011 (1)
  • February 2011 (1)
  • January 2011 (2)
  • December 2010 (3)
  • October 2010 (5)
  • September 2010 (1)
  • July 2010 (2)
  • May 2010 (5)
  • April 2010 (2)
  • March 2010 (7)
  • February 2010 (5)
  • January 2010 (5)
  • December 2009 (3)
  • November 2009 (1)
  • October 2009 (5)
  • September 2009 (5)
  • August 2009 (1)
  • July 2009 (1)
  • June 2009 (2)
  • May 2009 (6)
  • April 2009 (4)
  • March 2009 (2)
  • February 2009 (4)
  • January 2009 (1)
  • December 2008 (5)
  • November 2008 (2)
  • September 2008 (1)
  • August 2008 (6)
  • July 2008 (6)
  • June 2008 (9)
  • May 2008 (4)
  • April 2008 (3)
  • March 2008 (4)
  • February 2008 (9)
  • January 2008 (7)
  • December 2007 (6)
Copyright © 2021 Devon O. Wolfgang