Question

I’m trying to make the so called fine tune thing. Basically this looks like: http://jsfiddle.net/r9KQK/1/

Later I’ll have some audio player and this thing will help to select seconds when we use it on a tablet.

The problem is when you try to move the red circle it strangely drops when it passes top and bottom of the green circle, but not at 0 or PI/2, something like at -260..-269 and 181..190 degrees

Just try to move it and you’ll see the bug.

What’s wrong in my code?

Thanks in advance

update

Last update: http://jsfiddle.net/r9KQK/17/

In this example I get degrees in 0..360 range. But instead I should get delta degrees between the point where I start dragging and where I end it, but I can’t work out the maths. I should also take into account the direction of red circle, so that delta will be + or – =\

update

Finally: http://jsfiddle.net/r9KQK/18/

But the code is really awful. Though it’s 2:46 AM and I’m kind of sleepy, so…
But anyway I think it could be much more simplified

Answer 1

That’s happening because your parameter to Math.atan goes to infinity when DeltaX is zero. I recommend using atan2, which automatically handles this corner case:

function(dx, dy, x, y) 
{
    var deltaY = this.oy + dy - fineTuning.ring.attr('cy');
    var deltaX = this.ox + dx - fineTuning.ring.attr('cx');
    var angle = Math.atan2( deltaY, deltaX );

    // etcetera, etcetera

Or check the fiddle.