平々毎々(アーカイブ)

はてなダイアリーのアーカイブです。

JavaScriptでくるくるCAPCHA alt.ver

くるくる

JavaScript でくるくる CAPTCHA を実装してみる - IT戦記の改造。
マウスドラッグにしたくなったのでそうした。でもiPhoneを含む一部UAでは操作できなくなってしまった。

くるくるCAPCHA2 (canvas version)

IEでは動かない(あとでIE版もつくる予定)

(追記)式の説明。
http://matarillo.com/blogdata/kkc2/kkc2.png

回転の中心をOとする。
MouseDownの点をSとして、そこからCまでドラッグしたときの回転角は θc - θs 。
ここで、θcはベクトルOCがx軸となす角、θsはベクトルOSがx軸となす角。

まずθcから求める。
ベクトルOCの成分を(cdx, cdy)とすると、
矢印の先から矢印の根元を引いて、(cdx, cdy) = (cx - ox, cy - oy)。
そのとき、tan(θc) = cdy / cdx。
tanの逆関数arctanなので、θc = arctan(cdy / cdx)。
JavaScriptだとMath.atan()というのがあるのだけれど、
値域が-π/2 ~ π/2 と、半周分しかない。理由は省略する。
なので、2引数のMath.atan2()を使う。いいからこっち使っとけ。
θc = Math.atan2(cdy, cdx) ←y成分が先!
    = Math.atan2(cy - oy, cx - ox)

同様に、θs = Math.atan2(sy - oy, sx - ox)

ちなみにコンピューター画面上では角度は時計回りが+の向きになる。数学の場合だと反時計回りが+なので逆なんだけど、y軸の向きが逆なんだから仕方がない。