Search code examples
javascriptmathgeometrykinematics

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


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?


Solution

  • 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