rotating with deg.

[Matej]

Yo , im building time picked with javascript and i found interessting problem , demo = http://jsfiddle.net/afo7ky03/6/

whenever you move rotating div between 2 and 3 it stops there and it shouldnt happen , i havent found any problem in scripts , did i overlooked something? thanks for answers

[Hadien]

its "simple" math really, run a google search on "graph arctan2" and choose images, you should see what going on from that.

 

basically when the y input into Math.arctan2() approaches 0 the number becomes undefined and returns a NAN. use ArcSin instead. you'll need the X delta (which you already have and pathagorean therom to find the distance (the hypotenuse or magnitude) which the mouse is from the origin. then...

 

Math.arcsin(deltaX/magnitude);

 

you'll never want to use arctan (DeltaX/DeltaY) in this case as you'll have the risk of DeltaY nearing zero and giving you a div/0 error

[Matej]

What is the magnitude in this case?

deltaX would be g-raduzs (defined in fiddle) , and magnitude should be new position of X? a.k.a Asin(g-radius/new_client) cuz thats what i tried as first but seems like isnt working properly //sorry im not familiar with names of math expressions in english and translators are pain in this case :/

[Hadien]

var rect = one.getBoundingClientRect();var DeltaX = e.offsetX -  (rect.left+rect.width/2);var DeltaY = e.offsety -  (rect.top+rect.height/2);var Magnitude = (DeltaX^2 + DeltaY^2)^Delta^0.5;//should provide a degree range of -89 to 270var degree = (DeltaY>0)?Math.arcsin(DeltaX/Magnitude)                       :180 - Math.arcsin(DeltaX/Magnitude);

When I have some time I'll come back and provide some polished code, but now I have some work to do. hopefully you can use what I gave you.

 

 

EDIT:

So here is the fully updated code after I had the time to actually sit down and work with it

 

http://jsfiddle.net/afo7ky03/21/

Edited May 19, 2015 by Hadien