PImageのことを少し勉強してみよう

Processingで画像処理のプログラミングをやるためには、色情報を格納するデータ型であるcolorと、画像データを格納するデータ型であるPImageについてやや詳しく知っておく必要があります。ここでは、それらについて勉強します。

color型

colorは色データを格納するためのデータ型です。例えば、


color a = color( 255, 0, 0 );
				
あるいは、

color a = #ff0000;
				
とすれば、赤色のデータを格納するaという変数が定義されます。

デフォルトでは、色はRGB値で指定することになっていますが、関数colorMode()でモードを変えるとHSB値で指定することもできます。ちなみに、Rは赤(Red)、Gは緑(Green)、Bは青(Blue)で、Hは色相(Hue)、Sは彩度(Saturation)、Bは明度(Brightness)です。

color型変数に格納されている色のデータからRGBの値を参照するためには、関数red()、green()、blue()を使います。 例えば、color型変数のaに格納されている色情報からRの値を得たいときには、


float b = red( a );
				
でそのRの値がfloat型変数bに格納されます。

PImage型

コンピュータで表示される画像データは、ピクセルと呼ばれる画像の最小要素から構成されています。下の画像を見てください。これは、横に7個、縦に5個のピクセルからなる画像です。ピクセルは単一の色を持ちます。
images/pimage_explain1.png
この画像はPImage型を説明するために作成した画像なので、ピクセルの数が非常に少ないです。例えばつぎの画像は、横に320個、縦に240個のピクセルで構成されています。
images/im33.jpg

ProcessingのPImage型は、このような画像データを取り扱うためのデータ型です。

loadImage()

PImage型の変数で画像データを取り扱うためには、まずはじめに関数loadImage()で画像データをロードする必要があります。 例えば、PImage型の変数srcで画像データ"hoge.jpg"を取り扱いたいときには、

PImage src;

src = loadImage("hoge.jpg");
					
として、画像データをロードします。

PImage型は3つのフィールド変数(width、height、pixels[])を持っています。

widthとheight

widthとheightには、PImage型変数にロードされた画像の横幅と縦幅(ピクセル数)が格納されています。例えば、PImage型変数のimgにロードされた画像の横幅は、img.widthで参照できます。

pixels[]

pixels[]は、PImage型変数にロードされた画像の各ピクセルの色情報を格納している配列です。配列に格納される順番は、つぎの図に示しているように左上から横方向に進み、右端まで来ると一段下がって左端に戻ります。配列のインデックスは0から始まることに注意してください。
images/pimage_explain1.png
したがって、PImage型変数のimgにロードされた画像の、y行x列目(yとxも0から始まる)のピクセルの色情報は、配列pixels[]の ( x + img.width * y ) 番目の要素に格納されています。例えば上の図で、3行2列目のピクセルの色情報は、2 + 7 * 3 = 23 なので、pixels[23]に格納されています。

例題

つぎのプログラムを実行するとどのような結果が得られるか考えてみましょう。PImage型の変数srcには、既に画像データがロードされているものとします。

for ( int idx = 0; idx < src.width * src.height; idx++ ) {
  color src_c = src.pixels[idx];
  src.pixels[idx] = color( green( src_c ), blue( src_c ), red( src_c ) );
}
			

Referenceへのリンク


back to "Processing Tutorial"