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.