Question

EDIT: If the question is badly written have a look at the video (3), same link as in the bottom of this page.

I am trying to draw a very simple bezier curve using ccBezierConfig and Cocos2D. Reading on Wikipedia I tried to understand a bit controls points and found this image:

http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bezier_2_big.png/240px-Bezier_2_big.png

If you look on the wikipedia page from which I took the image there is a cool animation. Have a look here.

This is the code I used:

        CCSprite *r = [CCSprite spriteWithFile:@"hi.png"];
        r.anchorPoint = CGPointMake(0.5f, 0.5f);
        r.position = CGPointMake(0.0f, 200.0f);

        ccBezierConfig bezier;
        bezier.controlPoint_1 = CGPointMake(0.0f, 200.0f);
        bezier.controlPoint_1 = CGPointMake(180.0f, 330.0f);
        bezier.endPosition = CGPointMake(320.0f,200.0f);

        id bezierForward = [CCBezierBy actionWithDuration:1 bezier:bezier];
        [r runAction:bezierForward];
        [self addChild:r z:0 tag:77];

The app runs on Portrait mode and my speculation matching the control points of 1 and the ones in my code was that:

sprite.position should correspond to P0
bezier.controlPoint_1 should correspond to P0 
bezier.controlPoint_2 should correspond to P1
bezier.endPosition  should correspond to P2

I did try two approaches. By setting the position of the sprite and by not setting it.

I assumed that position should be the same as controlPoint_1 as in the wikipedia schema 1 there are only three points.

I get an output I don’t quiet understand.. I made a little video of it, is a private youtube video:

to see the video click here

Answer 1

OK, the answer is rather simple…

The quadratic Bézier curve is not the one drawn by cocos2d. Instead, check the same wiki page for cubic Bézier curve. That’s what you should be looking at.

1. Initial position is the position of the sprite (P0)
2. Control points 1 & 2 are P1 & P2, respectively.
3. End point is the end point.

Nice video, btw, I enjoyed it xD.

---

Evidence from the CCActionInterval.h file in the cocos2d library:

/** An action that moves the target with a cubic Bezier curve by a certain distance.
 */
@interface CCBezierBy : CCActionInterval <NSCopying>
{
    ccBezierConfig config;
    CGPoint startPosition;
}

---

This link should help you construct your cubic Bézier curves visually, instead of tweaking the values and running the app.