Math (in WPF): Getting new x,y coordinates after a translation

Question

With reference to this programming game I am currently building.

I am using WPF to animate canvases, and I am using the BeginAnimation method to translate (move) a canvas across another canvas.

With the BeginAnimation, I need to specify the From and To coordinates for both x and y, and this is the method I am using this like such:

//X 
Animator_Body_X.From = Translate_Body.X; //Current x-coordinate
Animator_Body_X.To = //The end X-coordinate
Translate_Body.BeginAnimation(TranslateTransform.XProperty, Animator_Body_X);

//Y
Animator_Body_Y.From = Translate_Body.Y; //Current y-coordinate
Animator_Body_Y.To = //The end Y-coordinate
Translate_Body.BeginAnimation(TranslateTransform.YProperty, Animator_Body_Y);

Now the canvas needs to be translated using a given angle, which I have available from the method.

So my question is, given the angle (0-359) the canvas is currently rotated at, starting x and y coordinates (of where the canvas is currently situated) and distance (in px), how do I calculate to end coordinates? ie to where the canvas will finally be translated to.

alt text http://img244.imageshack.us/img244/4794/canvastranspositionmi5.jpg

In the above image, I have drawn an example of what I want to achieve.

Suppose the canvas (solid-border box) has a current heading (angle) of 130 degrees, and it needs to be translated (following a path down that angle; ie depending on where it is currently facing) by 200 pixels...what will be the new coordinates (where it will stop animating: dashed-border box) of the canvas? How do I calculate these new coordinates of where it will stop?

[UPDATE] Solution:

Thanks to the help of both Andy and Cameron, it is finally working as intended.

And here is the working code:

double headingRadians = Heading * (Math.PI / 180);

Animator_Body_X.From = Translate_Body.X;
Animator_Body_X.To = Math.Sin(headingRadians) * pix + Translate_Body.X;
Translate_Body.BeginAnimation(TranslateTransform.XProperty, Animator_Body_X);

Animator_Body_Y.From = Translate_Body.Y;
Animator_Body_Y.To = ((Math.Cos(headingRadians) * pix) * -1) + Translate_Body.Y;
Translate_Body.BeginAnimation(TranslateTransform.YProperty, Animator_Body_Y);

Answer 1

Assuming you're rotating clockwise from 12 o'clock, your new x-coordinate will be:

sin(130) * 200 = 153 + original x-coordinate

And your new y-coordinate will be

cos(130) * 200 = -129 + original y-coordinate (assuming negative 'y' is down)

As below, note that in C#, for example, sin and cos take radians, not degrees - multiply by Math.PI/180 to get the value in radians first.

Answer 2

You can use cos and sin to work out the amount of movement in the x and y coordinates. This is based on the unit circle.

The unit circle has angles starting from the right side, going anti-clockwise. So in the unit circle your angle of 130 degrees is actually 320 degrees.

actualAngle = 90 - 130 = -40 
(which is the same as 320 degrees when used in sin/cos)

The other thing to note is that the cos and sin functions are using radians instead of degrees.

angleInRadians = 320 * pi / 180 (about 5.59)
x = cos(angleInRadians) * 200 + 300 (about 453.21)
y = sin(angleInRadians) * 200 + 400 (about 271.44)

Answer 3

look at the TransformToVisual if you have the coordinate of your object from Visual A origin and you want the coordinates of your object from Visual B origin, then you do

   var transformation = A.TransformToVisual(B);

you can cast transformation from GeneralTransform to Transform if needed. Then you can use Transform method of your GeneralTransform object.

Answer 4

I will detail how you can do without using Mathematics :

Note that, I don't try what I'm saying, so maybe there is some mistakes.

I will call the square you are moving Visual B,

I will call the container of the square Visual A.

Now, you want to be able to do a translation of B from B origin to B', and retrieve B' coordinate from A origin.

If your translation is (200,0), then the coordinate of B' from B origin is (200,0). You want these coordinates from A origin. So you have to do.

var transform = B.TransformToVisual(A);
var pointFromAOrigin  = transform.Transform(new Point(200,0));

pointFromAOrigin reflect what you want.