cocos2d for iPhone

A fast, easy to use, free, and community supported 2D game engine

Register or log in - lost password?
  • Blog
  • Store
  • Games
  • Documentation
  • Download
  • About

cocos2d for iPhone » Programming » Programming - Everything else

Curves of all types... it's not what you're thinking

(87 posts) (44 voices)
  • Started 3 years ago by Lam
  • Latest reply from Scott

Tags:

  • 2.0
  • Action
  • AppManager
  • arc
  • bezier
  • Bezier curve
  • ccDrawColor4F
  • cocos2d 2.0
  • cocos2d lagrange curve action
  • cubic
  • curve
  • Curved Lines
  • curves
  • CurvesDemo
  • drawing curved lines
  • FRCurve
  • GL error
  • GLErrors
  • implicit declaration invalid
  • lagrange
  • lagrange curve
  • line
  • lines
  • OpenGL
  • path
  • quadratic
  • rootViewController
  • shaders
  • spline
123Next »
  1. Lam
    Moderator

    A while back I wrote a post helping Decept with an idea:
    http://www.cocos2d-iphone.org/forum/topic/2956#post-18361

    Well I've cleaned up that code and I've implemented a bezier and lagrange curve using a more extendable form of deCasteljau and Aitken algorithm in order to produce any order curve than just cubic and quadratic.

    If you look into CCLines.m you'll find the implementations ccpAitkenLagrange and ccpDeCasteljauBezier.

    But generally when we need curves we really only need cubic and quadratic forms of either bezier or lagrange curves.

    Sometimes it's hard to really picture how the two curves behave so I've whipped up a quick demo code to try out so you can get to know them a bit better.

    Curves Demo

    Posted 3 years ago #
  2. alien_ken
    Member

    Interesting. Downloading it now. Also, lol at the subject line.

    Posted 3 years ago #
  3. mhussa
    Member

    Excellent demo, I especially like the cubic lagrange curve because the points of the curve move through the control points. THAT is VERY useful if you want a smooth curve to go through predefined intermediate points (e.g. making a homing missile avoid obstacles).

    Thanks Lam.

    Posted 3 years ago #
  4. mobilebros
    Moderator

    Yeah I agree with mhussa, the lagrange curve is invaluable. Nice work on a great contribution.

    Posted 3 years ago #
  5. slycrel
    Member

    Excellent work. Wish I had that ccpCubicFromQuadBezier function a few days ago, I just wrote my own. Thanks for sharing!

    Posted 3 years ago #
  6. zeraien
    Member

    Thanks a million for sharing this!

    It works perfectly, although I moved the ccpDeCasteljauBezier into the header file and used it directly with an arbitary number of points like: ccpDeCasteljauBezier(newPoints, newCount, originalPoints, originalCount);

    :-P

    Posted 3 years ago #
  7. MrMojo
    Member

    this looks great. thanks so much!

    If the starting point and end point of the lines were the same point, does anyone know how to test if a point falls inside the closed area of the curve?

    That'd make it easy to do collision testing on smooth closed paths like in soosiz:

    </img>

    Regardless - Thanks!

    Posted 3 years ago #
  8. Lam
    Moderator

    Thanks everybody for all your comments!

    @MrMojo
    I think a solution for your problem stems from the Jordan Curve theorem.
    You have two points A and B. A is your point that you need to check if it's inside a closed curve. B is an arbitrary point that you know is outside of your closed curve (this is easy if you choose a point far enough).

    You then loop through your set of points that make up the curve and do an intersection test with the AB segment.

    Count up the intersections and then we have the solution:
    if the intersections are:

    • odd, then your point is inside the curve
    • even, then the point is outside the curve

    ----

    The next biggest problem is to speed up the intersection loop test by storing your set of curve points in some efficient data structure so that you don't have to loop through every segment of the curve to find the intersection.

    @zeraien
    Oh yeah, whoops, totally move that function to the header so you can access it.

    Posted 3 years ago #
  9. eoin
    Member

    Great demos. I like lagrange curves, put the points where you want the curve to curve too. FTW.

    Beziers have always annoyed me, at least when coding them. Trial and error.

    Posted 3 years ago #
  10. djeetee
    Member

    @Lam,

    I just found this post and it is amazing! The Langrange curves solve almost all of my problem except for one thing.

    I want to use this to generate smooth curve points based on the user's dragging their finger on the screen. Is there a good way to determine what the control points should be based on the touch events data rather than guesstimating? this is for both the cubic and quad versions.

    One other thing, this links in the post you refer to at the top (http://www.cocos2d-iphone.org/forum/topic/2956#post-18361) don't seems to be there anymore.

    Finally the Curves Demo Rocks!!!

    thanks so much

    //g

    Posted 3 years ago #
  11. asinesio
    Member

    This is really fantastic stuff. Love the demo.

    Now, how to figure out how to move something along a Lagrange curve at some given speed X.

    Posted 3 years ago #
  12. digerata
    Member

    Lam, you are a life saver!

    Posted 2 years ago #
  13. Lam
    Moderator

    Someone emailed me a reply a few days ago about the lagrange curve, which gave me an excuse to dust off the old curves demo code.

    I've now introduced a way to create smooth lines with any choice of width thickness since I remembered someone asking about that sometime ago.

    Here's the latest update of the curves demo:
    http://dl.dropbox.com/u/271717/CurvesDemo.zip

    Oh and sorry for not replying so soon, but if anyone has a question just PM me or email me and I'll try to help as much as I can.

    Posted 2 years ago #
  14. onedayitwillmake
    Member

    Are you using this on an iphone-4G, one thing you might want to try to combine, is using the render texture test - to draw an - anti-aliased line using a brush.png texture.

    Since normally people will want the nice curved line showing up anti-aliased.

    Posted 2 years ago #
  15. zghotlawala
    Member

    Thanks a lot for this demo.... I'm a new bee in cocos2d world. And your demo really help me out..
    Can you please guide me how can I move the curve to its default position when ever the touches ended method is called?

    Posted 2 years ago #
  16. ganesha
    Member

    On a Retina display I get the curve at x/2 and y/2.

    Any ideas how to make the curve show up nicely on both a normal and a Retina display?

    Posted 2 years ago #
  17. Lam
    Moderator

    @genesha
    I think it probably has something to do with me not properly supporting retina display =/
    I'll read up on that and see what happens.

    Posted 2 years ago #
  18. Lam
    Moderator

    Sorry about the extremely late reply. *scratches head

    I've now placed a new demo on dropbox:
    http://dl.dropbox.com/u/271717/CurvesDemo2.zip

    Unfortunately I've run out-a space so dropbox won't sync that file! You don't have to but if you want to help me out just click on the link below and try out dropbox (it's great!). I can get a teeny bit more space and the file will sync.

    http://db.tt/4z7U0Mo

    Anyway! That's not the cool thing thing I wanted you guys to try out.

    The curve demo is now retina supported!

    But that's not the only thing... I've also started getting bored looking at simple lines and introduced a new feature.

    Varying widths!

    You can now create your own functions or use a few that I created to make interesting lines that vary the width across a curve.
    A curve with a width of 10 .... boring...
    a width of 20 ... ho hum...

    How about a curve that tapers off at the ends!
    Or a fancy ribbon!

    Well try it out and maybe it'll spark some game ideas. (Oh and I'm always up for suggestions and improvements for any of my demos)

    Posted 2 years ago #
  19. finder39
    Member

    it wont unzip. it just keeps going between being a .zip and a .cpgz :/

    Posted 2 years ago #
  20. Lam
    Moderator

    ugh.... strange

    I thought even though i don't have any space left dropbox would at least let others download. hmm

    EDIT* ok i got it working!

    Posted 2 years ago #
  21. finder39
    Member

    i was able to download it, but it wouldn't properly unzip i meant

    Posted 2 years ago #
  22. Nico...
    Member

    Hi !

    I just looked at your demo, it's really cool !

    I have a question : Would it be difficult to make a method to querry the line along its length ?
    (Maybe I'm not phrasing this right).
    I would like to use a lagrange curve as a path for a position animation.
    Let's say we define a one dimensional axis along the curve itself (that would represent time),
    we'd set intermediate positions (for keyframes for example),
    and if we could get (x,y) for dt, then it would be quite easy to mix this with
    actions, probably by making a new action that takes a series of points and a duration.

    see what I mean ? :)

    Posted 2 years ago #
  23. Lam
    Moderator

    @finder39
    Yeah that problem was an issue with me not having enough space on dropbox. I just deleted a few old examples. You should try re-downloading again.

    @Nico
    Yeah i think I get what you're saying. It is very possible to query a position of a point on the line based on it's length. It's actually very easy to implement CCActions using lagrange in exactly the same way as CCBezierTo kind of handles finding a point of the line based on time.

    If I have time tonight maybe I'll add another demo screen showing an example of a 'CCActionLagrangeTo/CCActionLagrangeBy' action.

    Posted 2 years ago #
  24. Nico...
    Member

    @Lam : awesome !

    Posted 2 years ago #
  25. Lam
    Moderator

    Ok I've quickly added an FRActionLagrangeTo into the demo as well. You can drag the points around and when you click on the cocos2d icon, it will move along the line.

    The link is still the same but I'll just paste it again.
    http://dl.dropbox.com/u/271717/CurvesDemo2.zip

    Posted 2 years ago #
  26. Steve Oldmeadow
    Administrator

    @Lam - nice work. I'm not sure if you caught this thread about Catmull-Rom splines last week but I thought you might be interested.

    http://www.cocos2d-iphone.org/forum/topic/12833

    Posted 2 years ago #
  27. Lam
    Moderator

    @Steve
    Thanks! I actually didn't catch that thread but it's really awesome.
    Catmull-Rom splines seem to allow any number of points (and hopefully it's efficient)

    I guess I know what I'll be looking to add to my functions as well. haha

    Posted 2 years ago #
  28. gabrielstuff
    Member

    Really great, I've playing with it, and it works great. What is the meaning of douple tap to increase the thickness of the path ?

    Do you support loop path ?

    Also, I've noticed that on iPad, the point are not always good selected. I mean, that sometimes I met difficulties playing with the green boxes.

    thanks !

    Posted 2 years ago #
  29. Lam
    Moderator

    @gabrielstuff

    What is the meaning of douple tap to increase the thickness of the path ?
    The main importance of the curve routines I'm writing is because a few members in the cocos2d community needed to create lines that have thicker widths and anti-aliasing. I thought of an idea for that and pushed the demo if anyone can extend it or repurpose it for their needs. It's probably not the only way to create curves but one of many.

    ...sometimes I met difficulties playing with the green boxes.
    The green boxes are more for showing the control points on the curve for testing purposes and generally won't be used if you want to make actual lines. If it's hard to touch i guess i can make the touch detection larger but remember that it's really only there to show how curves work. I don't know if I should really improve that portion of the demo.

    Do you support loop path ?
    If I finish looking at catmull-rom splines i'll add another demo to show off how to create curves with any number of points using i guess either lagrange or catmull-rom splines since I want to visually see what the differences are between the two.

    At that point I guess it can support looped paths.

    NOTE: Right now all my demo is looking at is 1 single curve and not paths. A single curve or spline itself isn't very useful... haha .... ( I mean it's useful but can be more useful if extended to paths).

    But the mathematics of any curve {bezier, lagrange, catmull-rom} can be used to create a path. A path is really a set of points on which you can generate a spline from. A lot of people really would like to pass in a lot of touch points for example and choose bezier, lagrange, or catmull-rom to create a nice set of splines that make up that whole path.

    Posted 2 years ago #
  30. Sven
    Member

    I've been a long time lurker of these forums and fan of cocos2d and this thread and the work you've done on curves Lam is worthy of my first post ;)
    Just wanted to say thanks and look forward to your updates.

    Ps: I vote for passing a list of touch points and you doing all the work of converting it to a decent curve approximation ;)

    Posted 2 years ago #

RSS feed for this topic

123Next »

Reply »

You must log in to post.

cocos2d for iPhone is proudly powered by bbPress.