色の表現

Chapter3ではProcessingにおける色の表現について詳しく解説していきます。

RGBカラーモード

今まではbackground()やfill()、stroke()に1つのパラメータを与えることで黒~白の色を表現していました。background()、fill()、stroke()にはパラメータを最大で4つまで与えることができます。パラメータを2つ与える場合と4つ与える場合は後回しにして、3つ与える場合を解説していきます。 とりあえず次のサンプルを見てください。

Chapter3/sketch01.pde

size(750, 350);
background(255);

noStroke();
// 赤色の円
fill(255, 0, 0);
ellipse(125, 175, 150, 150);
// 緑色の円
fill(0, 255, 0);
ellipse(375, 175, 150, 150);
// 青色の円
fill(0, 0, 255);
ellipse(625, 175, 150, 150);

fill()のパラメータを(255, 0, 0)にすると赤色に、(0, 255, 0)にすると緑色に、(0, 0, 255)にすると青色になります。つまり、1つ目のパラメータが赤色成分の強さ、2つ目のパラメータが緑色成分の強さ、3つ目のパラメータが青色成分の強さを表しているわけです。いわゆる3原色ってやつです。この3原色の各成分の強さで色を表現するモードをRGB(Red Green Blue)カラーモードと呼びます。カラーモードにはもう一つHSBカラーモードというのがありますが、詳しくはあとで解説します。

3原色とは色を表現するときに最低限必要な色のことで、赤緑青の3色があれば混ぜかたによってどんな色も表現できます。ちなみにRGBの各成分は0~255の256通りあるので、合計で256×256×256 = 16777216種類の色を表現できます。

3つのパラメータに同じ値を指定することでパラメータを3つ与える方法でも黒~白を表現できます。(0, 0, 0)を指定すると黒色に、(128, 128, 128)を指定すると灰色に、(255, 255, 255)を指定すると白色になります。赤緑青を混ぜると白になるというのは不思議な感じがしますが、現実世界でもこのようになっていて、現実世界の白色の光は全ての色成分を含んでいます。例えば赤色(255, 0, 0)のソファーがあったとして、そのソファーが赤色なのは、白色(255, 255, 255)の光から水色(0, 255, 255)の光を吸収して、赤色(255, 0, 0)だけを反射しているから赤色なんです。同様に、緑色の葉っぱは、自ら緑色に発光しているわけではなく、白色の光から緑色以外の色を吸収して、緑色だけを反射しているから緑色なんです。

透明度

後回しにしていたbackground()、fill()、stroke()にパラメータを2つ与える場合と4つ与える場合について解説します。色には透明度を指定することができて、パラメータを2つ与える場合は2つ目が透明度、4つ与える場合は4つ目が透明度になります。透明度も0~255で表現して、0が完全に透明、255が完全に不透明を表します。

Chapter3/sketch02.pde

size(750, 350);
background(255);

// 横線
strokeWeight(3);
stroke(0);
line(0, 100, 750, 100);
line(0, 250, 750, 250);

rectMode(CENTER);
noStroke();

// 白黒の透明度を5段階で比較
fill(0, 51);
rect(75, 100, 150, 140);
fill(0, 102);
rect(225, 100, 150, 140);
fill(0, 153);
rect(375, 100, 150, 140);
fill(0, 204);
rect(525, 100, 150, 140);
fill(0, 255);
rect(675, 100, 150, 140);

// 水色の透明度を5段階で比較
fill(0, 180, 180, 51);
ellipse(75, 250, 150, 150);
fill(0, 180, 180, 102);
ellipse(225, 250, 150, 150);
fill(0, 180, 180, 153);
ellipse(375, 250, 150, 150);
fill(0, 180, 180, 204);
ellipse(525, 250, 150, 150);
fill(0, 180, 180, 255);
ellipse(675, 250, 150, 150);

HSBカラーモード

カラーモードにはRGBカラーモードのほかにもう一つHSBカラーモードがあります。RGBカラーモードはあまり人間的な色の指定方法ではありません。例えば、「茶色に近い暗めなオレンジ色」を作りたい場合、すぐに0~255の3つの数値の組み合わせを思いつく人は少ないでしょう。HSBカラーモードを使うとより人間らしい考え方で色を表現できるようになります。HSBのHはhue(色調)、Sはsaturation(彩度)、Bはbrightness(明度)です。HSBカラーモードでの色の指定方法を円筒の形で視覚化したのが次の画像です。

HSBでは、まずどの色を使うか(Hue)を選択して、その色の彩度(Saturation)と明度(Brightness)を決めます。

カラーモードの変更はcolorMode()で行います。カラーモードには以下の4つの指定方法があります。MODEにはRGBまたはHSBを指定します。

colorMode(MODE)
カラーモードを変更する。RGB値、またはHSB値および透明度は最大で255になる
colorMode(MODE, max)
カラーモードを変更する。RGB値、またはHSB値および透明度は最大でmaxになる
colorMode(MODE, max1, max2, max3)
カラーモードを変更する。RGB値、またはHSB値は最大でmax1、max2、max3に、透明度は最大で255になる。
colorMode(MODE, max1, max2, max3, maxA)
カラーモードを変更する。RGB値、またはHSB値は最大でmax1、max2、max3に、透明度は最大でmaxAになる。

HSBカラーモードに変更する場合は

colorMode(HSB, 360, 100, 100, 100);

とすることをオススメします。上の画像にもあるように、Hueは円状になっているのでHueの最大値を360としておくことでこの円と対応ができます。また、彩度、明度、透明度の最大値を100にしておくことで、それぞれをパーセントで指定することと同じになって考えやすいです。次のサンプルでは透明度を省略しています。その場合は透明度100(完全に不透明)になります。

Chapter3/sketch03.pde

size(750, 350);
background(255); // ここではまだRGBモード
// HSBモードに変更
colorMode(HSB, 360, 100, 100, 100);
noStroke();

// Hueを5段階で変更
fill(0, 100, 100);
rect(0, 0, 150, 100);
fill(72, 100, 100);
rect(150, 0, 150, 100);
fill(144, 100, 100);
rect(300, 0, 150, 100);
fill(216, 100, 100);
rect(450, 0, 150, 100);
fill(288, 100, 100);
rect(600, 0, 150, 100);

// Saturationを5段階で変更
fill(200, 20, 100);
rect(0, 125, 150, 100);
fill(200, 40, 100);
rect(150, 125, 150, 100);
fill(200, 60, 100);
rect(300, 125, 150, 100);
fill(200, 80, 100);
rect(450, 125, 150, 100);
fill(200, 100, 100);
rect(600, 125, 150, 100);

// Brightnessを5段階で変更
fill(150, 100, 20);
rect(0, 250, 150, 100);
fill(150, 100, 40);
rect(150, 250, 150, 100);
fill(150, 100, 60);
rect(300, 250, 150, 100);
fill(150, 100, 80);
rect(450, 250, 150, 100);
fill(150, 100, 100);
rect(600, 250, 150, 100);

Color Selector

PDEに標準で備わっているColor Selectorを紹介します。[ツール]→[色選択]を選ぶと次のような画面が出てきます。

縦長の長方形から色相を選択したあと、大きな正方形内をドラッグして好きな色を選びます。色を選んだら、右下のコピーをクリックすると選んだ色の16進数表現の値をコピーできます。Webサイト制作の経験がある人なら色の16進数表現に慣れているかもしれません。慣れていなくて16進数表現がわかりにくいなら、Color Selectorに表示されているRGB値もしくはHSB値をそのまま使えばいいかと思います。

ちなみに、Color Selectorの色相を選べる縦長の長方形領域はHSBのHue(色相)を表していて、一番下が0度、一番上が360度になっています。左の正方形領域はHSBを円筒で表現したときの、その色の断面を表しています。正方形領域では、右に行くほどSaturation(彩度)が高く、上に行くほどBrightness(明度)が高くなります。

Chapter3/sketch04.pde

size(750, 350);
background(#A0A5A4);

stroke(#2A7968);
strokeWeight(4);
fill(#2D80A5);
ellipse(375, 175, 150, 150);

お疲れさまでした。Chapter3はこれで終了です。