javascriptと三角関数の3:目のフォロー効果

まず最後の効果を見ます.
構想を実現する

目をマウスと一緒に動かすためには、まず目の座標、つまりleftとtop値

を求めなければなりません.

leftとtopの値を取るために、私達は知っています.α角の内側の三角形の2辺と隣の長さは

です.

相手と隣の辺を取るために、私達は知っているだけです.α角のラジアンは

です.

α角の弧度は、図中のa辺とb辺を通じて、arctan(a/b)を使って、

を求めることができます.

a辺の長さは、マウスy軸の座標−

である.

b辺の長さは、マウスx軸の座標−

である.
部分的に実現する
offsetXとoffsetYを計算します.

//      left top ，     offsetX offsetY
var wLeft = $('.wrap').offset().left
var wTop = $('.wrap').offset().top
//        
var r = 12

a辺とb辺の長さを計算します.

// b    
var diffX = ev.pageX - (wLeft + r)
// a    
var diffY = ev.pageY - (wTop + r)

計算するα

//   α
var deg = Math.atan(Math.abs(diffY) / Math.abs(diffX))

内三角形の2辺と隣を計算します.

//        
var x = Math.cos(deg) * r
//        
var y = Math.sin(deg) * r

目のleft値とtop値を計算します.

var left = (r + x) + 'px'
var top = (r + y) + 'px'

四分制限角度の問題
上ではleft値とtop値を取得しましたが、これは0～90度、つまり第四象限でいいです.四象限については前の図を示します.
マウスを第三象限に落とした時、計算された角度は90～180度であるべきです.

deg = Math.PI - deg

マウスを第二象限に落とした時、計算された角度は180度から270度であるべきです.

deg = Math.PI + deg

マウスを第一象限に置いた時、計算された角度は270度から360度であるべきです.

deg = 2 * Math.PI - deg

最終効果と具体的な実現を確認するには、力を入れてください.