見出し画像

趣味としてのクリエイティブ・コーディング:005:ループと変数がわかれば何でもできる!

前回でループと変数の感覚がなんとなく掴めたんじゃないでしょうか。
ループと変数が使えるようになれば、クリエイティブ・コーディングで何でも出来ますよ!

え? サブルーチン? 関数? 再帰? クラスにメソッド、オブジェクト指向?

要らない、要らない、そんなことまだ気にしなくていいです。
そんなの知らなくても趣味のクリエイティブ・コーディングは出来ます。

もちろん色々知っていれば、もっと楽しいことをもっと楽にできるようになります。

でも、その前にまだまだ沢山楽しめることありますよ! 今はもっとサインカーブで楽しみましょう。

本シリーズは、全くのプログラミング初心者の方に向けた「一緒にクリエイティブ・コーディングを楽しみましょう」という趣旨のシリーズです。
プログラムの動かし方は 001 の記事をご覧ください。

回数を増やすには?

さて、前回の最後にサインカーブの本数を増やしてこんな絵を描きました。

前回の最後に示したソースが本数を増やしたパターンのプログラムです。
再掲しますね。

    <html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
    </head>
    <body>
<script>
// Creative Commons CC0
// sc004 趣味としてのクリエイティブ・コーディング:004:変数で遊んでみよう
// 変数をあちこちで使ってみよう

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);
    
    for (j = 0; j < 5; j += 0.5) {
	for (i = 0; i < TWO_PI; i += 0.03) {
	    fill(j * 60, 60, 50, 100);
	    ellipse(i * 50, -sin(i) * j * 40, j, j);
	}
    }
}

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


これは線の本数にあたる j の for ループで、繰り返しの間隔が 1 だったものを 0.5 に変えたものです。
ここですね。

for (j = 0; j < 5; j += 0.5) {

繰り返しの間隔が 1 だと、j は、5 になる前までだから、
0, 1, 2, 3, 4
と変わっていきます。

これが繰り返しの間隔が 0.5 だと、
0, 0.5, 1.0, 1.5, 2.0, 2.5, 3.0, 3.5, 4.0, 4.5
と 10回の繰り返しを行うことになり、5本だった線が 10本に増えたというわけです。

あらためて for ループの意味は、
for (どこから始める?; どこまで繰り返す?; どれぐらいの間隔で?) {
でした。

何回繰り返すか?という直接指定するところが無いのが不思議な感じですが、おかげで繰り返しの回数を増やす方法は他にも考えられます。

さっきは「どれぐらいの間隔で?」を変えましたが、「どこまで繰り返す?」をもっと大きくしてもよさそうですよね?
早速やってみましょう。
ソースを保存してから、ブラウザでの再読込みを忘れずにね。


for (j = 0; j < 6; j += 0.5) {

どこまで繰り返す? を「5より小さい間」から「6 より小さい間」にしたので、大きい方のカーブが追加されました。
ちょっとはみ出しちゃってますけど。

じゃあ次は「どこから始める?」ですが、これをもっと前から始めても回数増えるんじゃありません?

これを…

for (j = 0; j < 5; j += 0.5) {

え?『ゼロなのにそれより前は無いでしょう』ですって?
マイナスがあるじゃないですか!

『マイナスなんか指定してもいいの!?』
いいんです!プログラム上ではマイナスだろうと何だろうと、何指定しても良いんです!
やりましょう!やりましょう!

for (j = -4.5; j < 5; j += 0.5) {

なるほど! マイナスから始めたのでゼロを境に反転した形になったんですね。

あれ? でも、色がおかしいですね?
これはまた次回に fill() のところで説明しますね。
今は色がおかしいままで進めましょう。

さっきのマイナスでの開始を中途半端なところから始めると…

for (j = -2; j < 6; j += 1) {

あ、面白い!
上下非対称の形になりましたよ!


本当にある無限地獄
さっき『マイナスだろうと何指定してもいいんだ!』と言いましたが、勢いのあまり言い過ぎました。

例えば、元の for ループで「どれぐらいの間隔で?」のところを -1 とすると、j は
0, -1, -2, -3, -4, -5, -6, -7, -8 , -9, -10, -11, …
と、いつまで経っても終わりません。

そう、永久にプログラムが動き続けてしまうことになるのです。
これは「無限ループ」や「永久ループ」と呼ばれる、プログラマが決して陥ってはならない罠の一つです。

ま、実際にやってしまったとしても、ブラウザを閉じてしまえばそのプログラムも終了するので安心してください。


ただ繰り返すだけの毎日なんて

じゃあ、他に本数を増やすアイディアは無いでしょうか?
育毛剤を使う!? それも良いアイディアだと思いますが、革新的過ぎて私がついていけないので他に…

そう、for ループをもう一個かぶせるのもいいですね。
例えばこう。

for (k = 1; k < 3; k += 1) {
    for (j = -2; j < 5; j += 0.5) {
	for (i = 0; i < TWO_PI; i += 0.03) {
	    fill(j * 60, 60, 50, 100);
	    ellipse(i * 50, -sin(i) * j * 40 * k, j, j);
	}
    }
}


では、他には?

今回、ellipse() で小さな円を沢山描いて線にしてましたね。
そう! ellipse() を増やせばいいんじゃないでしょうか?
思いついたら即やってみましょう!

ellipse(i * 50, -sin(i) * j * 40, j, j);
ellipse(i * 50, -sin(i) * j * 42, j, j);

縦をちょっとずらしてみました。


片方を横長に変えたりして

ellipse(i * 50, -sin(i) * j * 40, j, j);
ellipse(i * 100, -sin(i) * j * 42, j, j);


横が短いのをもう一個追加しちゃえ!

ellipse(i * 50, -sin(i) * j * 40, j, j);
ellipse(i * 100, -sin(i) * j * 42, j, j);
ellipse(i * 25, -sin(i) * j * 40, j, j);

かなり遊べますね!


試しに横幅と縦幅を同じ割合にしてみましょう。

ellipse(i * 50, -sin(i) * j * 20, j, j);
ellipse(i * 100, -sin(i) * j * 40, j, j);
ellipse(i * 25, -sin(i) * j * 10, j, j);

ああっ!キレイ!
楽しい〜!

今回のソースは以下でした。

またいろいろいじってみて下さい。
これをいじるのが楽しいんですから!

    <html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
    </head>
    <body>
<script>
// Creative Commons CC0
// sc005 趣味としてのクリエイティブ・コーディング:005:ループと変数がわかれば何でもできる!
// ただ繰り返すだけの毎日なんて

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);
    
    for (j = -2; j < 5; j += 0.5) {
	for (i = 0; i < TWO_PI; i += 0.03) {
	    fill(j * 60, 60, 50, 100);
	    ellipse(i * 50, -sin(i) * j * 20, j, j);
	    ellipse(i * 100, -sin(i) * j * 40, j, j);
	    ellipse(i * 25, -sin(i) * j * 10, j, j);
	}
    }
}

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







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