ハート Heart

Scratchでハート型を描きます。



曲線を描く処理の詳細は初回で説明していますので、そちらを参照してみてください。違う曲線ですが流れは同じです。

まず変数です。



コサイン1、コサイン2、コサイン3、コサイン4、サインは計算の途中経過を記録しておくためのものです。関数名と区別しやすいように変数名をカタカナにしています。

本体はまた同じです。



次に準備です。



特筆するようなことはありません。単に描画すると絵が小さいので、倍率を11倍に設定しています。準備についての詳しい説明は初回にありますので、参考にしてください。

次に計算処理です。計算に使う式はWolfram MathWorldにあります。一応元になった式もここに書いておきます。θは角度ですので、プログラムでも該当する箇所に「角度」変数を使います。
\[ x = 16\sin^3(\theta) \\
y = 13\cos(\theta)-5\cos(2\theta)-2\cos(3\theta)-\cos(4\theta) \\
0 \le \theta \le 360 \] 前回と比べると複雑な式ですね。これを見たからといってハートが描画できることは私には想像できません。ですが、下のコードとくらべれば式を分解してコードを書く方法はわかるかもしれません。



最後はY座標を上に23だけ移動しています。ハートが画面からはみ出さないようにです。

移動はいつもと同じです。



座標の計算結果にしたがってスプライドを移動していくと、ハートが描画できます。

完成版はこちら。上のコードにアニメーションを少し追加しています。

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

キス曲線 Kiss Curve

Scratchでキス曲線を描きます。キスというよりは唇かも。



曲線を描く処理の詳細は初回で説明していますので、そちらを参照してみてください。違う曲線ですが流れは同じです。

さて、Scratchのコードです。まず変数です。



「sin角度」はsin関数を計算した結果を入れておきます。「大きさ」はスライダー表示にして曲線の大きさを変更できるようにしています。

本体はいつも通りです。



次に準備です。



これも特筆するようなことはありません。準備についての詳しい説明は初回にありますので、参考にしてください。

次に計算です。式はwww.mathcurve.comにありますが、そのままではどら焼きに見えるので、少し変えています。
\[x = a\cos(\theta) \\
y = a\sin^5(\theta) \\
0 \le \theta \le 360\]
aは倍率、θは角度です。式を見てもなんのことかよくわかりませんが、角度を0から360まで変化させながら上の式を計算するとキスマークのような曲線が描けるのが不思議なところです。Y座標の式の「sin 5乗 θ」は
\[\sin(\theta) \times \sin(\theta) \times \sin(\theta) \times \sin(\theta) \times \sin(\theta) \] つまり、sin(θ)を5回掛けるという意味です。



sin(角度)は5回出てくるので、先に計算して変数に格納しておき、変数を5回掛けています。

最後は移動です。これもいつもと同じです。



完成版はこちら。

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

洋梨曲線 Piriform Curve

Scratchで洋梨のような形の曲線を描きます。



曲線を描く処理の詳細は初回で説明していますので、そちらを参照してみてください。違う曲線ですが流れは同じです。

まず変数から。



今回は半径は使わず、XとYを直接計算します。幅と高さはスライダー表示にして曲線の大きさを変えられるようにしています。

本体はこれまでと同じです。



次に準備です。



特別むずかしい箇所はないと思います。詳しくは初回の説明を参考にしてください。

次に計算です。



式はWolfram MathWorldのものを少し修正しています。式自体を覚える必要はないですよ。図が描ければよし。
\[ x = a\sin(\theta)\\
y=b\cos(\theta)(1+\sin(\theta)) \] ここから洋梨が出てくるなんて不思議ですね。少しだけ説明すると、aは曲線の幅、bは曲線の高さに対応します。θは角度です。数学が得意な人はおやっと思ったかもしれませんが、Scratchのsinやcosはラジアンではなく角度を引数に取ります。

さて、MathWorldではXの式が \[x = a(1+\sin(\theta))\] となっています。違いは「1+」の部分で、これがあると図が描画領域の右半分(Y軸の右側)にだけ描画されます。ここでは描画領域全体を使うように「1+」は取り除いています。

最後の移動はこれまでと同じです。




完成版はこちら。

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

歯車

Scratchで歯車を描きます。

前回の円は、半径を固定して角度だけを0から360まで変化させて描画しました。今度は半径も変化させながらスプライトを動かしてみます。基準となる半径にcos関数を掛けると、円を基準線としてスプライトが波打ちながら移動するので歯車になります。



まず変数です。



「半径の基準」は固定値で、歯車の中心線になります。「歯の高さ」は中心線からの振れ幅です。

本体は前回の円と同じです。準備をして角度を変えながら計算、移動を繰り返します。



次に準備です。



「歯の数」と「歯の高さ」はここでは20で固定していますが、完成版ではスライダー表示にして変更できるようにしています。Scratchの画面ではY軸の範囲は-180から180ですので、計算した半径が180を越えると線がはみ出してしまいます。このため、「半径の基準」を「180 - 歯の高さ」としています。

次は計算です。



円の時は半径は固定でしたが、今回は半径をcos関数にしたがって変化させます。cos関数の計算結果は、下の表のように0から1の間の値になりますので、そのまま使うと画面上では変化がわかりません。そのため、歯の高さを掛けて波が見えるようにしています。

cos	cos(0)	cos(30)	cos(60)	cos(90)	cos(120)	cos(150)	cos(180)	cos(210)	cos(240)	cos(270)	cos(300)	cos(330)	cos(360)
値	1	0.87	0.5	0	-0.5	0.87	-1	-0.87	-0.5	0	0.5	0.87	1

一般的にcos関数にはラジアンを使いますが、Scratchでは単なる「角度」を使います。

その後、計算した半径をもとにX座標とY座標を計算します。最後に、一色だと単調なので色を半径に応じて変化させます。

移動は前回と同じです。



計算された座標にしたがってスプライトを移動すると歯車のできあがり。

完成したプロジェクトはこちら。上のコードに少し手を加えていますが、計算や描画でやっていることは同じです。

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

見て楽しむ三角関数

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 三角関数 平面曲線