Make object follow mouse angle?

Question

what I'm trying to do is make the paddle follow the mouse position(red dot).
I know how to rotate the paddle relatively to the center of the screen, but I'm not sure how to determinate the coordinates.

thanks.

Answer 1

From what I understand, you want to have the paddle be at a point on the circle nearest the mouse cursor. Here's the general way of calculating that point:

• We know for a fact that the shortest distance between a point and a circle must go through the circle's center, so a vector can be created from the directed line segment starting at the center of the circle and ending at mouse cursor.
• From here we need to calculate the angle between the X unit vector and our vector. There are many ways of doing this, but the one I prefer (if your 2d vector class has a perpendicular dot product method) is angle = atan2(perpDot(v1, v2), dot(v1, v2)). Using atan2, we get an angle in the range (-pi, pi].
• Next we need to get the actual location of that angle on the circle, which is as simple as <cos(angle), sin(angle)>.
• If your circle isn't a unit circle (radius != 1), scale the vector by the radius. If your circle isn't centered at (0, 0) add it's center as a vector to the position vector you just calculated.

Answer 2

The simplest way would be to make your paddles origin at the center of the circle. Then you just need to calculate the angle and you're done (your paddle origin, or center position should be at the circle center and the paddle itself should be to the right of the circle as starting position).

Something like this:

// calculate delta from circle center to mouse position
var dx:Number = mouseX - circleCenterX;
var dy:Number = mouseY - circleCenterY;

// get the rotation (in radians)
var radians:Number = Math.atan2(dy, dx);

// then we can simply apply the rotation to the paddle,
// but we have to convert to degrees first
paddle.rotation = radians * 180 / Math.PI;

If you want to have the paddle origin at the center of the paddle itself, then you can do the following to get a point that's always on the circle (the code to obtain the rotation will be the same as above):

// using the delta variables from the code snippet above
var point:Point = new Point(dx, dy);

// normalizing the vector and scaling it to the circle radius will give us
// a point lying on the circle
point.normalize(circleRadius);

// add the circle center to the point to get "world coordinates"
point.x += circleCenterX;
point.y += circleCenterY;