ピクセル制御描画

この章では、最も直接的な描画方法である、ピクセル制御描画について扱います。

スポンサーリンク

ピクセル制御描画

ピクセル制御描画の仕組み

これまで扱ってきた直接描画やスプライト描画は、レンダラーに用意されたペイントツール的な機能を用いて、 図形などを描き込んでいく方式でした。それに対してピクセル制御描画は、 そのような高度な機能は使用せず、グラフィックスデータの保持するピクセル情報を直接的に操作する事により、描画を行う方式です。

ピクセルデータ

ピクセルデータとは、画像上の全てのピクセルにおける色情報を表すデータです。各ピクセルの色情報には、赤（Red）、緑（Green）、青（Blue）、不透明度（Alpha）の4つの成分の値があります。

VCSSL では、ピクセルデータは各色成分ごとに独立に、それぞれ [ 高さ ] × [ 幅 ] の2 次元配列として扱います。 配列のインデックスは[ 縦方向の位置 ][ 横方向の位置 ]となり、 縦方向は上から、横方向は左から数えます。配列の型は int 型で、 そのピクセルにおける色の強度を 0 〜 255 の範囲で保持します。

具体的な例を挙げると：

• blue[ 0 ][ 0 ]は、画像の左上端のピクセルにおける青色の強度を表します。
• blue[ 10 ][ 100 ]は、グラフィックスデータの上から10個目、 左から100個目のピクセルにおける、青色の強度を表します。

ピクセルデータの操作

任意のピクセルデータの内容を操作するには、レンダラーの setPixel 関数を使用します。

引数は以下の通りです：

• rendererID: レンダラーのIDを指定します。
• red, green, blue, alpha: 各色成分のピクセルデータを指定します。

ピクセルデータ配列のインデックスは[ 縦方向の位置 ][ 横方向の位置 ]でピクセル位置を指定し、 値はその位置のピクセルにおける色強度（0〜255）を表します。

この関数をコールすると、受け取ったピクセルデータの内容に基づいて、 レンダラーがグラフィックスデータの内容更新を行います。

なお、以下のように、一つの配列で全色成分をまとめて指定する事もできます。

引数は以下の通りです：

• rendererID: レンダラーのIDを指定します。
• color: 各ピクセルの色情報を格納して渡します。配列のインデックスは[ 縦方向の位置 ][ 横方向の位置 ][ 色成分の番号 ] で、 色成分の番号は 赤=0, 緑=1, 青=2, 不透明度（Alpha）=3 です。

ピクセルデータの取得

現在レンダラーが保持しているグラフィックスデータの内容から、 各色成分のピクセルデータを取得するには、色に応じて以下の 4 つの関数を使用します。

引数 rendererID には、レンダラーのID を指定します。

これらの関数は上から順に、 それぞれ赤（Red）、緑（Green）、青（Blue）、不透明度（Alpha）成分のピクセルデータを、 int 型の2 次元配列で返します。配列のインデックスは[ 縦方向の位置 ][ 横方向の位置 ]となり、縦方向は上から、横方向は左から数えます。

プログラム例

実際に簡単な模様のピクセルデータを作成し、描画を行って見ましょう。 以下のように記述し、実行してみてください。

import Graphics;
import Graphics2D;
import GUI;


// グラフィックスデータとレンダラーの生成
int graphicsID = newGraphics( );
int rendererID = newGraphics2DRenderer( 800, 500, graphicsID );

// 表示画面の生成
int windowID = newWindow( 0, 0, 800, 500, "Hello 2DCG !" );
int labelID = newImageLabel( 0, 0, 800, 500, graphicsID );
mountComponent( labelID, windowID );

// ピクセルデータを作成
int red[ 500 ][ 800 ];
int green[ 500 ][ 800 ];
int blue[ 500 ][ 800 ];
int alpha[ 500 ][ 800 ];


// 各ピクセルの色を設定していく
for( int i=0; i<500; i++ ){
	for( int j=0; j<800; j++ ){

		// 赤色成分: 縦位置が500未満、横位置が300未満の領域のみ塗る
		if( j < 500 && i < 300 ){
			red[ i ][ j ] = 255;
		} else {
			red[ i ][ j ] = 0;
		}

		// 緑色成分: 縦位置が200超〜600未満、横位置が100超〜400未満の領域のみ塗る
		if( 200 < j && j < 600 && 100 < i && i < 400 ){
			green[ i ][ j ] = 255;
		} else {
			green[ i ][ j ] = 0;
		}

		// 青色成分: 縦位置が300超、横位置が200超の領域のみ塗る
		if( 300 < j && 200 < i ){
			blue[ i ][ j ] = 255;
		} else {
			blue[ i ][ j ] = 0;
		}

		// 不透明度（Alpha）は常に完全な不透明にする
		alpha[ i ][ j ] = 255;
	}
}

// ピクセルデータの内容を描画
setPixel( rendererID, red, green, blue, alpha );

// GUI の描画
paintComponent( labelID );
paintComponent( windowID );

このプログラムを実行すると、白いウィンドウが表示され、その上にカラフルな長方形が重なって表示されます。

実行結果

カラフルな長方形が重なって表示されます。