Question

I developing a HTML5 Canvas App and it involves reading a xml file that describes the position of arrows, rectanges and other shapes I need to to draw on the canvas.

Example of the XML layout:

<arrow left="10" top="20" width="100" height="200" rotation="-40" background-color="red"/> 
<rect left="10" top="20" width="100" height="200" rotation="300" background-color="red"/> 

If the object is rotated it involves calculating the position of a point(called P the new position of the object after rotation) when rotated around another point(left,top). I am attempting to come up with a general function/formula I can use to calculate this point P but my Maths is a little weak & I cannot identify what arc/tangent formula I am meant to use.

Can you assist me to come up with a formula I can use to calculate point P for rotations that can be both positive & negative?

In the above example: point(14,446) is the left,top point & point(226,496) is the mid point of the object when NOT rotated so the point=(left+width/2,top+height/2) and the blue dot is the mid point when rotated. I know how to calulate the length of the line between points (14,446) & (226,496) but not how to calculate the blue point x,y position – BTW: the length of this line is the same as the line between the blue point & (14,446)

len = sqrt( (496-446)^2 + (226-14)^2 );
    = 227.56;

Answer 1

It is quite simple. In rotation around the origin of the coordinate system for angle Theta coordinates (x,y) are changing as

x' = x * cos(Theta) - y * sin(Theta);
y' = x * sin(Theta) + y * cos(Theta); 

So, all that you need is to translate point of rotation to one of the points that you have. Lets write it in a more simplified way: (x1,y1) = (14,446) and (x2,y2) = (226,496). You are trying to “rotate” (x2,y2) around (x1,y1). Calculate (dx2,dy2) in a new coordinate system with the origin at (x1,y1).

(dx2,dy2) = (x2-x1,y2-y1);

Now rotate (positive angles are counterclockwise):

dx2' = dx2 * cos(165 Degrees) - dy2 * sin(165 Degrees);
dy2' = dx2 * sin(165 Degrees) + dy2 * cos(165 Degrees);

The last step is to translate coordinates of the point from the origin at (x1,y1) back to the original (0,0);

x2' = dx2' + x1;
y2' = dy2' + y1;

ps: read also this 🙂 http://en.wikipedia.org/wiki/Rotation_matrix and do not forget that most trigonometric functions in different programming languages deal mostly with radians..

pps: and I hope that I did not scared you – ask if you have any questions.