Wheel animation according touch with cocos2D and (?) Box2d on iPad?

Question

I have a question about cocos2d and box2d. I have to create a simple wheel that rotate according how the user touch the wheel for an Ipad App. I would like that according a certain touch movements the wheel start with a certain velocity, and after some rotation start to decrease velocity until it stops. (like a classic lucky wheel).

I need some hint. Do you think that is possible to do that using only cocos2d? Or I have to use Box2D? I already started to use Box2d, it's very powerful, but is it possible to give an object a certain starting velocity rotation and after, let the world simulation to stop the object?

Thanks a lot! Benza

i had to do the exact same thing, but for android. if you would like to know the concept and math behind post a comment. — blejzz

blejzz blejzz · Accepted Answer · 2011-08-10T10:45:07

When i developed the exact same thing on Android i also couldn't find any useful examples/articles to implement this, so i did it like this:

When a user touches the screen and does a fling/swipe (moves his finger across the screen and removes it from the screen) you calculate the speedX and speedY in pixels/second (in android you have a method onFling(float velocitY,float velocitX)).

You then convert the speed which is in pixels/second to revolutions/second. This means that if the users fingered would traveled 1500 px in 1 second, your wheel would spin X times. For example if the fling/swipe speedX and speedY is 1500 px/s and your wheel has a radius of 150px, you calculate the wheel arc length like so:

      arc = r * PI. (r=150)

Then you calculate the speed in revolutions per second like this:

     spinSpeed = Math.sqrt((speedX*speedX)+(speedY*speedY))/arc)*360

Once you have the speed you can change the wheel rotation angle every T miliseconds (i used 40miliseconds) like this:

     wheel.angle += spinSpeed;

You also have to implement drag, so the wheel eventually slows down, like this:

     spinSpeed -= drag_value;
     wheel.angle += spinSpeed;

You have to adjust the drag_value to your desired effect (how fast it slows down). You may also want to multiply the spinSpeed by a constant, so you get higher speed (i used 40).

This implementation doesn't include the wheel following the users finger. To do that you have to calculate for how much the users finger moved since the last touch of the screen (for X and Y coordinates). So you need 2 coordinates (lastTouchX,lastTouchY,newTouchX,newTouchY). When you have the coordinates you can calculate the slope or gradient of the lines that go through this coordinates (the slope/gradient is K in this formula: y = kx +n - standard line formula). Then you have to calculate the intersection angle between this two lines and apply it to the wheel. Something like this:

      tg = ((k1-k2)/(1+(k1*k2))); // k1 is the slope of the previous touch coordinate; k2 is the slope of the current touch coordinates                     
      angle =   Math.toDegrees(Math.atan(Math.abs(tg)));
      wheel.angle += angle; // to implement spinning in the other way use wheel.angle -= angle;

Hope you get the idea

Wheel animation according touch with cocos2D and (?) Box2d on iPad?

2 Answers