趣味としてのクリエイティブ・コーディング：011：一緒に作例で楽しみましょう！

deconbatch

2018年12月15日 22:06

前回はこの図をお題に、どうやったら作れるかな？と考えながらコーディングして、見事に成功しました。

「こういうのを作りたい」と思って、そのとおり作れるなんてすごいことですよ！やりましたね！
今回は本シリーズの締めくくりとして、一緒にいくつか作例を作って楽しみましょう。

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

なんか線が多くて、真ん中が太いやつ

弓なりのカーブで真ん中を太く、そういうカーブを沢山並べてみたら面白いんじゃないでしょうか？

まず、弓なりのカーブを沢山はこんな感じかな？

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
  </head>
  <body>
    <script>
// Creative Commons CC0
// 趣味としてのクリエイティブ・コーディング：011：一緒に作例で楽しみましょう！
// 弓なりのカーブ

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

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

    for (radian = 0; radian < PI; radian += 0.01) {
	for (lineNo = 0; lineNo <= 10; lineNo += 1) {
	    eX = radian * 100;
	    eY = -sin(radian) * lineNo * 15;
	    eR = 5;
	    
	    fill(
		eX % 360,
		60,
		20,
		100
	    );
	    ellipse(
		eX,
		eY,
		eR,
		eR
	    );
	}
    }

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

真ん中を太くするには…

この図を見ると、弓なりのカーブって真ん中が盛り上がってるじゃないですか。この盛り上がりをそのまま線の太さにすればいいのでは？

eY の計算式を使ってこうしてみましょう。

	    eR = sin(radian) * lineNo * 15;

うげっ！太すぎたかな？

	    eR = sin(radian) * lineNo * 2;

う〜ん、線によって太さを変えてみましたが、全部同じ太さのほうがいいのかも？

	    eR = sin(radian) * 10;

お！いい感じ。

下半分が寂しいので、上下対称にしてみましょう。

	for (lineNo = -10; lineNo <= 10; lineNo += 1) {

グッドグッド！

ちょっと色が寂しいので虹色で派手に！

	    fill(
		(eX * 3) % 360,

% 360 は 009章を参照してね。
https://note.mu/deconbatch/n/n11b2c411a8ac?magazine_key=m6968df38e53d

さらに、適当に式をでっち上げてみると…

	    fill(
		(360 + lineNo * 10 + eX - eY) % 360,

意外と面白い！

ここでの 360 + は、lineNo * 10 が -100、 - eY が -150 になる場合があるので、全体がマイナスにならないようにの保険です。

なぜ 360 なのかは、同じく 006章を参照です。
https://note.mu/deconbatch/n/n8a8bd9fe60ad?magazine_key=m6968df38e53d

気まぐれに太さのところを sin() から cos() に変えてみると？

	    eR = cos(radian) * 10;

これもイイ！

sin() と cos() の関係は 010章を参照ください。
https://note.mu/deconbatch/n/n7d533b69abce?magazine_key=m6968df38e53d

もっと太くしたら…？

	    eR = cos(radian) * 30;

…なんか怖いのになったのでおしまい！

線の太さを変えるの面白い

線の太さを変えるの面白いですね。
ここから始めて、違うパターンをやってみましょう。

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
  </head>
  <body>
    <script>
// Creative Commons CC0
// 趣味としてのクリエイティブ・コーディング：011：一緒に作例で楽しみましょう！
// 弓なりのカーブ

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

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

    for (radian = 0; radian < PI; radian += 0.01) {
	for (lineNo = 0; lineNo <= 10; lineNo += 1) {
	    eX = radian * 100;
	    eY = -sin(radian) * lineNo * 15;
	    eR = 5;
	    
	    fill(
		eX % 360,
		60,
		20,
		100
	    );
	    ellipse(
		eX,
		eY,
		eR,
		eR
	    );
	}
    }

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

さっきの真ん中を太くするやつを、3周分やってみると？

	    eR = abs(sin(radian * 3)) * 5;

sin() がマイナスになる可能性があるので絶対値を取るように abs() で囲みましょう。

3周分は 010章を参照ください。
https://note.mu/deconbatch/n/n7d533b69abce?magazine_key=m6968df38e53d
abs() は 009章参照です。
https://note.mu/deconbatch/n/n11b2c411a8ac?magazine_key=m6968df38e53d

こうなりますね。

じゃあ、線によって何周するかを変えてみましょう。
それにはこうして、

	    eR = abs(sin(radian * lineNo)) * 5;

おお！いいじゃない！
もうちょっと太いほうがいいかな。

	    eR = abs(sin(radian * lineNo)) * 8;

さっきの3周分のやつをこれに掛け算してみましょう。

eR = abs(sin(radian * lineNo) * sin(radian * 3)) * 8;

悪くない！

掛け算じゃなくて、足し算してみると？

eR = abs(sin(radian * lineNo) + sin(radian * 3)) * 8;

おや！変わった形。

じゃあ今度は試しに sin() と cos() を足してみましょう。

eR = abs(sin(radian * lineNo) + cos(radian * lineNo)) * 8;

なかなかオシャレなパターンかも！

下半分にも描くようにして…

	for (lineNo = -10; lineNo <= 10; lineNo += 1) {

うん、いいですね！

カーブの形を変えてみる？

サインカーブの弓なりのカーブの部分の形を変えられないでしょうか？
2乗してみましょうか？

sin(radian) * sin(radian)

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
  </head>
  <body>
    <script>
// Creative Commons CC0
// 趣味としてのクリエイティブ・コーディング：011：一緒に作例で楽しみましょう！
// カーブの形を変えてみる？      

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

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

    for (radian = 0; radian < PI; radian += 0.01) {

	eX = radian * 100;
	eY = -sin(radian) * sin(radian) * 80;
	eR = 10;
	
	fill(
	    eX % 360,
	    60,
	    20,
	    100
	);
	ellipse(
	    eX,
	    eY,
	    eR,
	    eR
	);

    }

}

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

ちょっと形が変わりましたね。

これでさっきと同じように真ん中を太くすると？

	    eR = abs(sin(radian)) * 30;

おお！何かヒゲみたい！

ちょっと明るすぎるからもう少し暗くして、もうちょっと太くしてみようかな。

	    eR = abs(sin(radian)) * 60;
	    
	    fill(
		eX % 360,
		60,
		10,
		100
	    );

あれ…？これもしかして…？
下側にも同じ形を上下対称に描いてみると？

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

ヒゲというより唇では！？
じゃあ、色を赤にしてみましょう。明るさももうちょっと抑えて。

	    fill(
		0,
		60,
		5,
		100
	    );

ゥワァオ！セクスィー！

開始点を変えてみる？

今度はサインカーブの開始点を変えてみましょう。
こんな感じに角度のところに線毎に加算してみると？

sin(radian + lineNo)

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.js"></script>
  </head>
  <body>
    <script>
// Creative Commons CC0
// 趣味としてのクリエイティブ・コーディング：011：一緒に作例で楽しみましょう！
// 開始点を変えてみる？

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

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

    for (radian = 0; radian < TWO_PI; radian += 0.01) {
	for (lineNo = 0; lineNo <= 1; lineNo += 1) {

	    eX = radian * 50;
	    eY = -sin(radian + lineNo) * 50;
	    eR = 10;
	    
	    fill(
		eX % 360,
		60,
		20,
		100
	    );
	    ellipse(
		eX,
		eY,
		eR,
		eR
	    );
	}
    }

}

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

こんな感じになります。
カーブがそのまま横にずれた感じですね。

このまま線を増やしてみましょう。

	for (lineNo = 0; lineNo <= 10; lineNo += 1) {

お！面白い！

線毎に高さを高くしてみると…？

	    eY = -sin(radian + lineNo) * 50 * lineNo;

でででで！大きすぎた！

高さを調整して、線の太さも細いほうがいいかな？

	    eY = -sin(radian + lineNo) * 10 * lineNo;
	    eR = 3;

うん！カッコイイ！

よし、じゃあ次は、右に行くに従って高さを高くしてみましょう。

eX が大きくなるにしたがって eY を大きく、あんまり大きくするとさっきみたいにはみ出ちゃうので気をつけないと。
そうなると計算めんどくさそうなので、map() を使いましょう。

map() は 009章を参照ね。
https://note.mu/deconbatch/n/n11b2c411a8ac?magazine_key=m6968df38e53d

eY = -sin(radian + lineNo) * map(eX, 0, TWO_PI * 50, 10, 20) * lineNo;

これでどうかな？

うん、まあまあだけど、思ったほど面白くないですね。
もうちょっと極端でもいいかな？

eY = -sin(radian + lineNo) * map(eX, 0, TWO_PI * 50, 0, 20) * lineNo;

思い切って高さゼロから始めてみたら？

あぁ！いいじゃない！

これで、サインカーブが 2周するようにしたら…？

eY = -sin(radian * 2 + lineNo) * map(eX, 0, TWO_PI * 50, 0, 20) * lineNo;

お！さらに、こう！

eY = -sin(radian * 2 + lineNo * 2) * map(eX, 0, TWO_PI * 50, 0, 20) * lineNo;

無限に遊べる気がする〜！

このシリーズを通して出来るようになったこと

いかがでしたか？
今まで作例を通していろんなことを試してきましたが、プログラミングや環境についてはほとんど何も説明してきませんでした。

でも、実は皆さんは既にこんなプログラミングが出来るようになっています。

■JavaScript プログラミング
- for 文
- if 文
- 変数の利用
■p5.js プログラミング
- fill()
- ellipse()
- background()

これらを使って今回作ったようなこんなのを作れるようになってるんです。

思い出してください、最初に作ったのこれですよ。

ここから始めてこんなにバラエティ豊かなものを作ってきました。
もう何でも作れそうですね！

楽しめたかな？

さて、全くのプログラミング初心者の方へ向けたクリエイティブ・コーディングへのお誘い、本シリーズは今回で一区切りです。

楽しかったでしょうか？私はとても楽しかったです。
ここまで読んで、試してくださってありがとうございました。

もし、あなたの趣味の一つに「クリエイティブ・コーディング」が加わったとしたら望外の喜びです。

次回また楽しい「何か」でお会いできると嬉しいです！

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