4

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);
Community
  • 1
  • 1
Andreas Grech
  • 105,982
  • 98
  • 297
  • 360

4 Answers4

3

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.

Andy Mikula
  • 16,796
  • 4
  • 32
  • 39
  • It is almost working, with your equations. But it is moving backwards, instead of forward. What should I change in the equation ? – Andreas Grech Feb 10 '09 at 22:40
  • 1
    Yes - the starting points. If your 'y' coordinates get larger as you move down the page, you may have to multiply the result of cos(130)*200 by -1. – Andy Mikula Feb 10 '09 at 22:52
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)
Cameron MacFarland
  • 70,676
  • 20
  • 104
  • 133
1

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.

Nicolas Dorier
  • 7,383
  • 11
  • 58
  • 71
0

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.

Nicolas Dorier
  • 7,383
  • 11
  • 58
  • 71
  • But in this case, B doesn't exist because the canvas is not moving to another object. But thanks for the mention of TransformToVisual; didn't know about it, and I will use it for something else. – Andreas Grech Feb 10 '09 at 22:47
  • In this case B is the object that you are moving whose coordinates are (300,400) in the canvas. – Nicolas Dorier Feb 10 '09 at 23:02
  • Sorry, I meant B is your windows, and A the square (what you call Canvas). See my other answer. – Nicolas Dorier Feb 10 '09 at 23:21