dcsimg
A Flash Developer Resource Site

Results 1 to 2 of 2

Thread: bezier curves

  1. #1
    Junior Member
    Join Date
    Aug 2000
    Posts
    21
    id like to learn how to achieve bezier curves in flash 4 or 5. a site with a downloadable .fla would suffice, but someplace with a tutorial would be ideal. the best i found so far was a .fla done using flash3.

    thanks for all your help!


    shaheeb

  2. #2
    Senior Member
    Join Date
    Jun 2000
    Posts
    911
    Well you can search for "Bezier" in the movies section here to find open sources.

    To know how to derive the equations for the bezier curve you need to know of Bernstein's basis functions. Here is the equation in its most basic form:
    Code:
    1 = t + (1 - t)
    Now hopefully you can see just how simple that equation is. For all values of "t" the equation will hold true..a bezier curve is only interested in values for "t" between 0 and 1 though. But there is more to it than just that if you want a bezier curve. Depending on what type of curve you want this next part will be a little different. Im going to be dealing with a quadratic bezier curve because it is the easiest for me to explain...it should be easy for you to extrapolate on what I am talking about to suite your needs though. It is called "quadratic" because we are going to square both sides of the above equation...like this:
    Code:
    1^2 = (1 + [1 - t])^2
    And here is how you would expand that equation:
    Code:
    1^2 = (t + [1 - t])(t + [1 - t])
    
    -- FOIL out the binomial --
    
    1 = t^2 + t(1 - t) + t(1 - t) + (1 - t)^2
    
    -- combine like terms --
    
    1 = t^2 + 2t(1 - t) + (1 - t)^2
    Now I could have expanded that last equation even more but there is no need to. So what you want to do now is seperate those three terms into equations like this:
    Code:
    e1 = t * t;
    e2 = 2 * t * (1 - t);
    e3 = (1 - t) * (1 - t);
    Then with those equations and the positions of your control points you can find the curve. And just in case you did not know a quadratic bezier curve is control by three points: a beginning and end point and a control point. Here is a sample code (in Flash 5 syntax) to help you visualize what I am talking about (this assums you have three movie clips name p1, p2, and p3 for your control points) :
    Code:
    for (var j = 1; j <= 3; j++) {
    	this["px"+j] = this["p"+j]._x;
    	this["py"+j] = this["p"+j]._y;
    }
    depth = 1;
    for (var t = 0; t <= 1; t += .05) {
    	e1 = t * t;
    	e2 = 2 * t * (1 - t);
    	e3 = (1 - t) * (1 - t);
    	x = px1 * e1 + px2 * e2 + px3 * e3;
    	y = py1 * e1 + py2 * e2 + py3 * e3;
    	duplicateMovieClip ("point", "point"+depth, depth);
    	this["point"+depth]._x = x;
    	this["point"+depth]._y = y;
    	depth++;
    }
    Hopefully that will help you see everything. I also tested that out in Flash and it works. If you need help with deriving the equations for a cubic bezier curve or if you have any questions about the code/explanation just ask.

    Good luck.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center