カラーモード : colorMode

Processing における色の表現方法

色を指定する方法(カラーモード)には次の４つがあります。

グレースケールモード
　１つの数値を使い、黒から白までの明るさを、256段階の間で指定するモードです。
　0で真っ黒、255で真っ白となります。

RGBモード
　R(赤)、G(緑)、B(青)の３つの数値で色を指定するモードです。
　R, G, Bの値が全て同じ数値である場合は色の無いグレースケールの色となり、
　これはグレースケールモードでその数値で指定した場合と同じ色になります。

HSBモード
　H(色相)、S(彩度)、B(輝度)の３つの数値で色を指定するモードです。
　H(Hue)は赤・青・緑のような色味の違い、S(Saturation)は色の鮮やかさ、B(Brightness)は色の明るさです。

16進数カラーコードモード
　#で始まる6桁の数字でRGB色を指定します。HTML/CSSでよく使われる色指定方法です。
　2桁ごとにR,G,Bの値を指定し、例えば #ff0000 は赤色、#00ff00は緑色になります。

カラーモードは colorMode 関数を使って切り替えます。
カラーモードはデフォルトではRGBに指定されているので、RGBモードで色指定を行なう場合は colorMode 関数を使う必要はありません。

サンプル

コード

int x1 = 180;
int x2 = 500;

void setup(){
  size( 850, 400 );
  textFont( createFont( "Georgia", 18 ) );
}
 
void draw(){
  background( 255 );
  
  // 縦線を255本、横に並べることでグラデーションを作ります
  for (int i = 0; i < 255; i++) {
    stroke( i ); // 引数が１つだとグレースケール値として指定される
    line( x1 + i, 25 , x1 + i, 125 );
    
    colorMode( RGB ); // カラーモードをRGBに変更
    stroke( i, 0, 0 ); // Rの値でグラデーションを作る
    line( x1 + i, 150 , x1 + i, 250 );
    stroke( 0, i, 128 ); // Gの値でグラデーションを作る
    line( x2 + i, 150 , x2 + i, 250 );
    
    colorMode( HSB ); // カラーモードをHSBに変更
    stroke( i, 255, 255 ); // Hの値でグラデーションを作る
    line( x1 + i, 275 , x1 + i, 375 );
    stroke( 0, i, 255 ); // Sの値でグラデーションを作る
    line( x2 + i, 275 , x2 + i, 375 );
  }
  
  fill( 0 ); // 文字色を黒に(引数が１つなのでグレースケール値として指定される)
  text( "Grayscale" , 60, 75 );
  text( "RGB" , 80, 205 );
  text( "HSB" , 80, 330 );
}

色の数値の範囲を変更する

グレースケール値やRGB値、またHSB値は、デフォルトでは 0 から 255 の範囲の値になっています。
つまり、グレースケール値であれば 0 で最も黒く、255 で最も明るく(白く)なります。

この値の範囲は、変更することができます。colorMode 関数の引数に、各値の最大値を与えます。

colorMode( HSB, 360, 100, 100 );
　Hは 0 から 359 までの360段階で、H, Bは 0 から 99 までの100段階で指定されるようになります。

colorMode( HSB, 100 );
　H,S,Bの値はどれも 0 から 99 までの100段階で指定されるようになります。

サンプル

コード

void setup(){
  size( 600, 400 );
  noStroke();
}
 
void draw(){
  colorMode( RGB, 255 ); // RGBモードで、R,G,Bどの値も255を最大値に(デフォルト設定と同じ)
  background( 255 );
  
  colorMode( HSB, 360, 100, 100 ); // Hを360、SBは100を最大値に
  fill( 0, 100, 100 );
  ellipse( 100, 200, 100, 100 );
  
  colorMode( RGB, 100 ); // RGBモードで、R,G,Bどの値も100を最大値に
  fill( 0, 100, 0 );
  ellipse( 300, 200 , 100, 100 );
  
  colorMode( RGB, 255 ); // RGBモードで、R,G,Bどの値も255を最大値に
  fill( 0, 100, 0 );
  ellipse( 500, 200 , 100, 100 );
}

15行目と19行目はどちらも fill( 0, 100, 0 )と、同じ引数の値で色を指定しています。ですが、描かれる円の色は異なっています。