趣味としてのクリエイティブ・コーディング：004：変数で遊んでみよう

2018年10月10日 22:13

前回、ループを使って新しいプログラムを作りました。

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

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

これはこれで面白い形ですね。
今回は「変数」を使って、さらに面白いことをやってみましょう。

本シリーズの趣旨は初回をご参照ください。

変数とは？

変数とは何か？という話はあまり面白くないのでしません。
使っていけば自然とわかると思うので、早速使ってみましょう。

…というか、もう既に使っています。

先程のプログラムだとちょっと分かりづらいので、今回はこのプログラムを使いましょう。

    <html>
    <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
    </head>
    <body>
    <script>
// Creative Commons
// 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);
    fill(0, 60, 50, 100);
    
    for (j = 0; j < 5; j += 1) {
	for (i = 0; i < TWO_PI; i += 0.03) {
	    ellipse(i * 50, -sin(i) * j * 40, 5, 5);
	}
    }
}

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

このプログラムの中で使っている変数は、 i と j です。

どこにあるかわかりますか？ここにありますね。

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

この 2つの変数のうち、j に注目してみましょう。

j が出てくるのはここ。

    for (j = 0; j < 5; j += 1) {
	
	    ellipse(i * 50, -sin(i) * j * 40, 5, 5);

まず最初の for ループの意味は、
for (どこから始める？; どこまで繰り返す？; どれぐらいの間隔で？) {
でしたから、
for (j をゼロから始める; j が 5 より小さいところまで; j を 1 間隔で) {
という意味ですね。

つまり、j が 0 から 1間隔で 4まで、0, 1, 2, 3, 4 と 5回繰り返すってことです。

次の ellipse() の中では、-sin(i) の値に j を掛け算しています。
さらにそれに 40 を掛けていますね。

-sin(i) を j * 40倍している…
j は 0, 1, 2, 3, 4 と 5回繰り返す…
で、このプログラムが描いた図を見ると…

なんとなくわかります？

そうです！ 5本のカーブが j の 0, 1, 2, 3, 4 の 5回の繰り返しと対応してそうですね！

5本の内 1本が直線ですけど、これが j の 0 じゃないでしょうか？
ゼロは何と掛け算してもゼロだから！

写経はいいぞ！
プログラミング界に「写経」という言葉があります。
ソースコードをコピペするんじゃなくて、見てそのまま打ち込むという行為のことです。
コピペしようとキーボードから一文字ずつ打ち込もうと結果は同じなのですが、写経するとあら不思議！プログラムの理解やプログラミングの上達が格段に早くなるんです！
騙されたと思って、一度心を落ち着かせて「写経」してみるといいですよ。

ellipse() の説明

ここで、ellipse() について簡単に説明しておきましょう。
ellipse() は円を描くものですが、() の中に「どこにどんな」円を描くかを指定できます。

() の中には , が 3つありますね。
つまり 4箇所に区切られていて、左から順に以下の意味を持ちます。

1. 円の中心の x 軸上の位置
2. 円の中心の y 軸上の位置
3. 円の幅
4. 円の高さ

今回の例だと、

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

x 軸上の位置が i * 50
y 軸上の位置が -sin(i) * j * 40
円の幅と高さがどちらも 5
ということです。

試しに、
x 軸上の位置を -40 ずらして、
y 軸上の位置を +60 ずらして、
円の幅と高さを 1 にしてみると？

ellipse(i * 50 - 40, -sin(i) * j * 40 + 60, 1, 1);

こうなります。
ほ、細くて見えない！

変数をあちこちで使って遊ぼう

さて、今は変数 j を ellipse() の中の y 軸の指定で使っています。
図でいうと、繰り返しの中で 0, 1, 2, 3, 4 と変化する j のおかげで、y軸、つまり上下の変化が起きているってことですね。

だったら次は左右の変化を起こしたくなるのが人情ってもんです。
やってみましょう！

それには、先程の ellipse() の説明からすると、 i * 50 のところに j を絡ませるとよさそうです。
j を掛け算してみましょうか。

書き換えた後の保存とブラウザでの再読込みは忘れずにね。

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

おう！横はみ出ちゃいましたね！
でも、これはこれで面白い。

…ん？あれ？ 4本になっちゃってません？
さっきまであった直線が無くなりましたね…。

そうか！さっきは縦にゼロを掛けてたから直線になってたのが、今度は横にもゼロを掛けたから点になっちゃったんですね。
そういえば開始のところだけがえらく光ってます。

これ、こうなること想像出来てました？

いや、出来てなくて良いんですよ。
やってみて「あれっ！？」「あっそうか！」ってなるのも趣味のクリエイティブ・コーディングの楽しさですから。
逆に想像出来てないほうが楽しめるってとこあります。

よし、じゃあ次は円の幅と高さ、つまり円の大きさを変化させてみましょう。
横にはみ出るのは具合が悪いんで元に戻して、幅と高さのそれぞれに j を入れてみましょうか。

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

おっ！いいんじゃないですか？

ここでも直線が消えてますけど、なんでだかわかりますよね？

ここまで来ると色も変えてみたいですね。
じゃあ、ellipse() の前に fill() を持ってきてください。

そして、fill() の一番目を j で変化させてみましょう。

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

おおっ！キタキタ！
これで線の本数を増やすとこう！

いいですね～
あれ？でも、線の本数を増やすのはどうするの…？

今回はここまでです。

今回の最後の図のソースは以下です。
今回もこれで終わらずに、変数 i, 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
// 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>

続きはこちらから。

更新履歴
18/10/13 誤字修正
18/10/19 マガジンへのリンクを追加

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