provide circular motion for a custom drawing on touch: Android

Question

I have a custom drawn rectangle which i want to move in a circular path based on touch events. It follows the direction of the touch for clockwise or anticlockwise movement but basically move in circular motion, as if moving on the edge of the circle.

My current thought process is as follows: Based on the users current and previous x,y i shall find the angle in degrees and then move this rectangle by the same angle by re-drawing in the new position, just making sure that it moves on the edge of a circle. But this leads to some confusion on the following: 1. how do i decide whether angle movement is clockwise or anti-clockwise. 2. I am not being able to figure out the math for this properly.

Would this be the best approach or is there a better idea for doing this? Also, if this is the best approach, could someone please tell me the formula for calculating the angle by which i should move it while taking care of the clocking and anticlockwise ?

could someone please help? please let me know if any more details are required. Thanks

Answer 1

Steps

Here are a few steps in order to move your rectangle along a circle's rim when the user taps and holds to the side of the circle:
1. Obtain direction desired.
2. Obtain angle from current x and y coordinates.
3. Add direction (+1 if counterclockwise, -1 if clockwise) to angle.
4. Calculate new x and y coordinates.
5. Update/display rectangle.

Details

1. In pseudocode, direction = sign(Rectangle1.x - UsersFingerPosition.x). Here sign is a function returning -1 if the number was negative, 0 if it is 0, and 1 if it is positive. Note that sign(0) will only result when the user is on the exact x and y of your rectangle's location. In that case, the rectangle would not move (which should be good). In Java, the sign function is Math.signum().

2. To obtain the current angle use the following java code:

double angle = Math.toDegrees(Math.atan2(Circle.y-Rectangle1.y, Rectangle1.x-Circle.x));

Note the order of Circle.y-Rectangle.y and Rectangle.x...Circle.x. This is a result of the coordinate (0, 0) being in the top left corner instead of the center of the screen.

3. Simple enough, just add direction to angle. If desired, do something like

angle += direction*2; //So it will move more quickly

4. To get the new x and y coordinates of your rectangle, use the trigonometric functions sine and cosine:

Rectangle1.x = Math.cos(Math.toRadians(angle))*Circle.radius + Circle.x - Rectangle1.width;
Rectangle1.y = Math.sin(Math.toRadians(angle))*Circle.radius + Circle.y - Rectangle1.height;

(where Circle.x and Circle.y are the coordinates of the center of your circle and Circle.radius is naturally it's radius).

5. This one you'll have to take care of (or have already) :)!

Hope this helps you!

Answer 2

Steps

Here are a few steps in order to move your rectangle along a circle's rim:
1. Obtain finger position/Check that it's still dragging the rectangle.
2. Obtain angle from current x and y coordinates.
3. Calculate new x and y coordinates.
4. Update/display rectangle.

Details

1. This one is probably specific to your code, however, make sure that when the user starts dragging the rectangle, you set a variable like rectangleDragging to true. Before you run the next steps (in the code), check that rectangleDragging == true. Set it to false once the user lets go.

2. To obtain the current angle use the following java code:

double angle = Math.toDegrees(Math.atan2(Circle.y-Finger.y, Finger.x-Circle.x));

Note the order of Circle.y-Finger.y and Finger.x...Circle.x. This is a result of the coordinate (0, 0) being in the top left corner instead of the center of the screen.

3. To get the new x and y coordinates of your rectangle, use the trigonometric functions sine and cosine:

Rectangle1.x = Math.cos(Math.toRadians(angle))*Circle.radius + Circle.x - Rectangle1.width;
Rectangle1.y = Math.sin(Math.toRadians(angle))*Circle.radius + Circle.y - Rectangle1.height;

(where Circle.x and Circle.y are the coordinates of the center of your circle and Circle.radius is naturally it's radius). Subtracting the width and height of the rectangle should center it on the circle's border instead of placing the left, upper corner on the circle.

4. This one you'll have to take care of (or have already) :)!

Hope this helps you!