クリエイティブコーディング

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

アオキ
すんません、ほんますんません。
アオキ
コーディングマス、なめてました・・

前回の記事で、
プログラミングを使って数学がわかるという『コーディングマス』を見始めまして。

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

スクラッチのその先へ

というお題で、気軽な気持ちでやってみようかと思ったんですが、

まさかまさか、しょっぱなから 『三角関数』がでてこようとは。

しかもわずか15分の動画で、全編英語で、

  • サイン・・三角関数
  • コサイン・・三角関数
  • タンジェント・・三角関数
  • ラジアン・・円の一周を2πとする『弧度法』の単位
  • パイ・・円周率

あたりをさら〜とやってのけるなんて。

現在の僕の数学スキルは四則演算くらいなもんで、

三角関数が便利なものってのはプログラミング始めてようやく知ったくらいの浅さなのです。

とはいえ、一度やると決めた以上は、

多少難しかろうが頑張って乗り越えていってやろうとも思います。

アオキ
『難しいことをわかりやすく説明する』というのが僕の特技なはずなので(思ってるだけですけども)

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

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としておいたほうがなにかと楽なのでこう書き換えます。

  • 横が x
  • 縦が y

ですね。

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

という意味になります。

計算の方法は、

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

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

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

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

で、

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

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

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

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

『三角比の表』をひとつひとつ見比べながら計算するとなかなか大変と思いますが、

プログラミングを使うと『三角比の表』が手元になくても簡単に計算できます。

Sponsored link

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

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

サインの場合、

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

プログラミングと三角関数をまとめてみて

教科書ではおなじみで、

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

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

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

けれど、

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

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

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

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

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

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

今回の『コーディングマス』では、『ラジアン』の話もあったのでこれまたできるだけわかりやすく解説したいのですが、

流石に長くなってきたので、続きは次回・・・

created by Rinker
¥2,160 (2019/06/19 13:45:54時点 Amazon調べ-詳細)

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

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個に増やしたり【P5.js】(6)

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

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

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

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

コメント

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

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

CAPTCHA


Sponsored link

関連記事

  1. Python

    スクラッチ(scratch)とマインクラフト(minecraft)を連携させて子ども向けプログラミン…

    CoderDojo熊本を立ち上げてからというもの、日々お勉強の毎日にな…

  2. P5.js (Processing)

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

    遊ぶようにプログラミングができて、デザインやアートをつくれる『クリエ…

  3. Javascript

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

    プログラミングを始めた頃に、よくわからないと思っていたものの一つに『…

  4. CoderDojo

    【とにかくオススメ】子どものプログラム練習にマインクラフトがオススメな4つの理由

    子ども向け無料プログラミング道場『CoderDojo熊本』を立ち上げて…

  5. スクラッチ scratch

    【スクラッチ】ジャンプをする方法〜3ステップでジャンプできるようになる〜

    子ども向け無料プログラミング寺子屋『CoderDojo熊本』開催中…

  6. スクラッチ scratch

    スクラッチでセーブする方法を考えてみる〜基本的な考え方〜

    子供向け無料プログラミング寺子屋『CoderDojo熊本』にて参加され…

Sponsored link

最近の記事

Sponsored link
  1. プログラミング

    『プログラミング教育』より大事な事を考えてみる~AI時代を見据えて~
  2. クリエイティブコーディング

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

    『ベクトル』の使い方のコツ〜『ベクトル』はただの数値の組み合わせです(4)【P5…
  4. 検索システム

    バリアフリーなホテル のページをオープンしました。
  5. P5.js (Processing)

    【P5.js】遊ぶようにプログラミングできるクリエイティブコーディング〜はじめの…
PAGE TOP