Rotate directly towards a target at a constant speed

Question

I've written a program (see on JS Fiddle) that rotates my player towards the mouse cursor at a constant speed. I've computed the angle to the point using the Math.atan2 function, but when incrementing or decrementing the player's rotation towards that value, it does not always take the shortest path.

This image describes the logic I intend to evaluate:

The problem appears when you cross a specific angle, the player rotates the long way around to reach the cursor, instead of taking the shortest path. How can I always take the shortest path at a constant speed?

Many thanks.

Answer 1

Your main problem is that you did not account for the discontinuity in the arctangent function...

// Check if arctangent has crossed the discontinuity
if (delta < -Math.PI || (delta > 0 && delta < Math.PI)) {

And you are not reducing the player rotation into a canonical -Pi <= x < Pi range.

// Reduce player.r into the -PI thru PI range
player.r = (player.r + 3 * Math.PI) % (2 * Math.PI) - Math.PI;

Additionally, to actually get a fixed rotation speed, you can not rely on the refresh rate of the screen. Instead you must either measure the clock each update, or use an interval timer.

setInterval(update, 1000 / 24); // run update at 24fps to achieve constant rate

Fiddle: https://jsfiddle.net/sjeder3d/8/