How can rotate an elliptical animation path by a certain amount of degrees?

Question

I'm using the following to get the x and y position of an entity as it travels along an elliptical path over time:

x = Math.cos(time)*width/2
y = Math.sin(time)*height/2

Is there a simple way to rotate the entire thing by a certain amount of degrees, say 45, or 132 for example?

score 3 · Accepted Answer · answered Oct 15 '12 at 04:36

3

You may use a simple rotation transformation:

x1 = x*cos(a) - y*sin(a)
y1 = x*sin(a) + y*cos(a)

Where a - is the angle to rotate.

This Wikipedia article explains that in detail

answered Oct 15 '12 at 04:36

Serge

zdd · Answer 2 · 2012-10-15T04:53:09.117

1

For each point(x, y) you calculated with above equation, you can rotate it theta degree(counter-clockwise) by the following equation

where x and y are the original coordinates before rotation, x' and y' are the coordinates after rotation, theta is the angle to rotate.

edited Oct 15 '12 at 04:53

answered Oct 15 '12 at 04:43

zdd

This seems like a good idea, but does not seem to work for me. I've updated my original post to include a code example. – Joncom Oct 15 '12 at 05:36
var newX = x * Math.cos( this.angle ) - x * Math.sin( this.angle ); var newY = x * Math.sin( this.angle ) - y * Math.cos( this.angle ); This is not the equation what I mentioned above. is should be var newX = x * Math.cos( this.angle ) - y * Math.sin( this.angle ); var newY = x * Math.sin( this.angle ) - y * Math.cos( this.angle ); – zdd Oct 15 '12 at 05:44

score 0 · Answer 3 · answered Oct 15 '12 at 04:37

0

Yes, just do a 2D rotation on the resulting x and y to rotate your ellipse:

xrot = x * cos(A) - y * sin(A)
yrot = x * sin(A) + y * cos(A)

And remember that Radians = Degrees * PI / 180.

answered Oct 15 '12 at 04:37

paddy

3 Answers3