Home > OS >  How to rotate a squashed circle (ellipse) in degrees
How to rotate a squashed circle (ellipse) in degrees

Time:10-06

I draw a circle path with a point (that's circle_x and circle_Y) in my code like this:

var circSize    = 15;
var circArc     = 2 * Math.PI; 
var aspectAdd   = 10; 
var circle_x    = (circSize   aspectAdd) * Math.cos(circArc);
var circle_y    = (circSize * Math.sin(circArc);

The circle is then squashed with aspectAdd to make it an ellipse. The ellipse is pure an invisible path that is used as an animation path for another point. How do I rotate the ellipse in degrees? It has to be in pure mathematics. I don't use the canvas ctx or svg path script for this instance (where I could easily give a rotation value).

CodePudding user response:

Equation to find points of ellipse with semi-axes rx and ry, rotated by angle fi.

Calculate points for t parameter in range 0..2*Pi with needed step.

x = rx * Cos(t) * Cos(fi) - ry * Sin(t) * Sin(fi)   cx
y = rx * Cos(t) * Sin(fi)   ry * Sin(t) * Cos(fi)   cy

CodePudding user response:

You probably should've asked this in a math stackoverflow.

You need to apply a rotation to your parameteric functions.

Specifically,

r_x = x * cos(theta) - y * sin(theta)
r_y = x * sin(theta)   y * cos(theta)

I'll let you handle the substitions.

  • Related