2

I have a rotation angle:

var dx = this.mouseX - this.startX;
var dy = this.mouseY - this.startY;

_this.rotation = Math.atan2(dy, dx);

And i know my pivot point (center of my image):

var pivotX = this.x + (this.imageWidth / 2);
var pivotY = this.y + (this.imageHeight / 2);

Now i have got another point:

var rightX = 600;
var rightY = 400;

How can i rotate this point around my pivot point using the angle that i got from the atan2() function?

Mulgard
  • 9,877
  • 34
  • 129
  • 232
  • Could you show your full code? Right now it is impossible to define the problem correctly and see what you are doing. – Alvaro Flaño Larrondo Sep 16 '15 at 13:24
  • I thout its enough. I just need to calculate the new position of `rightX` and `rightY` using the rotation and the pivot point. I dont do more so i cant show more. I found this: http://stackoverflow.com/questions/2259476/rotating-a-point-about-another-point-2d but they are not working with atan2() and i have no idea about math. I guess i cant copy that. – Mulgard Sep 16 '15 at 13:27
  • Here what are the `this` and `_this` variables? When are you calling this code? I'm trying to get the whole picture of what you are doing. – Alvaro Flaño Larrondo Sep 16 '15 at 13:36
  • Look at the answer Alvaro. What i do with it is not interesting. I only asked for rotating a point. – Mulgard Sep 16 '15 at 13:44

1 Answers1

11

To rotate a point {x, y} around an origin {0, 0} by a given angle in radians do the following math:

new_x_point = old_x_point * cos(Angle) - old_y_point * sin(Angle);
new_y_point = old_y_point * cos(Angle) + old_x_point * sin(Angle);

Now, if the origin or pivot point is not {0, 0}, then you will need to first subtract the point you want to rotate from the coordinates of the origin point, then do the rotation on that point, and then add the offset of the rotated point back in so that it's translated back to it's original position.

Jason
  • 31,834
  • 7
  • 59
  • 78