見出し画像

趣味としてのクリエイティブ・コーディング：003：ちょっと勉強してみよう

deconbatch

前回プログラムを書き換えて、新しいプログラムを作りました。
『自分だけのプログラムと、そのプログラムが書いた自分だけのサインカーブ』を手に入れたわけですね！

今回はさらにそれを押し進めましょう。

画像1

ちょっと勉強するだけで…

前回、プログラム中の数値を自分なりにいろいろと変えて試してみましたか？
それだけでもそこそこ楽しめると思いますが、変えられる箇所が限られるのでそろそろ飽きちゃいましたか？

今回はちょっと頑張って、こんなのや

画像2

こんなの

画像3

を描くために、プログラムについて少し勉強してみましょう。

プログラミングの勉強というと、条件分岐、関数、サブルーチン、再帰、アルゴリズムにデータ構造と難しい話がいろいろ出てきますが、ここでは

・ループ
・変数

だけ。
それも理屈よりも実践重視でやっていきましょう。


画像4

ループ

まずは最初のソースコードを見てみましょう。

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
  </head>
  <body>
    <script>
// Creative Commons CC0.
      
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) {
	ellipse(i * 50, -sin(i) * 50, 5, 5);
  }
}

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

この中でループはここのことです。

    for (i = 0; i < TWO_PI; i += 0.03) {
	  ellipse(i * 50, -sin(i) * 50, 5, 5);
    }

 

ループとは「繰り返し」のことで、ある処理を何回か繰り返したいときに使います。

前回「ellipse はサインカーブを書くのに使われてるんだな」と勘付かれたと思いますが、実は ellipse は一個の円を描くものです。

円を描くものでどうやってサインカーブを描くんだ？ってことですが、小さな円を 210個描いてサインカーブにしているんです。
点の集まりで線を描いてるってイメージです。

画像5

ellipse 一個で一つの円を描けますので、210個の円を描くには ellipse を 210回プログラム中に書けばよいことになります。

ellipse(0, 0, 5, 5);
ellipse(1.5 -1.49978, 5, 5);
ellipse(3 -2.99820, 5, 5);
ellipse(4.5 -4.49393, 5, 5);
ellipse(6 -5.98561, 5, 5);
ellipse(7.5 -7.47191, 5, 5);
 …

こんな感じでできないことはないですが、結構疲れるし、書き間違いそうだし、どこか間違ってたとしたら探すの大変だし…

と、そんなときにループです！
例えばこんな風に書くと、ellipse を 210回実行してくれます。

   for (i = 0; i < 210; i += 1) {
     ellipse(わざと省略);
   }

こう書けば 10回

   for (i = 0; i < 10; i += 1) {
     ellipse(わざと省略);
   }

こう書けば文句も言わずに 100万回実行してくれます！

   for (i = 0; i < 1000000; i += 1) {
     ellipse(わざと省略);
   }

画像6

for ループ

この for で始まるループを「for ループ」と呼びます。
下記の例だと、まず i を 0 にして、1個ずつ数えながら 210 にならない間 { から } の間を繰り返す、という意味になります。

   for (i = 0; i < 210; i += 1) {
     ellipse(わざと省略);
   }

 
では、実際のプログラム中の for ループ はどういう意味でしょう？

   for (i = 0; i < TWO_PI; i += 0.03) {
     ellipse(i * 50, -sin(i) * 50, 5, 5);
   }

そうですね。
まず i を 0 にして、0.03ずつ数えながら TWO_PI にならない間 ellipse(i * 50, -sin(i) * 50, 5, 5); を繰り返す
という意味です。

TWO_PI って何かというと、数学のパイ、3.14 の 2倍のことで、360度のラディアン値、ということはひとまず忘れて、サインカーブを書くのに要るものと思ってください。
TWO_PI が気に入らないなら 3.14 の 2倍の 6.28 としてもいいですよ。

試しにこの TWO_PI を PI、つまり 3.14 に書き換えてみましょう。

   for (i = 0; i < PI; i += 0.03) {
     ellipse(i * 50, -sin(i) * 50, 5, 5);
   }

 

画像7

ほら、TWO_PI が PI と半分になったので、カーブも半分になりましたね。

つまり、for ループの i < TWO_PI; のところが「どこまでやるの？」を決めるところなわけです。

では次に「0.03ずつ数えながら」の i += 0.03 はどうでしょう？
ここも試しに 0.03 を 0.1 に書き換えてみましょう。さっきの PI は TWO_PI に戻してね。

   for (i = 0; i < TWO_PI; i += 0.1) {
     ellipse(i * 50, -sin(i) * 50, 5, 5);
   }

画像8

ん？ 点々が出てきましたよ。
この点が ellipse() で描いている円です。

じゃあ、0.5 にしてみると？

画像9

点と点の間隔がさらに広がりました。

そうです。 i += 0.03 のところは、「どれぐらいの間隔で？」繰り返すかを決めるところです。

まとめると、for ループは

for (どこから始める？; どこまで繰り返す？; どれぐらいの間隔で？) {
}

という意味です。
「何回繰り返す？」を指定するところは無いのが面白いところです。


ではここで問題です！ 以下はどういう意味になるでしょう？

  for (j = 0; j < 5; j += 1) {
	for (i = 0; i < TWO_PI; i += 0.03) {
	  ellipse(i * 50 + j * 10, -sin(i) * 50, 5, 5);
	}
  }

い、いきなりそんな！？ 難しいよ！


プログラミングの勉強
ただ本を読むだけだと「ほ～ん、良い本を読んだ」という感想を得られるだけで何も身につきません。（私の場合、私の場合ね）
何か「これをやりたい！」という目的があって、それを実現させるための知識を得るために本を読み、その内容を手を動かして実践して始めて身につきます。


画像10

動かしちゃえ！

さっきの問題わかりましたか？

わかっても、わからなくても、実際に動かして試してみましょう。
趣味のクリエイティブ・コーディングは理屈を勉強するのが目的じゃなくて、プログラムを書いて動かしてその結果を楽しむものですから。

画像11

さて、このような図が出ましたでしょうか？
サインカーブが 5本になりましたね。
はい、そうです。サインカーブを描くためのループ全体を 5回繰り返してるんですね。

では、 j += 1 を j += 0.5 にするとどうなるでしょう？
やってみましょう。

画像12

なんかリボンのようになりましたが、実際は サインカーブを 10本書いていること、わかりますよね？

じゃあ最後に、ellipse() のところを下記のように書き換えてみましょう。

ellipse(i * 50 + j * 10, -sin(i) * (50 + j * 10), 5, 5);

 
結果はこう。

画像13

だんだんカッコよくなってきました！

でもなぜこうなるのか？ は次回にしましょう。
今回はここまでです。

今回のプログラムもあちこち書き換えて試してみてください。
まだまだ楽しめますよ。


画像14

自分のためにコメントを入れよう

さて、過去に書いたプログラムをぱっと見て、何をするプログラムだかわかりますか？
どんどん作りためて 100個ぐらいになったら？ 一年前に書いたプログラムだったら？

ソースコードを読み解けば何をしているのか解るかもしれませんが、毎回そんなことするのはしんどいですよね。

ですので、プログラムのソースコード中にコメントを書いておきましょう。

コメントは「何をしているのか」を書くべきであって「どうやっているのか」を書くべきではないとか、メンテナンスをきちんとすべきとかいろいろあるんですが、今はそんな小難しいことは考えずに、まずは自分のためのメモと考えて書いてみましょう。

例えば、こんなのを入れておくと、何のプログラムなのかわかるし、いつ何をしたかのメモを残しておくと後々「私にもこんな時代があったのか」と遠い目をすることができるかもしれません。

<script>
// 趣味としてのクリエイティブ・コーディング：ちょっと勉強してみよう
// ループの例
// 18/10/08 わからん。+= って何？
// 18/10/10 javascript の for を調べる
// 18/10/11 for ループ 完全に理解した！

コメントは <script> と </script> であれば、先頭に // を付けることでコメント扱いとなります。


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