趣味としてのクリエイティブ・コーディング：010：数学が苦手でも楽しめる！

2018年11月18日 12:41

本シリーズの最初の頃にこういう作例をお出ししました。

これはもう作れそうですよね。
一緒にやってみましょうか。

元のソースはこれを使いましょう。
これをコピペして保存してください。

    <html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
    </head>
    <body>
<script>
// Creative Commons CC0
// sc010 趣味としてのクリエイティブ・コーディング：010：数学が苦手でも楽しめる！

function setup() {
    createCanvas(400, 400);
    colorMode(HSB, 360, 100, 100, 100);
    blendMode(SCREEN);
    noStroke();
    noLoop();
}

function draw() {
    background(90, 20, 10, 100);
    translate(40.0, height / 2.0);

    fill(0, 60, 50, 100);
    for (i = 0; i < TWO_PI; i += 0.03) {

	eX = i * 50;
	eY = -sin(i) * 50;
	eR = 5;
	
	ellipse(
	    eX,
	    eY,
	    eR,
	    eR
	);
	
    }

}

</script>
    </body>
    </html>

念の為ちゃんと動くかどうか、今保存したファイルをブラウザで表示してこういう図が出るか確認しましょう。

うひー！シンプル！
懐かしいですね♥

プログラムの動かし方はシリーズ第一回目を参照ください。

だんだん大きく太くなるサインカーブを描いてみよう！

まずはこれやってみましょう。

これはサインカーブが一本なので、for ループも ellipse() も一つで良さそうです。
横に行くにしたがって太さや高さが変化するから、そこに変数を絡めればできそうですね。

太さは、線を構成する円の大きさを変えればいいから、右に行くに従って太くということは、

	eR = i;

こうかな？

よし！太くなった！

でも、ちょっと太さが足りないみたい。
これぐらいでどうかな？

	eR = i * 3;

お、いいかも！

でも、色が違うからか全然雰囲気が違いますね。
元の画像は線が青っぽくて、背景がちょっと赤っぽいのかな？

じゃあ、線の色を fill() で変えて、背景は？

   background(90, 20, 10, 100);

ここで変えることができます。

背景 = バックグランド = background()

そのままですね！

色の値は下の図の角度で考えればいいから、

※上が 0 度で時計回りとして見てね

青は 240 度、赤は 0 度ぐらいなので、まずこう。

   background(0,
   fill(240,

背景は色をちょっと濃い目でちょっとだけ明るく、線は今よりもうちょっと暗めかな？
ということで、

   background(0, 40, 30, 100);
   fill(240, 60, 30, 100);

こんな感じでどうでしょう？

う〜ん、ナイス！

さて、次は波の高さ行きましょうか。
これは右に行くに従って高くだから、

	eY = -sin(i) * i * 50;

こうかな？

あらら！はみ出しちゃった。

	eY = -sin(i) * i * 20;

これぐらい？

うん、こんなもんですね。

最後は、波の数です。
さて、これはどうしたらいいかな？

ついに明かされるサインカーブの秘密…

ここでちょっと数学やりましょう。

数学といっても難しいお勉強ってわけじゃなく、クリエイティブ・コーディングに役立つ楽しいことしましょう。

サイン・コサイン・タンジェントって聞いたことあります？これらは三角関数と呼ばれるものです。
サインはもちろんサインカーブの「サイン」。もう使ってますよね。

	eY = -sin(i) * i * 20;

で、このサインとは一体何かというと、直角三角形の辺の長さの比率なんです。

CC BY-SA 3.0
SVG original of en:Image:Trigonometry triangle.png. Made by Tarquin.

sin(角度) は「斜めの辺分の縦の辺」、図で言うと a / h です。

どんな形、どんな大きさの直角三角形だろうと、 a が h より大きくなることはありませんから、sin(角度)はどんなに頑張っても 0 から 1 の間の値になります 。

※右側が 0度で、反時計回りで見てね

三角形を下向きにひっくり返せば、-1 から 0 の間になりますから、両方合わせて -1 から 1 の間ということになりますね。
この範囲をはみ出すことはありません。

サインカーブというのは、この比率を計算してその値のところに点を描いていったものです。

角度が 0度と180度のときが 0、 90度のときが 1、 270度のときが -1、そして 360度でまた 0。
この 360度で一回転、これをずっと繰り返していくんですね。

そして、角度の単位には 90度、180度などの「度」と、今回のコードで使っているラジアンがあります。

180度 = PIラジアン

と思って下さい。
ということは、1回転は

360度 = PI * 2 ラジアン = TWO_PI

というわけです！

for (radians = 0; radians < TWO_PI; radians += 0.01) {

このコードに出てきた TWO_PI は、サインカーブの 1周分という意味だったのです。

TWO_PI で 1周するということですから、3周させたければ…？
そうです！ TWO_PI * 3 ですね！

だから、こう！

   for (i = 0; i < TWO_PI * 3; i += 0.03) {

あり？

波の数は変わらずに、途中で途切れてた x 軸方向が先まで伸びた形になりました…
x 軸の計算式を見ると、

	eX = i * 50;

あ！そうか！
確かに TWO_PI * 3 で 3周分してるんですが、x軸側も 3倍されてはみ出してるんですね。

x軸はそのままに、角度のラジアンだけ 3倍したいから、sin(角度) ということは、こうなのかな？

	eY = -sin(i * 3) * i * 20;

おお！いい感じ！これこれ！

ちょっと描画の間隔が広くて ellipse() で描いた円が目立っちゃってますから、こうしてみましょう。

   for (i = 0; i < TWO_PI; i += 0.01) {

あは〜！出来ました！

コサインを使ってみると？

ついでにコサインとタンジェントも見てみましょう。

CC BY-SA 3.0
SVG original of en:Image:Trigonometry triangle.png. Made by Tarquin.

サイン sin(角度) は直角三角形の辺の比率、「斜めの辺分の縦の辺」 = a / h でした。
コサイン cos(角度) は「斜めの辺分の横の辺」 = b / h、タンジェント tan(角度) は「横の辺分の縦の辺」 = a / b です。

それぞれ s、c、t の小文字の筆記体のとおりと思うと憶えやすいのですが、伝わるかな？

cos() も sin() と同様 -1 から 1 の間の値になるので、クリエイティブ・コーディングで使いやすいです。
tan() は 0 から無限大にまでなるので、まあ使いづらいです。私は使ったことありません。

sin() と cos() のカーブを並べるとこのようになります。

sin() は 0 から始まるカーブ、cos() は 1 から始まるカーブとなり、どちらも形は同じです。
sin() と 90度（PI の半分）だけずれてると見ることも出来ます。

今まで x軸はこういう式だったので、

	eX = i * 50;

このように等間隔で刻んでカーブを描いていました。

ここを、cos() にしたらどうなるか？

	eX = cos(i) * 50;

なんと！円になるんです！！
すごい！不思議！！

そして、これを今回のお題のこれでやってみると？

式をこうして、

	eX = cos(i * 3) * i * 20;
	eY = -sin(i * 3) * i * 20;

こう！

ね？三角関数、面白いでしょ？

数学苦手だからこそ楽しめるかも

皆さんは、私が数学が得意だとお思いでしょう？

数学が大の得意で大好きで、微分積分お手のもの、虚数空間俺の庭、もしノーベル数学賞というのがあったとしたら、この人が真っ先に受賞するはずだ。
そんな風に思ってらっしゃいますよね？ね？

私、実は数学が不得手で、学校では赤点、毎回補習を受けるほどの苦手っぷりでした。
そんな私でも、サイン、コサインを使ってこんなのを作れたりするんです。

数学苦手だからこんなのが出来上がるなんて予想もできなかったし、未だになんでこんな形になるのか理解できていません。

でも、楽しいんですよ！予想外の物が出てくるワクワク！ここを変えたらどうなるんだろう？というドキドキ！
不得手だからこそ先が読めず、出た結果に驚きを感じることができるのかもしれません。

はい、今回はここまでです！
今回の最後の渦巻きのソースコードはこちらです。
「数学なんぼのもんじゃい！」精神でいろいろ弄り倒して、思いっきり楽しみましょう！

    <html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
    </head>
    <body>
<script>
// Creative Commons CC0
// sc010 趣味としてのクリエイティブ・コーディング：010：数学が苦手でも楽しめる！

function setup() {
    createCanvas(400, 400);
    colorMode(HSB, 360, 100, 100, 100);
    blendMode(SCREEN);
    noStroke();
    noLoop();
}

function draw() {
    background(0, 40, 30, 100);
    translate(40.0, height / 2.0);

    fill(240, 60, 30, 100);
    for (i = 0; i < TWO_PI; i += 0.01) {

	eX = cos(i * 3) * i * 20;
	eY = -sin(i * 3) * i * 20;
	eR = i * 3;

	ellipse(
	    eX,
	    eY,
	    eR,
	    eR
	);
	
    }

}

</script>
    </body>
    </html>

この記事が面白かったらサポートしていただけませんか？ぜんざい好きな私に、ぜんざいをお腹いっぱい食べさせてほしい。あなたのことを想いながら食べるから、ぜんざいサポートお願いね 💕