カラフルな作品作りは難しい？簡単便利な色指定方法 HSB のススメ : Processing Tips

deconbatch

2018年4月15日 21:03

私は Processing での作品作り、最初のころは白黒だけで作っていました。

その後だんだん慣れて灰色の濃淡を付けられるようになりましたが、カラフルな作品を作るのは難しいと感じて、なかなか手を出せずにいました。

そんな時に出会ったのが HSB。

『彼（HSB）と出会って私の日常は一変したの…』

このノートは、私と HSB の出会いの物語です。

Processing 標準の色指定方法

Processing では 2種類の色指定方法（カラーモード）があります。

一つは今回お話しする HSB、もう一つは RGB で colorMode() を使って指定します。
colorMode() を書かなければ RGB の指定となります。

RGB とは、皆さんご存知「光の三原色」赤（Red)、緑（Green）、青（Blue）の頭文字をとったもので、デフォルトではそれぞれの色を 0-255 の範囲の数値で表し、

 // 真っ赤
fill(255,   0,   0);
ellipse(120, 160, 80, 80);

// 黄色
fill(255, 255,   0);
ellipse(220, 160, 80, 80);

// 水色っぽい青
fill( 51, 204, 255);
ellipse(320, 160, 80, 80);

// 灰色
fill(128, 128, 128);
ellipse(420, 160, 80, 80);

// 真っ白
fill(255, 255, 255);
ellipse(520, 160, 80, 80);

という具合に、それぞれの三原色をどれぐらい混ぜるかで色を表現します。

赤と緑を混ぜれば黄色、赤と青なら紫、緑と青なら水色になります。全部混ぜると白ですね。
パソコンの液晶画面もこの RGB で色を表現しています。

赤・緑、青を 0-255 の数値で表す方式は、HTML/CSS での色指定でも使われるのでおなじみの方も多いでしょう。
こちらでは赤・緑・青をそれぞれ 2桁の 16進数 00-FF（10進数で 0-255）で表し、頭に # を付けて、

#FF0000 真っ赤
#FFFF00 黄色
#33CCFF 水色っぽい青
#808080 灰色
#FFFFFF 真っ白

という感じで表します。
（省略形で #33CCFF を #3CF と表す場合もあり）

RGBは使いづらくない？

と、こんな感じなので、慣れた人なら #FC83B5 とか見るとなんとなくどんな色か想像が付くのですが、

（こんな色です）

慣れてないとちょっと大変。

さらに、同じぐらいの明るさで色だけ様々な違う色を使いたいとか、この色でもうちょっと鮮やかな感じが欲しいとか、この色のまま明るさだけ変化させたいなんてなると、ちょっと扱いづらいのです。

そんなこともあって、「Processing で色を使うのは難しいなぁ」と思っていました。

HSB にするとこんな利点が！

そんなときにマニュアルを眺めてて目に入ったのが colorMode()、

そしてそこに記載されていた

colorMode(HSB, 360, 100, 100);

当時 HSB なんてまるでなんにも知らなかった私は期待もせずに少しだけ調べてみました。
そして目にしたのがこれ。

そして結びついた 360 という数値！

ビビビっと来ました！

　・角度＝色！
　・0°=360°！
　・360°周期でずっと同じ色が出てくる！

これ、何だか使えそう！俄然興味が湧いた私はさらに調べました。

HSB の H は色（Hue：色相）、S は色の鮮やかさ（Saturation：彩度）、B は明るさ（Brightness：明度）をそれぞれ表し、colorMode(HSB, 360, 100, 100); の場合、
H は 0-360 で、0 が赤、 120 が緑、 240 が青。
S は 0-100 で、0 が色なし、100 がめっちゃ鮮やか。
B は 0-100 で、0 が真っ暗、100 がめっちゃ明るい。
となります。

ということは、先程 RGB だと難しいと感じていたことが、こんな感じで実現できます。

同じぐらいの明るさで色だけ様々な違う色を使いたい

これは Saturation：彩度と Brightness：明度を固定して Hue：色相だけ変化させれば良さそう。

  for (int i = 0; i < 240; i += 10) {
   fill(
        i,   // Hue
        60,  // Saturation
        80   // Brightness
        );
   pushMatrix();
   translate(i * 2, i);
   rect(0, 0, 25, 50); 
   popMatrix();
 }

この色でもうちょっと鮮やかな感じが欲しい

これは Saturation：彩度だけ値を大きくすればいい。

  for (int i = 0; i < 240; i += 30) {
   fill(
        26,                       // Hue
        map(i, 0, 240, 20, 100),  // Saturation
        85                        // Brightness
        );
   pushMatrix();
   translate(i * 2, sin(radians(i)) * 50);
   ellipse(0, 0, 60, 60); 
   popMatrix();
 }

この色のまま明るさだけ変化させたい

これは Brightness：明度だけ変化させればいい

  for (int i = 0; i < 360; i += 20) {
   fill(
        320,                      // Hue
        80,                       // Saturation
        sin(abs(radians(i))) * 70 // Brightness
        );
   ellipse(0, 0, 160, 160); 
 }

簡単！いや超簡単でしょう！？
これは惚れるっ！惚れざるを得ない！

でもこんな問題点も…

こんな素晴らしい HSB さんですが、やはり長く付き合っていると欠点も見えてくるものです。
私が感じているのは、

・なんだか黄色と緑だけやたら目立つ気がする。
・緑の色の範囲が広い？緑色をメインに作品を作ると、色の変化がよくわからずのぺっとした感じになる。

という点です。

さらに、下の図を見ると、明度は同じはずなのに藍色と黄色ではどう見ても明るさが違うように感じませんか？

とまあ、そんなところもあるのですが、欠点ばかり気にしていてはお付き合いは長続きしません。
そういう欠点もあるけれど、「色の操作が断然簡単」という利点はとっても魅力的！

色を使うの難しいなぁ、なかなかキレイな色を出せないなぁというあなた！ぜひ HSB を使ってみてください。
作品作りがさらに楽しくなりますよ！

作例

『三原色の夢』です。
ソースコードはこちらで。

参考

今回、下記のサイトを参考にさせていただきました。

HSB の欠点の解決に CIELAB を使うというアプローチをされた FAL さん。とても興味深いです。

綺麗に見える色の組み合わせについてはこういう記事を書いてみました。
よろしければどうぞ。

いいなと思ったら応援しよう！

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