User Tag List

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 18

Thread: Bézier Curves for Dummies (TDC version)

  1. #1
    Clicker Multimedia Fusion 2

    Join Date
    Sep 2006
    Location
    Britain, South Coast
    Posts
    1,030
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bézier Curves for Dummies (TDC version)

    A copy of my article on The Daily Click, so it might reach and help a wider audience.

    The purpose of this article is to explain, as simply as possible, how to use Bézier Curves in your games.


    What are they and Why?

    Firstly what they are.

    A Bézier curve is, in its simplest form, just a line from one point to another. It has a start point, and an end point.

    However, it can be extended with what I call 'Helper Points'. These helper points act as guides to control the direction of the line when it starts and ends. So if you have a four-point Bézier Curve (start point, end point, and two helpers in the middle), then the curve will go like this:



    Starts at p1 (Start point), facing p2 (first helper).
    It goes towards p2, but long before it hits p2 it will start to curve off towards p3 (second helper).
    Long before it reaches p3, it will start to curve again, this time towards p4 (end point).
    It finally hits p4, and the line has finished.

    That's a 4th-order Curve (otherwise known as a Cubic Curve).

    The basic kinds of Bézier you can have are as follows:

    - 2nd Order - Linear - Just two points, this is a straight line. But it's crucial to know how straight lines work, because straight lines are the key to doing the Bézier Curve, as you'll see later.
    - 3rd Order - Quadratic Curve - Three points. The line exits p1 aiming for p2. Before reaching p2, it changes its mind and steers towards p3. It hits p3, and the curve ends. See below:



    - 4th Order - Cubic Curve - Four points, as explained above.
    :sick: - 5th Order and above - More than four points. These aren't very useful, since the more helper points you have, the more averaged out the curve becomes. It's better to combine lots of Cubic Curves than use one complex higher-order curve, so we won't consider how to do anything above the 4th Order.

    Now about that why...

    Different curves obviously have different potential uses, but hopefully you can see from the basic explanations above what kind of things they can be used for.

    Cubics are by far the best, because they let you set, not just the destination of an object, but also the angle that it will approach at. Imagine the uses for missiles! You can design a missile that will target the rear of a ship (where armour is weakest). As the enemy moves around, the missile will update its course in realtime to reach its target from the desired angle, like this:



    You can also create these uber-mean-looking strider and tentacle creatures. And monsters with long curvy necks are easy to make too, using the helper points so that the snake-like body of the creature always enters the head from the back, and to firmly root its base to the floor so it bends realistically. The possibilities are endless.



    You wanna add these things to your next platformer or sidescrolling sh'mup don't you?

    FORMULAE

    What follows is our little explanation of the formulae for Béziers. Can I just point out right now that you do not need to be great at maths in order to understand these. Personally, I'm number dyslexic, but I managed to understand this even after reading much more complicated explanations than this will ever be. So seriously, you'll be fine, they're pretty logical.

    2nd Order - Basic Lines

    This is the formula for linear curves (which are just straight lines actually):

    p1 + (p2 - p1) * t

    The meaning of the symbols is as follows:
    p1 = Point 1's X or Y position (start point)
    p2 = Point 2's X or Y position (end point)
    t = Time. This is a decimal value between 0 and 1. At 0, you're at the start, and at 1, you're at the end. If you use the above formula on an object, then gradually increasing t will cause the object to move along the curve.

    What it's doing is pretty simple. It finds the distance between the two points (p2 - p1), and it gets just a fraction of that distance, however much is needed by t. So if t is 0.5, it'll only return half the total distance.
    It then adds that to the position of the first point, and you're done.

    That'll plot the coordinates for your line. Just keep increasing t, and you'll get a neat little line.

    Just a little warning now; for Béziers that have more than two points, t isn't regular. You'll find this when you test it. If you increase t by 0.1 every frame, and you draw a dot along the curve every frame, you'll find that the dots are NOT equally spaced. That's an inherent problem with Bézier Curves, and it's unavoidable because of the way they work.

    Anyway, if you wanted to apply the above formula in MMF, you'd do something like this:
    Create three objects (a start and end point, and a follower).
    Give the follower an Alterable Value - we'll call it t.

    Set X of follower to:
    x(Start) + (x(End) - x(Start)) * t("Follower")

    Set Y of follower to:
    y(Start) + (y(End) - y(Start)) * t("Follower")

    Hopefully, that's fairly simple. It's just p1 + (p2 - p1) * t

    3rd Order - Quadratic Curves

    You've probably already made one of these before, although I doubt they called it a quadratic curve, LOL!
    At primary/elementary school, sometimes the teachers get kids to draw a right angled triangle, and connect it with lines, like this:



    See the curve that's formed? Well that's a 3rd Order Bézier Curve in all its glory! Say hello to the curve!!

    The key to drawing it in MMF is very similar to the above... it just needs more lines! Remember how I said that lines are the key to Béziers? Well I hope you remembered that basic formula above, cos you're gonna need it!! :P

    p1 + (p2 - p1) * t = q1;

    p2 + (p3 - p2) * t = q2;

    q1 + (q2 - q1) * t


    What we're doing here is using TWO lines. I've called them q1 and q2. As t gradually increases, it keeps giving us a coordinate for q1 and q2 (as we move further and further along those lines).

    Instead of putting an object along those lines, as we did with the straight line, we use those coordinates to plot a THIRD line between them. This is the line we're gonna actually draw.

    Since the values of q1 and q2 are constantly changing (as t changes), so is the line drawn between the two. We move along this third line using t as well, and the result is a Quadratic Bézier Curve.

    This nifty animation is hosted by Wikipedia, and I think it explains what's going on quite neatly:



    -- NOTE: Using it in MMF --

    We need to break away just for a second here, cos there's a teensy weensy problem with the above. The problem is that MMF won't let you define variables in the expression editor. So our formula would instead become:

    (p1 + (p2 - p1) * t) + ((p2 + (p3 - p2) * t) - (p1 + (p2 - p1) * t)) * t

    ...and that's pretty ugly isn't it.

    The problem with Bézier curves is that even though they are, in principle, fairly simple, they can end up looking like a very very ugly formula if you can't use variables to cut them down (like we did when I was explaining them to you). And it gets worse when there are four, five or more points to deal with!

    To get around it, I would write the expression out like this first (you may prefer to do it in notepad, so you can use Find and Replace to automate this process):

    Code:
    x("p 1") + (x("p 2") - x("p 1")) * t("Follower") = q1
    
    x("p 2") + (x("p 3") - x("p 2")) * t("Follower") = q2
    
    q1 + (q2 - q1) * t("Follower")
    -
    Then, in a stroke of genius, I would select the q1 code (NOT including = q1), find where it says 'q1' in the final formula, surround it with ( brackets ) first, and then paste the code over the top. And the same with q2. The result?

    Code:
    (x("p 1") + (x("p 2") - x("p 1")) * t("Follower")) + ((x("p 2") + (x("p 3") - x("p 2")) * t("Follower"))
    
    - (x("p 1") + (x("p 2") - x("p 1")) * t("Follower"))) * t("Follower")
    -
    Looks complicated, aye? But the important thing is, it wasn't complicated when I wrote it. The hard part was done when it was a nice simple little formula. Now it looks worse than porridge, but at least it's a porridge that only the MMF interpretter has to deal with. You may want to keep a record of the original, simplified version in Notepad. In case you bodged it and need to change something.

    Alternatively, you could use Alterable Values to hold the formulae for q1 and q2. But that's just a waste of some perfectly good alterable value slots in my opinion.

    4th Order - Cubic Curves

    Here it is, the Daddy, and the most compelling reason for anyone to bother reading this article. The Cubic Bézier Curve is upon us!!

    It's a little more complicated, so we... add more lines!!

    p1 + (p2 - p1) * t = q1
    p2 + (p3 - p2) * t = q2
    p3 + (p4 - p3) * t = q3

    q1 + (q2 - q1) * t = r1
    q2 + (q3 - q2) * t = r2

    r1 + (r2 - r1) * t

    (at this point, I'll accept that using Alterable Values could be a good idea!!)

    It's literally just an extension of the 3rd-Order Curve. There are more lines, but they're still just lines.

    We have four points, which connect into 3 lines as shown below. I've labelled the lines q1, q2 and q3.



    These three lines are gonna become 3 sets of coordinates as we travel along them using t. Since we now have 3 sets of coordinates, we can treat them just like a Quadratic (3-point) Curve.

    The final result is a Bézier Curve, YAY!

    Once again, here's the Wikipedia animation:




    If you don't care about learning and you just wanna use 'em...

    Then okay, I won't stop you. You don't *have* to learn how Bézier curves work in order to use them, you can just copy and paste a formula. So if you fall into this category, and you don't appreciate wisdom, and you have no self respect, and you were raised by alien rodents, then here you go:

    --- To Use:
    Create an object for each point in the curve you want. Name each point like this:

    p # where # is the number of the point. So if you're making a 4th-Order Curve (Cubic), you'll have some small active objects called 'p 1', 'p 2', 'p 3' and 'p 4'.

    Also, create an object called 'F'. This will be your Follower object, and you can rename him after you've pasted the formula.
    Give that object an alterable value called t.

    NOTE: These may take some time to paste, as MMF will insist on colour-coding everything.

    --- 3rd Order - Quadratic:

    (x("p 1") + (x("p 2") - x("p 1")) * t("F")) + ((x("p 2") + (x("p 3") - x("p 2")) * t("F")) - (x("p 1") + (x("p 2") - x("p 1")) * t("F"))) * t("F")

    --- 4th Order - Cubic Curves:

    ((x("p 1") + (x("p 2") - x("p 1")) * t("F")) + ((x("p 2") + (x("p 3") - x("p 2")) * t("F")) - (x("p 1") + (x("p 2") - x("p 1")) * t("F"))) * t("F")) + (((x("p 2") + (x("p 3") - x("p 2")) * t("F")) + ((x("p 3") + (x("p 4") - x("p 3")) * t("F")) - (x("p 2") + (x("p 3") - x("p 2")) * t("F"))) * t("F")) - ((x("p 1") + (x("p 2") - x("p 1")) * t("F")) + ((x("p 2") + (x("p 3") - x("p 2")) * t("F")) - (x("p 1") + (x("p 2") - x("p 1")) * t("F"))) * t("F"))) * t("F")


    THE ARTICLE IS OVER

    If I can be bothered, I'll upload a file showing what the béziers can do. If I can't, I won't.

    Hope this helped someone, lol.

  2. #2
    Clicker Fusion 2.5 (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)

    Join Date
    Nov 2007
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Bézier Curves for Dummies (TDC version)

    Wow, cool. But, what events do I use to do this, and where does the expression actually go? I tried Always and Set X Pos (and Set Y pos), but that didn't do anything

  3. #3
    Clicker Multimedia Fusion 2

    Join Date
    Sep 2006
    Location
    Britain, South Coast
    Posts
    1,030
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Bézier Curves for Dummies (TDC version)

    You should be able to do this with:

    ALWAYS
    - F: Set 't' to t("F")+0.1
    - F: Set X Pos to (code in the article)
    - F: Set Y Pos to (code in the article)

    Remmeber that for the Y Pos, you'll need to go through the code changing any occurrences of 'X' to 'Y'. And that in order for it to work, you need to be constantly adding to the value of 't'.

    I recommend you try THIS APP, since it makes things like Bézier Curves much simpler. It comes with an example.

    It basically lets you type the expressions more like I explained them above, and then converts them to MMF expressions that you can paste into the expression editor

    I'll upload a file sometime if you're still a little lost

  4. #4
    Clicker Fusion 2.5 (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)

    Join Date
    Nov 2007
    Posts
    456
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Bézier Curves for Dummies (TDC version)

    Yay, I got it now. Woo, curvings =D

    One more question, how do I get the moving object to rotate to be facing in the direction it's moving? Preferably using the Set Angle action rather than a 32-direction animation

  5. #5
    Clicker Multimedia Fusion 2

    Join Date
    Sep 2006
    Location
    Britain, South Coast
    Posts
    1,030
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Bézier Curves for Dummies (TDC version)

    One way would be this:

    Make a second object follow the same curve, but make sure that the value of 't' is a little bit higher (so it's in front of the main object).

    Then make the main object look at that one. This should give the effect you want

  6. #6
    No Products Registered

    Join Date
    Aug 2006
    Posts
    984
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Bézier Curves for Dummies (TDC version)

    Quote Originally Posted by Raylax
    Yay, I got it now. Woo, curvings =D

    One more question, how do I get the moving object to rotate to be facing in the direction it's moving? Preferably using the Set Angle action rather than a 32-direction animation
    i had a similar problem for a test app i made; i needed to get the tangent line at a given point on the curve (preferably with just one object involved)

    i never figured that one out

  7. #7
    Clicker Multimedia Fusion 2

    Join Date
    Sep 2006
    Location
    Britain, South Coast
    Posts
    1,030
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Bézier Curves for Dummies (TDC version)

    It's a toughy, I find you can just use two followers, with one being further (higher value of t) than the other.

    Then just make the one object look at the other (either using MMFs 32 directions, or in your case, use an extension to find the angle )

  8. #8
    No Products Registered

    Join Date
    Jul 2006
    Location
    Umeĺ, Sweden
    Posts
    1,090
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Bézier Curves for Dummies (TDC version)

    Quote Originally Posted by Raylax
    One more question, how do I get the moving object to rotate to be facing in the direction it's moving? Preferably using the Set Angle action rather than a 32-direction animation
    Not that hard really.. If you notice the green line in the following image... it's the angle at the current position of the curve


    so basically something like this

    tx1 = p0x + ((p1x - p0x) * t)
    ty1 = p0y + ((p1y - p0y) * t)

    tx2 = p1x + ((p2x - p1x) * t)
    ty2 = p1y + ((p2y - p1y) * t)

    posx = tx1 + ((tx2 - tx1) * t)
    posy = ty1 + ((ty2 - ty1) * t)
    angle = sqrt( ((tx2 - tx1) pow 2) + ((ty2 - ty1) pow 2) )

    I'm a little drunk atm, so I might have gotten a few variables a little wrong x)

    Cheers!


  9. #9
    No Products Registered

    Join Date
    Aug 2006
    Posts
    984
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Bézier Curves for Dummies (TDC version)

    Quote Originally Posted by DanielRehn
    Quote Originally Posted by Raylax
    One more question, how do I get the moving object to rotate to be facing in the direction it's moving? Preferably using the Set Angle action rather than a 32-direction animation
    Not that hard really.. If you notice the green line in the following image... it's the angle at the current position of the curve


    so basically something like this

    tx1 = p0x + ((p1x - p0x) * t)
    ty1 = p0y + ((p1y - p0y) * t)

    tx2 = p1x + ((p2x - p1x) * t)
    ty2 = p1y + ((p2y - p1y) * t)

    posx = tx1 + ((tx2 - tx1) * t)
    posy = ty1 + ((ty2 - ty1) * t)
    angle = sqrt( ((tx2 - tx1) pow 2) + ((ty2 - ty1) pow 2) )

    I'm a little drunk atm, so I might have gotten a few variables a little wrong x)

    Cheers!
    ... how did i not notice that

    it should've been obvious

  10. #10
    No Products Registered

    Join Date
    Jul 2006
    Location
    Umeĺ, Sweden
    Posts
    1,090
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: Bézier Curves for Dummies (TDC version)

    Oops.. just noticed that I typed the distance formula by mistake... Anyways.. use the angle formula instead (Advanced direction object can do this atm)

Page 1 of 2 1 2 LastLast

Similar Threads

  1. Movement Prediction using bezier curves
    By The_Alee in forum Multimedia Fusion 2 - Technical Support
    Replies: 1
    Last Post: 21st October 2009, 01:42 AM
  2. Dead reckoning for dummies?
    By Tiny in forum Lacewing
    Replies: 5
    Last Post: 31st December 2008, 02:06 PM
  3. MooApi: Using Bezier Curves for dead reckoning
    By Dynamite in forum Articles
    Replies: 5
    Last Post: 8th June 2008, 09:48 AM
  4. MooClick for Dummies
    By Dynamite in forum Articles
    Replies: 0
    Last Post: 3rd February 2008, 05:49 AM
  5. Bezier Curves in MMF
    By dustingunn in forum Multimedia Fusion 2 - Technical Support
    Replies: 3
    Last Post: 4th February 2007, 12:16 AM

Posting Permissions

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