web制作をしていると意外とよく使う三角関数。
自分はcssに奥行を持たせるフロントエンド実装をしているときに必要になりました。
エンジニアやHP制作をしているのであれば、数学なんてお手のものという方も多いのでしょうが、中には『あぁ、高校でもっとしっかり授業受けとけばよかった…』なんて思う方もいらっしゃるのでは？
今回はjavascriptで三角関数を計算するための計算式について備忘録としてまとめていきます。
javascriptの指定方法だけわかればいいという方は●●から見てくださいね。
tan、cos、sinはどんな時に使う？
三角関数の計算の理解を深めるために、例として自分のぶち当たった課題をまずは提示してみようと思います。
今回実装したかったのは3Dカルーセルというやつで、画像の一覧を表示して、『次へ』『戻る』を押すと次の画像にスライドするというもの。
そのうえメリーゴーランドのようにくるくる回転する立体のもので、平面だけでなく立体を表現する必要がありました。
cssでは立体を表現するためのプロパティもしっかり用意されていて、『perspective』とか『transform-style: preserve-3d』を使うと実装できます。
この辺りは今回の主題から外れるので省略しますが、興味のある方は良記事
もう普通じゃつまらない！CSSとJavaScriptで作る3Dカルーセルのアイデア – WPJ
を見てみてください。
さて、本題ですが、このカルーセルはメリーゴーランドのように回転するため、正面にくる画像を何度回転させるのか？を計算する必要がありました。
ここで三角関数を使います。正確には必要なのは画像と、回転させる円の中心までの距離です。
三角関数の計算
まず、imgの両端の角度の計算は以下の手順で自然と出てきますね。
- 正八角形なので中心の角度は360÷8＝45度
- 三角形の内角の角度の合計は180度になるので、imgの両端の角度は(180-45)÷2=67.5度
つまり三角形の角度はこうです。
これで役者が出そろいました。
この直角三角形の要素をもとに『ここの長さがしりたい』と示した辺の長さを計算します。直角三角形ですよ？imgのwidthは÷2=200となることに注意してください。
三角形というものはとても面白く、以下の条件を満たすとほかの辺とか角度はすべてわかるようになっているんですよね。
- 3つの辺の長さ
- 2辺の長さとその間の角度
- 1辺の長さと2つの角度
今回は3番に該当するわけです。
『ここの長さが知りたい』と示した辺の長さを、例によって『x』とおいて考えると、以下の式になります。
x = 200 * tan67.5
ちなみにこれは三角関数の公式なので詳しくは…勉強してみてね（サイト探すのめんどかったのでスミマセン）
javascriptでのtanの計算
さて、javascriptでは以下のようになります。
x = 200 * Math.tan(67.5);
と言いたいところですが、これは間違いです。
実は我が国日本では度(degree)が標準規格ですが、世界的にはradian(ラジアン)という単位が使われているんですね。
ラジアンとは？度数から変換する計算方法は？
よくcssのtransformなどでも角度の度数を表すときには『90deg』なんて書くと思いますがこれはdegreeの略だったんですね。
ちなみに 1度 = 0.0174533…ラジアンです。
で、javascriptのMath.tanでは引数をラジアンで指定する必要があります。
度数をラジアンに変換するためには
ラジアン(rad) = 度数(deg) * (π / 180)
で計算ができます。ここで『π』が登場しました。『π』はjavascriptで表すとMath.PIとなります。
つまり
rad = deg * (Math.PI / 180)
で計算ができます。
計算してみる
出てきた情報を整理します。
- deg = 67.5
- rad = deg * (Math.PI / 180)
- x = 200 * tan(rad)
まず、1番目と2番目を使って67.5度をラジアンに直すと
rad = 67.5 * (Math.PI / 180);
これを3番目の式に代入すれば
x = 200 * (67.5 * (Math.PI / 180)); //計算完了！
となります。
まとめ
どうでしたか？ラジアンとか全く聞いたこともなければ今後使うこともないであろう単位に振り回されるのは癪ですが、世界基準だと思っていた度数を超える単位があったことに驚いた方も多いのでは。
その驚きこそが学びであり発見。そして世界の広さを改めて知り、自分の小ささを見て、また一つ謙虚に新たな一歩を踏み出すのでした。
おわり
備忘録
今回は正8角形の場合でしたが、正n角形の場合の中心までの距離とその計算過程を備忘録として。
tan(90 - *1 = x / (width / 2)
x = (width / 2) × tan(90 - *2
= (width / 2) × tan(90 - (180 / n))
width=400, n=8の場合
x = 200 * tan67.5
= 200 * 2.414
= 482
n=3の場合
x = 200 * tan60
= 200 * 1.732
= 115
ラジアンに変換
rad = deg * (π / 180)
x = (width / 2) * tan*3 * (π / 180))
でした。
