数学

【三角関数】の使い方〜わかりやすさ重視でまとめてみた【動画あり】

『なんのために勉強しているかわからないランキング』

があったら堂々トップ3には入ってきそうな『三角関数』。

高校生の頃は文字通りなんのためにやっているかまるでわかっていなかったんですが、

子ども向け無料プログラミング道場『CoderDojo熊本』向けに、

スクラッチのその先へ

というお題で数学や物理を改めているうちに、

アオキ
実は『三角関数』ってめっちゃ使われてるやん。。

ということに今更ながら気づかされて。

高校のころからこんな感じで説明してもらえてたらよかったのになぁ、

という気持ちで、

難解と思われる『三角関数』を、できるだけ紐解いて書いていこうと思います。

Sponsored link

三角関数の使い方〜そもそもXとYってなんなのさ

中学数学あたりからでてくるXとY。

数学では一般的に、

  • X軸は横
  • Y軸は縦

とで表すようになっています。

教科書の中でしか出番がないかと思いきや、実は現実社会でこれでもかと使われています。

身近なところでいうと、『グーグルマップ』

いわゆる地図ですが、

地図は平面で書かれているので、

世界中どんな場所でもXとYで位置を特定できるということになります。

ググってみたらこんなサイトがありました。

地図から座標値を取得するページ

試しに『熊本城』で検索してみると、

  • 経度・・130.705833
  • 緯度・・32.806185

と表示されました。

『松本城』だと、

  • 経度・・137.968955
  • 緯度・・36.238652

と表示されました。

細かい数字はおいておいておきますが、ようは、

縦と横の数字を使うことで、『熊本城』でも『松本城』でも場所を特定できるということですね。

カーナビでおなじみの『GPS』も同じような仕組みで、

アオキ
X(横・左右)とY(縦・上下)さえわかれば、世界中どの場所にいるかがわかってしまうんですね・・

教科書の中だけしか活躍の場がないと思っていたXとYですが、

実は地球規模の位置特定システムなんかにも使われているすごい仕組みなんです。

アオキ
たかがXY、されどXYですな。

三角関数の使い方〜現実世界の測量をするために誕生したのが『三角関数』

サインコサインタンジェントという魔法のような名前だけは覚えている『三角関数』。

これまた学校の教科書の中だけで使われているかと思いきや、

現実世界でこれでもかといわんばかりに活用されています。

  • 測量・・GPS、地図、土木工学、精密機械工学、ケーキカット
  • 回転・・ゲームプログラミング、CG、航法、機械工学、宇宙機や航空機の姿勢制御
  • 波・・ 音声処理、画像処理、ノイズフィルター、振動工学、量子力学などさまざまな物理学分野
  • その他・・内積、コサイン類似度、ボックス=ミュラー法(正規乱数の生成)、カーネル法における非線形関数としてなど

参考

三角関数は何に使えるのか 〜 サイン・コサイン・タンジェントの活躍 〜

とはいえいきなりサインコサインタンジェントの公式を丸暗記してもナンジャラホイとなってしまうので、

そもそもなぜに三角関数は生まれたのか、っというところから調べてみると、よさげな記事がありました。

三角比とはなんだ?何の役に立つ?どんな歴史があるの?

ようは、2000年以上前に、現実世界の測量のために生まれたようです。

ヒッパルコス
山までの距離と、山の頂上を見たときの角度がわかれば、実際の山の高さがわかっちゃうで。

ヒッパルコス
例えば山までの距離が5000mで、角度が24度なら、タンジェントつかって山の高さが2226mってのがわかっちゃうで。

いやーすごい。

これ考えたヒッパルコスさんハンパない。

2つの角度が同じなら、大きさは違っても形はかわらないという三角形の法則と、

2つの角度(直角90度ともう一つの角度)と1つの長さがわかれば、

もう一方の長さも計算できちゃうという『三角関数』を使いこなして、

  • 遠くの山の高さを測ったり、
  • 地球の半径を測ったり、
  • 月までの距離を測ったり、

ということもできるようになったと。

アオキ
教科書の中だけの世界観じゃなんかしっくりこなかったんですが、
アオキ
現実世界での使われ方をセットで知ると、ようやくちょっとだけわかってくるような気がしますな・・

三角関数の使い方〜サインコサインタンジェントの式をXとYに置き換えてみる

ここで改めて、数学の教科書でもおなじみのサインコサインタンジェントの式をば。

教科書でおなじみの書き方だと、a,b,c とついちゃってるのが多いのですが、

プログラミングでも使いやすいように、

横軸はx、縦軸はy

としつつ、

あとで説明しますが、aはrと書き換えておきます。

  • 横が x
  • 縦が y
  • ななめが r (rはradius(ラディウス)の略、日本語で半径という意味)

ですね。

  • サイン・・rの長さと角度がわかれば、yの長さ(縦軸の長さ)がわかる
  • コサイン・・rの長さと角度がわかれば、xの長さ(横軸の長さ)がわかる
  • タンジェント・・xの長さ(横軸の長さ)と角度がわかれば、yの長さ(縦軸の長さ)がわかる

という意味になります。

計算の方法は、

分数の計算の仕方は小学校で習ったかどうか・・?、なのですが、

イコールの左側(左辺)と、イコールの右側(右辺)両方に、分母の数をかけ算するとOKです。

例えばサインならこんな流れ。

イコールの左側(左辺)と、イコールの右側(右辺)両方に r をかけて、分母がなくなると(正確には1なのですが気にしない)。

で、

  • 角度が30度ならサイン(sinθ)は 0.5
  • 角度が60度ならサイン(sinθ)は 0.866
  • 角度が90度ならサイン(sinθ)は 1

と、角度に合わせて対応する数字が決まっているのですが、

これは2000年前にヒッパルコスさんが法則を見つけていたそうで、『三角比の表』というものがあります。

三角比とはなんだ?何の役に立つ?どんな歴史があるの?

アオキ
ところで、なんで数値が決まっているの?

と思っていろいろ調べてみたところ、

どうやら『円』と組み合わせてみるとわかりやすいようです。

三角関数の使い方〜三角だけど円で見るとわかりやすい

三角形と『円』を組み合わせた図がこちら。

まずは『サイン(sinθ)』。

左上から右に向かって見ていきます。

1段目:三角形の角度が、30度→60度→90度 と変わると、オレンジの線の長さが伸びていきます。

ちょうど90度で、半径とぴったりになります。

2段目:120度→150度→180度で、オレンジの線が短くなり、180度で0になります。

同じように、
3段目は270度でオレンジの線が半径とぴったりになり、
4段目、360度(0度)でオレンジの線が0になります。

仮にこの円の半径を『1』とすると、

  • 0度・・・0
  • 90度・・・1
  • 180度・・・0
  • 270度・・・-1
  • 360度(0度)・・0

という風に変わっていきます。

これがサイン(sinθ)の値になります。

アオキ
角度が変わると伸びたり縮んだりするわけですな。
アオキ
値がもっとも大きい時に、『半径の長さと一緒』 になるんですね。

次に『コサイン(cosθ)』。

こちらも左上から右に流れていきます。

0度の時が青い線が一番長くて、
30度→60度と変わるうちにだんだん短くなって、
90度で青い線が0になります。

2段目:ちょっとずつ青い線が伸びていって、180度で一番長くなります。

仮にこの円の半径を『1』とすると、

  • 0度・・・1
  • 90度・・・0
  • 180度・・・-1
  • 270度・・・0
  • 360度(0度)・・1

という風に変わっていきます。

これがコサイン(cosθ)の値になります。

なめらかに動かすとこんな感じになります。

アオキ
こうやってみるとなんとなくわかってくる気がしますな。

ちなみに・・『タンジェント(tanθ)』はちょっと特殊な動きをするので今回は省きます。

これらの計算を手でやるとなかなか大変なんですが、

プログラミングを使うと『三角比の表』が手元になくても簡単に計算できて、なんなら動かすこともできるようになります。

Sponsored link

プログラミングと三角関数〜スクラッチでサインコサインを使ってみる

せっかくなので、試しに『スクラッチ』でやってみました。

サインの場合、

  • サイン・・r(半径)の長さと角度(θ)がわかれば、yの長さ(縦軸の長さ)がわかる

rというのは、『円』で考えれば半径の長さになります。

という事で、r(半径)の値を適当に100として動かして、角度(θ)を1ずつ増やしています。

わかりやすいように横軸(X)も1ずつ増やしてみます。

動画だとこんな感じになります。

角度が増えるほど、高さ(Y軸)が100に近づいていって、

  • 90度の時に高さ(Y軸)が100になって、
  • 180度の時に高さが0になって、

というような動きをしています。

アオキ
パッとすぐに試せるのがスクラッチの良さですよね〜

また、サインとコサインを組み合わせると、

  • サイン・・r(円の半径)の長さと角度がわかれば、yの長さ(縦軸の長さ)がわかる
  • コサイン・・r(円の半径)の長さと角度がわかれば、xの長さ(横軸の長さ)がわかる

横軸(X)と縦軸(Y)がわかることになるので、

この動画の真ん中のボールみたいに、1度変わるごとにX(横)とY(縦)がわかって、ちょうどまん丸に動くようになります。

  • 高さ(Y軸)を r(円の半径)(今回は100) かける サイン(sinθ) で出して、
  • 横(X軸)を r(円の半径)(今回は100) かける コサイン(cosθ) で出しています。

角度が1ずつ変わる事で、この動画みたいな動きになります。

アオキ
プログラミングのスゴさは、学校の教科書の中だけでおわらず、実際に実験できちゃう事なんでしょうね。(特にスクラッチすごい)

三角関数の使い方をまとめてみて

教科書ではおなじみで、

日常生活ではまず使わないとレッテルを貼られているかのような『三角関数』。

実際はこれでもかといわんばかりにいろんな世界で使われているんですが、

なかなかその便利さがわからず、使う機会がなかったのかなぁと思います。

けれど、

『スクラッチ』や『JavaScript(ジャバスクリプト)』などを使って、

プログラミングで『三角関数』を使ってみると、

多少なりとも身近になるんじゃないかなと思ったりしました。

アオキ
小学生でもわかる『三角関数』を目指してわかりやすさ重視で書いてみましたが、
アオキ
もしここがわかりづらいなどあればぜひご連絡いただければと思います。

余談
サインコサインタンジェントの名前の由来の記事があったので紹介しておきます。

サイン・コサイン・タンジェントの由来

created by Rinker
¥2,160 (2019/08/21 06:49:33時点 Amazon調べ-詳細)

『数学・物理』関係ではこんな記事も読まれています。

1. 【ベクトル】をわかりやすくするコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

2. プログラミングで【加速度】をわかりやすくするために実際に動かしてみる(5)【P5.js】

3. プログラミングで数学も身につく 一石四鳥なクリエイティブコーディング

4. 【三角関数】の使い方〜わかりやすさ重視でまとめてみた【動画あり】

5. 【図解】波の用語や動きをプログラミングも交えてまとめてみる【数学&物理】

6. 【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】

7. 【極座標 】とは?【直交座標 】との違いや変換方法についてまとめてみた

↓ ここから下はちょいムズカシイ

1. 【ベクトル解析 勾配(grad)】わかりやすくまとめてみた

2. 【ベクトル解析 発散(div)】わかりやすくまとめてみた

3. 【テイラー展開】をわかりやすくまとめてみた【おすすめ動画あり】

『クリエイティブコーディング』関係ではこんな記事も読まれています。

1. 【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめのいっぽ〜(1)

2. 移動・回転・拡大縮小を覚えると表現に幅がでてきます(2)【P5.js】

3. 【CSS】色の指定なら『RGB』より『HSL』の方が使いやすい件〜ランダムで使いたい【P5.js】(3)

4. 『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5.js】

5. 加速度をわかりやすくするために実際に動かしてみる【まずは2Dから】(5)【P5.js】

6. 配列をわかりやすく『ゴディバ』で例えてみる〜ボールを100個に増やしたり(6)【P5.js】

7. プログラミングの関数をわかりやすく使ってみる〜自動販売機に例えてみる〜(7)【P5.js】

8. プログラミングで色や大きさをランダムにして遊んでみる(8)【P5.js】

9. 【3Dプログラム】初心者にオススメな方法はこれ【P5.js】(9)

10. プログラムで図形の描き方~頂点と【バラ曲線】を使って〜 (10)【P5.js】

11. プログラミングで数学も身につく 一石四鳥なクリエイティブコーディング

12. プログラミングと三角関数〜小学生でもすんなりわかる三角関数を目指して

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


関連記事

  1. 数学

    【GLSL】距離関数を使ってみる・回転・合成・量産『レイマーチング』入門(3)

    プログラミングでかっこいい映像がつくれるということで始めた『レイマーチ…

  2. 数学

    【ベクトル解析 勾配(grad)】わかりやすくまとめてみた

    『3Dプログラム』に取り組むうちに目にするようになってきた『ベクトル解…

  3. 数学

    プログラミングで回転させたいなら『ラジアン』を知っておくといいかもよ【初心者向け】

    プログラミングを使って、デザインをしたりアートを作ったりすることを…

  4. 数学

    【図解】波の用語や動きをプログラミングも交えてまとめてみる【数学&物理】

    先日とあるサイトを見ていたらとてもかっこいい映像を見つけました。…

  5. 数学

    【ベクトル解析 発散(div)】わかりやすくまとめてみた

    『3Dプログラミング』に取り組むうちに目にするようになってきた『ベクト…

  6. 数学

    【GLSL(シェーダー)】立体的に見せる方法〜光の反射は『内積』で〜『レイマーチング』入門(2)

    プログラミングでかっこいい映像をつくる方法の一つに、『レイマーチン…

Sponsored link

最近の記事

  1. IoT関連

    【Arduino】ラジコンをつくってみた 〜今ドキのプログラミングの覚え方
  2. バックエンド

    【Laravel(PHP)】でできる事をわかりやすく(ざっくりと)まとめてみた【…
  3. 数学

    【三角関数】の使い方〜わかりやすさ重視でまとめてみた【動画あり】
  4. バックエンド

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  5. 数学

    【微分】とは わかりやすくまとめてみた〜めっちゃすごいわり算【初心者向け】
PAGE TOP
//記事ページのみに構造化データを出力 //サムネイルを取得 //ここから構造化データの記述