Question

I’m told by three different people that this is the correct way to rotate an ellipse:

// Get current position on the elliptical path.
var x = Math.cos( this.timer.delta() * this.speed ) * ( this.pathWidth / 2 );
var y = Math.sin( this.timer.delta() * this.speed ) * ( this.pathHeight / 2 );

// Rotate the ellipse.
var newX = x * Math.cos( this.angle ) - y * Math.sin( this.angle );
var newY = x * Math.sin( this.angle ) - y * Math.cos( this.angle );

I’m using a timer so that the position on the elliptical path cycles over time.

When this.angle = 0, there is no change to the path.

But when this.angle is greater than 0, the ellipse does not maintain it’s proportions. It gets squished and pulled. And the differences between increments of a single degree are pretty severe.

EDIT 1:

Also, I would expect the path of when this.angle == 0 to be the same as when it is 180, 360, 540, 720, etc.

But they are all different.

EDIT 2:

Same behaviour despite the typo which has since been corrected.

EDIT 3:

Behaviour resolved by converting from degrees to radians and using them instead.

Like so:

this.angleRadians = this.angle * ( Math.PI / 180 );

Answer 1

Your newX equation is wrong. You’re missing y.