見て楽しむ三角関数

Scratchで三角関数を使って色々な曲線を描きます。学校の授業ではsinやcosがよくわからなかった文系のあなたも、こんな使い方があるんだと思えば少しは興味が湧くかも。日本語で処理を書くので、一般的なプログラミング言語より理解しやすいと思います。私も文系プログラマーです。気楽にいきましょう。

Scratchの基本については良い資料があると思うので他にまかせるとして、ここでは曲線を描くときの基本的な流れを解説します。また、変数や繰り返し、条件分岐、関数のような基本的なプログラミングの知識もここでは扱いませんので、わからなければ読み飛ばすか学習してください。慣れればこんな曲線も描けますよ。



Scratchでは、ペンを下ろしてスプライト（アイコンのようなもの）を移動すると画面上に軌跡が残ります。三角関数を使ってスプライトの座標を次々に計算し、計算した座標にスプライトを移動していくと、結果的に色々な曲線を描画できるというわけです。以下では次の図のような円を描くScratchのコードを示しながら基本的な流れを解説します。



上の図ではScratchで使う座標が円の背景に表示されています。数字の通り、X座標は-240から240まで、Y座標は-180から180までの範囲をとります。この範囲に収まるように座標を計算して描画します。

さっそくScratchでコードを書きましょう。最初にプロジェクトを作ります。Scratchで新しいプジェクトをつくると、自動的に猫のスプライトが表示されますので、このスプライトにプログラムを追加していきます。

スプライト内に必要な変数を作ります。



XとYはスプライトを表示するための座標(位置)で、sinやcosの計算結果を保持します。半径と大きさは同じなのですが、二つ作って大きさだけを画面上にスライダーで表示します。理由は後述します。角度は、値を変化させながらsinやcosの計算に使うための変数です。

プログラムの本体はこれだけです。



最初に色々な準備をして、その後に変数「角度」を変化させながら移動先の座標を計算し、移動を繰り返します。角度は計算処理の中で三角関数に与えるための数字です。この繰り返しにより最終的には画面上に円が描かれます。上の図で紫色の部品はScratch用語では「ブロック」と呼ばれ、関連するいくつかの処理をまとめて名前をつけたものです。一般的なプログラミング言語では関数やサブルーチン、メソッドに相当します。

では、「準備」の処理を見ていきましょう。



1. スプライト自体の絵(猫)はここでは意味がないので隠します。(薄紫)
2. なんども繰り返して描くと前回の曲線が邪魔なので、毎回描画領域をきれいにします。
3. 曲線を描き始めるための開始点に移動するときに余計な線が描かれないようにペンを持ち上げます。
4. 変数「角度」を0に初期化します。角度は0から360まで変化させてsin関数やcos関数に与え、スプライトの位置、つまりX座標とY座標を順に計算します。
5. 円の半径を設定します。「大きさ」も変数で、画面上でスライダーを動かして値を設定できます。この部品を使うと、いちいちプログラムを変更しなくても円の大きさを変化させることができます。大きさと半径を別々の変数にするのは、描画中に半径を変更できてしまうと絵が崩れるからです。描画を始めるときに半径を固定してしまえば、きれいな円が描かれます。
6. 円を描き始めるための開始点にスプライトを移動させるために、角度が0の時の座標を計算します。
7. 計算の結果、最初のX座標とY座標が決まりますので、そこへ移動します。
8. 適当にペンの色を設定します。「乱数」は指定した範囲で毎回違う値を生成しますので、毎回違う色になります。
9. 線の太さも設定します。
10. ペンを下ろすと、移動によって軌跡が描かれるようになります。

これで円を描くための準備ができました。この後は、角度を0から360まで変化させて、計算、移動を繰り返していきます。次は計算処理です。



ここで三角関数が出てきました。cosの定義は三角形の「底辺÷斜辺」で、これに半径=斜辺を掛けると底辺の長さ=X座標が出てきます。同様にsinは「高さ÷斜辺」なので、これに半径=斜辺を掛けると高さ=Y座標が出てきます。ここはわからなくても大丈夫です。何度も繰り返しているとそのうち勘が働くようになるでしょう。

移動先の座標が決まったので実際に移動します。



円は計算式が単純なので、計算と移動をひとつにまとめて



と書いても同じことですが、計算が複雑になってくると式が画面からはみ出してしまい、スクロールしないと見えないので、このように分けています。

角度を変えながら計算と移動を360回繰り返すと円を描くことができます。完成したプロジェクトはこちら。

これから出てくる様々な曲線も大体これと同じ処理で、準備をして、角度を変えながら計算と移動を繰り返すと曲線ができあがります。変更するのは基本的には「計算」の中の式で、必要に応じて角度の範囲や半径を調整します。

タグ：SCRATCH 三角関数 平面曲線