数学

【三角関数】とは わかりやすくまとめてみた【動画あり】

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

があったら堂々トップ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,200 (2019/12/15 12:53:26時点 Amazon調べ-詳細)

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

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

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

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

4. 【ラジアン】とは わかりやすくまとめてみた【初心者向け】

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

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

7. 【シグマ(∑)】計算をわかりやすくまとめてみた【エクセルのsum】【初心者向け】

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

9. 【虚数】【複素数】とは わかりやすくまとめてみた【初心者向け】

10. 【指数】とは わかりやすくまとめてみた【初心者向け】

11. 【対数】とは わかりやすくまとめてみた【初心者向け】

12. 順列・組み合わせ・階乗とは わかりやすくまとめてみた【数学】

13. 【確率(加法定理)】とは わかりやすくまとめてみた【初心者向け】

14. 【ベクトル場】と【速度ベクトル】とは わかりやすく【ドラクエのすべる床】

↓ ここから下は物理関連

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

2. 【流体力学】とは 圧力・密度・浮力をまとめてみた【初心者向け】

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

1. 【ネイピア数】とは わかりやすくまとめてみた【自然対数の底(e)】

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

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

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

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

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

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

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

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

5. プログラムで【加速度】【速度】の使い方をわかりやすく (5)【P5.js】

6. プログラムの【配列】をわかりやすく『ゴディバ』で例えてみる(6)【P5.js】

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

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

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

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

11. 【三角関数】をプログラムで使う方法をまとめてみた(11)【P5.js】

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

アオキ
ツイッターでも記事ネタ含めちょろちょろ書いていくので、よろしければぜひフォローお願いしますm(_ _ )m

アオキのツイッターアカウント


関連記事一覧 (一部広告あり)

コメント

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

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

CAPTCHA


最近の記事

  1. CG関連

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

    【厳選8冊】ホームページを作れるようになるためのおすすめ本【初心者向け】
  3. バックエンド

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

    『ニュータイプの時代』〜リベラルアーツとテクノロジーの融合〜
  5. 数学

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