フロントエンドエンジニアになりたい

デザイナーなのかコーダーなのかディレクターなのかよくわからない人のブログ。趣味で絵を描きました(過去形)

マウス追尾で円のcos,sinを表示

codepen.io

最近よくお世話になっている東大生が教えるビジュアル数学というサイトの三角関数のページにおいてあるFlashを、一からCanvasで再現してみました。

円の上にマウスをホバーさせてやると、それに追尾してその位置のcos,sinを表示します。

アークタンジェントというタンジェント逆関数を使って求めると良いようです。 (...アークタンジェントというのを今回初めて知りました)

JavaScriptではMath.atan2()を使って簡単に求めることができます。

中心からのマウスの座標をMath.atan2(y, x)と渡してやるとラジアンが求まるので、それをそのままMath.cos()Math.sin()に渡してやるとcos,sinを求めることができます。とても便利ですね。

...ちなみに東大生が教えるビジュアル数学というサイト、数学嫌いの自分でもすっと理解できるような説明が多く、数学嫌いだったけど数学をもう一度勉強してみたい方におすすめです。