Question

I have a dial which I drag around a circle to give me a reading between 0 and 1.

Something like this:

dx = mouseX-centerX;
        dy = mouseY-centerY;
        rad = Math.atan2(dy,dx);

        rad += offset;

        Tweener.addTween(knob,{y:centerY - Math.cos(rad)*radius, time:.1,  transition:"easeOutSine"});
        Tweener.addTween(knob,{x:centerX + Math.sin(rad)*radius, time:.1,  transition:"easeOutSine"});
        knob.rotation = rad * 180 / Math.PI;

This work’s great, except when the slider goes from 359 degrees to 1 degree, my value between 0 and 1 returns to zero. (Which makes sense, as the value is based on the angle of my slider)

I’m trying to find a way for the dial to move from 359 degrees to 361 and onwards basically.

In my head: I need to check if the next value of my mouse drag goes past the 360 degree point and add 360 to the total, to stop it returning to zero and continue to 361 degrees.

I just cant work out how to put this into code…

Answer 1

On each frame when you are rotating the knob, check the change in angular distance instead of direct angle.

Save the previous frames angle and see if the difference is positive or negative.

var rad = Math.atan2(dy, dx);
var diff = rad - oldRad;
oldRad = rad;
if( diff > Math.PI )
  diff -= Math.PI * 2;
if( shortestAngle < -Math.PI )
  diff += Math.PI * 2;

diff should contain a value that if it’s been rotated to the right, is positive (or negative if rotated left). Simply add that to the total angle.

There might be some errors in the code (took it from an old project), but that’s the gist of it 🙂

Hope that helps!