Freehand drawing with Cocos2d-x and Box2d

After going on holidays and recharging my batteries I'm ready for some more blogging action.

This will be a fun one. Basically I want to:

• Allow the user to draw a freehand shape on the screen
• After releasing the click/gesture the shape should materialize itself into a dynamic physics body.
• The generated bodies should be affected by gravity and will collide with each other

I'll be using cocos2d-x 2.0.1 with Box2D for the physics.

(Update: 24 March 2013: As some people were having trouble making it work I've replaced the current download with a complete XCode project using the latest Cocos2d-x version (cocos2d-x 2.1.2))

Anyway, a video is worth more than 10.000 words (heck, if a picture is worth 1000 words a video is certainly more). Here's the final effect:

There are a lot of challenges to address here so let's get started. I'll use the default "Cocos2d-x with box2d" template as a starting point.

Step 1. Remove unwanted code.

We'll just use the HelloWorld class, and thus remove the "addNewSpriteAtPosition" method, and change the touch event so that nothing happens... yet :)

Step 2. Freehand drawing on the screen:

The idea is as follows:

1. Create the concept of a brush
2. Also, create the concept of a full-screen canvas
3. When touching/clicking the screen, paint the canvas with that brush.

Now, let's map this to Cocos2d-x concepts:

1. The brush will be a CCSprite
2. The canvas will be a CCRenderTexture
3. To paint a CCSprite (or any other CCNode for that mater) onto a CCRenderTexture you call the Visit method of the sprite during the gesture/cursor movement.

Here's the image sprite used for the brush

Source-code:
Inside the constructor:

    target = CCRenderTexture::create(s.width, s.height, 
                                     kCCTexture2DPixelFormat_RGBA8888);
    target->retain();
    target->setPosition(ccp(s.width / 2, s.height / 2));
    
    this->addChild(target);
    
    brush = CCSprite::create("largeBrush.png");
    brush->retain();

The "brush" and "target" are declared as:

cocos2d::CCRenderTexture *target;
cocos2d::CCSprite *brush;

Then add the ccTouchesMoved method with this implementation.

void HelloWorld::ccTouchesMoved(CCSet* touches, CCEvent* event)
{
    CCTouch *touch = (CCTouch *)touches->anyObject();
    CCPoint start = touch->locationInView();
    start = CCDirector::sharedDirector()->convertToGL(start);
    CCPoint end = touch->previousLocationInView();
    end = CCDirector::sharedDirector()->convertToGL(end);

    target->begin();

    float distance = ccpDistance(start, end);

    for (int i = 0; i < distance; i++)
    {
        float difx = end.x - start.x;
        float dify = end.y - start.y;
        float delta = (float)i / distance;
        brush->setPosition(
            ccp(start.x + (difx * delta), start.y + (dify * delta)));

        brush->visit();
    }

    target->end();
}

The for cicle is used to make the line continuous. Otherwise, if the cursor moved too fast, there would be gaps in the line.

Here's the end-result while drawing.

Nice.

Step 3. Create a static physic object matching the drawing

Our matching physics object will be composed of several rectangles. Each rectangle will be a fixture of the body with constant height, based on the brush image size. This will make the physics object and drawing match as closely as possible.

Let's begin by creating an helper method to add a rectangle to a box2d body.

void HelloWorld::addRectangleBetweenPointsToBody(b2Body *body, CCPoint start, CCPoint end)
{   
    float distance = sqrt( pow(end.x - start.x, 2) + pow(end.y - start.y, 2));
    
    float sx=start.x;
    float sy=start.y;
    float ex=end.x;
    float ey=end.y;
    float dist_x=sx-ex;
    float dist_y=sy-ey;
    float angle= atan2(dist_y,dist_x);
    
    float px= (sx+ex)/2/PTM_RATIO - body->GetPosition().x;
    float py = (sy+ey)/2/PTM_RATIO - body->GetPosition().y;
    
    float width = abs(distance)/PTM_RATIO;
    float height = _brush.boundinbog.size.height /PTM_RATIO;
    
    b2PolygonShape boxShape;
    boxShape.SetAsBox(width / 2, height / 2, b2Vec2(px,py),angle);
    
    b2FixtureDef boxFixtureDef;
    boxFixtureDef.shape = &boxShape;
    boxFixtureDef.density = 5;
    
    body->CreateFixture(&boxFixtureDef);
}

The physics boxes are created simultaneously with the drawing. The following image shows the physic bodies composed of small rectangles (I've hidden the yellow drawing).

Step 4. Convert the static physic objects into dynamic objects

We already have physic objects, but they're static. I want them to materialize into dynamic objects when releasing the click/gesture so that they're affected by gravity. After implementing this behavior we get this.

I've drawn the Hello word. After releasing the gesture the physics objects tumble down but the drawing remains static. We're just missing the final piece of the puzzle.

Step 5. Make the sprites match the physics object while moving/rotating

Here comes the hard part: make the sprite match the box2d object and keep them matched while the physics object moves and rotates.

The idea is simple:

• Iterate the box2d body fixtures to get the top-left and bottom-right corners coordinates.
• Take a rectangular snapshot of the CCRenderTexture (using the above coordinates) to create a new sprite. 
• Associate the sprite with the physics body.
• Then, and this is essential, change the sprite anchor point to match the box2d body starting point.

Afterwards everything should work like in the video (except the color and radius of the brush, which I changed).

I'm also including the source-code (updated on 24/03/2013) for this example. Don't mind the quality of the code as it has some duplication and is not exactly polished. Anyway, feel free to use it.

You can get a zip file here