趣味としてのクリエイティブ・コーディング：006：色彩を操ろう！

2018年10月19日 22:17

前回でとても綺麗なカーブを描くことができましたね。

今回はこれを元にしてまた楽しんでいきましょう。
プログラムの動かし方はシリーズ第一回目をご参照ください。

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

    <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>

色や明るさ

ここで、色や明るさを指定できる fill() について簡単に説明しておきましょう。

fill(j * 60, 60, 50, 100);

fill() の中には , が 3つあります。ということは 4箇所に区切られているということですね。
4箇所の意味は、左から

1. 色
2. 色の鮮やかさ
3. 明るさ
4. 透明度

となっています。

色は 0 から 360 までで、
0 赤
120 緑
240 青
で、360 で赤に戻るという環状になっています。
「色相」とも呼ばれます。

こういう図どこかで見たことありませんか？

次に、色の鮮やかさは 0 から 100 まで。
100 が最も鮮やかで、0 は色無しになります。
「彩度」ともいいます。

このバラの花、花びらの先の赤い色がとっても鮮やかですよね。

鮮やかということは「彩度」が高いので、例えば 80 としてみましょう。

fill(0, 80, 100, 100);
ellipse(160, -100, 100, 100);

花びらの付け根にかけて色が薄くなって白っぽくなっていきますね。
これは「彩度」が低くなっているということです。

fill(0, 80, 100, 100);
ellipse(160, -100, 100, 100);

fill(0, 40, 100, 100);
ellipse(160, -0, 100, 100);
   
fill(0,  0, 100, 100);
ellipse(160, 100, 100, 100);

上から順に彩度を 80, 40, 0 としてみました。
ここで面白いのが、色は 0 で赤色のままなんです。

同じ「赤色」でも、彩度を変えることででこんなに違う表現ができるんですね。

明るさも 0 から 100 までで、100 が最も明るく、 0 は真っ暗になります。
「明度」とも。

fill(0, 80, 100, 100);
ellipse(160, -100, 100, 100);

fill(0, 80,  50, 100);
ellipse(160, -0, 100, 100);
   
fill(0, 80,  20, 100);
ellipse(160, 100, 100, 100);

上から順に明度が 100, 50, 20 の例です。

透明度も 0 から 100 までで、0 が透明、100 は全く透けないです。
当面透明度は使わず、100 固定で行きます。

もちろん、自由に変えて遊んでも構いませんよ。

バグだけど、放っておきます！

前回、for ループの開始点にマイナスを指定したら色がおかしくなっちゃいました。

これは、fill() の色指定が

fill(j * 60, 60, 50, 100);

となっていたので、 j が -1 のときとか色が -60 とマイナスの値になっちゃったんですね。
それで赤扱いになっちゃったようです。

※ちなみに、ellipse() の円の幅と高さもマイナスになっちゃってます。

本来これはエラー、バグでありよろしくないことなのですが、出来上がった絵を見るとこの赤色がいいアクセントになってるので、私は気に入りました。

気に入ったので、バグとわかった上でこのままで行きます。
バグを放っておくと、それが元でとんでもない罠にかかったりすることもあるのですが、それもまた一興！
それが趣味のクリエイティブ・コーディング！

fill() を使って遊ぼう

さて、ellipse() を増やしてサインカーブの本数を増やしたら、なかなかいい絵が出ました。

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 * 25, -sin(i) * j * 10, j, j);
	ellipse(i * 50, -sin(i) * j * 20, j, j);
	ellipse(i * 100, -sin(i) * j * 40, j, j);
    }
}

左側に線が偏っているので、左側が明るくて右側が暗くなっていますね。
これを左から右にだんだん明るくなるようにしてみましょう。

このカーブは、一個の円を描く ellipse() を左から右に 210個並べて描いていました。
それに使っていたには i の for ループです。

今まで使っていなかったこの変数 i を使うと良さそうですね。
fill() の明度のところにこの i を入れてみましょう。

掛け算してる数値は当てずっぽうです。
あるべき姿を想定して、そこから逆算して… なんてしなくても、こういうのは動かしながら調整していけばいいんです。

fill(j * 60, 60, i * 5, 100);
ellipse(i * 25, -sin(i) * j * 10, j, j);

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

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

ほら！なんか良い感じ！

じゃあ次は彩度。
左から右に淡く、パステル調になるように、だんだん彩度を低くしてみましょう。
これも当てずっぽうで。

fill(j * 60, 100 - i * 10, i * 5, 100);
ellipse(i * 25, -sin(i) * j * 10, j, j);

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

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

微妙だけどまあ良い感じ！良い感じ！

でも、一番大きいカーブの右側が円と円の間隔が広くて、一つ一つの円が目立っちゃって、線というより点線になってますね。
間隔を詰めてみましょう。

それには？

そうです！
i の for ループの間隔の値を小さくすればいいですね。

0.03 間隔だったのを、

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

0.01 間隔にしてみましょう。

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

おお！綺麗に繋がりました。

よぉ〜し！ここまで来たら、カーブの高さも左から右に変化させてみましょう。
ついでに色の変化が薄くなりすぎな気がするから、それも調整して、

fill(j * 60, 100 - i * 5, i * 5, 100);
ellipse(i * 25, -sin(i) * j * 3 * i, j, j);

fill(j * 60, 100 - i * 5, i * 10, 100);
ellipse(i * 50, -sin(i) * j * 8 * i, j, j);

fill(j * 60, 100 - i * 5, i * 30, 100);
ellipse(i * 100, -sin(i) * j * 20 * i, 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
// sc006 趣味としてのクリエイティブ・コーディング：006：色彩を操ろう！

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 (j = -2; j < 5; j += 0.5) {
	for (i = 0; i < TWO_PI; i += 0.01) {

	    fill(j * 60, 100 - i * 5, i * 5, 100);
	    ellipse(i * 25, -sin(i) * j * 3 * i, j, j);

	    fill(j * 60, 100 - i * 5, i * 10, 100);
	    ellipse(i * 50, -sin(i) * j * 8 * i, j, j);

	    fill(j * 60, 100 - i * 5, i * 30, 100);
	    ellipse(i * 100, -sin(i) * j * 20 * i, j, j);
	    
	}
    }
}

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

本シリーズの一覧はこちらから。

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