[ 前へ | 目次 | 次へ ]
Japanese English

ピクセル制御描画

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

スポンサーリンク


ピクセル制御描画

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

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

ピクセルデータ

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

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

具体的な例を挙げると:

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

ピクセルデータの操作

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

- 関数の形式 -
void setPixel (
  int rendererID,
  int red[ ][ ], int green[ ][ ], int blue[ ][ ], int alpha[ ][ ]
)

引数は以下の通りです:

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

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

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

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

- 関数の形式 -
void setPixel ( int rendererID, int color[ ][ ][ ] )

引数は以下の通りです:

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

ピクセルデータの取得

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

- 関数仕様 -
int[ ][ ] getPixelRed ( int rendererID )
int[ ][ ] getPixelGreen ( int rendererID )
int[ ][ ] getPixelBlue ( int rendererID )
int[ ][ ] getPixelAlpha ( int rendererID )

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

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

※ なお、既存の画像ファイルの内容からピクセルデータを取得するには、上記のような2Dレンダラーの関数ではなく、Graphics ライブラリの関数を用いて、グラフィックスリソースから直接取得した方が便利です。

例えば、newGraphics(string filePath) 関数でファイルから読み込んだグラフィックスリソースに対して、下記の関数:

int[][] getGraphicsPixelRed(int graphicsID)

で赤色成分のピクセルデータを取得できます。他の色成分についても同様です。

詳細は、Graphics ライブラリの仕様書 をご参照ください。

プログラム例

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


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 );
Sample.vcssl

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

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



スポンサーリンク



Japanese English
この階層の目次
RINEARN からのお知らせ
※ VCSSL は RINEARN が開発しています。

各ソフトやVCSSLの英語版ドキュメント整備がほぼ完了
2025-06-30 - RINEARNでは2年前から、AIの補助による英語版ドキュメントの大幅拡充計画を進めてきました。今回、主要ドキュメント&コンテンツの英訳がほぼ完了し、一応の目標水準に達しました。詳細をお知らせします。

VCSSLの最新版をリリース: 外部プログラムとの連携機能を少し強化、他
2025-05-25 - VCSSL 3.4.52をリリースしました。外部プログラム(C言語製の実行ファイル等)との連携機能を少し強化し、文字化け対策やOS判別などを可能にしました。他にも細かい機能追加があります。詳細をお知らせします。

VCSSLの最新版をリリース、Java 24上での非互換な挙動を対処
2025-04-22 - VCSSL 3.4.50をリリースしました。Java 24環境上でのネットワークドライブ関連のファイルパス解決で、従来環境とは異なる挙動が生じていたのを解消しました。詳細をお知らせします。

リニアングラフやVCSSLの最新版をリリース、目盛りの位置や内容を自由に指定可能に!
2024-11-24 - リニアングラフ3D/2Dを更新し、自由な位置に、自由な表記内容の目盛りを描けるようになりました! 併せて、Java言語やVCSSLでの、プログラム制御用APIも拡張しています。詳細をお知らせします。

Exevalator 2.2 をリリース、TypeScript 対応によりWebブラウザ上で動作可能に
2024-10-22 - オープンソースの式計算ライブラリ「Exevalator(エグゼバレータ)」の2.1をリリースしました。新たに TypeScript に対応し、Webブラウザ上での式計算にも使えるようになりました。詳細を解説します。

アシスタントAI作成の舞台裏(その2、作成編)
2024-10-12 - アシスタントAIの作成方法解説の後編です。実際にChatGPTの「GPTs」機能を用いて、アシスタントAIを作成する手順や、独自の知識をもたせたり、精度を出すためのノウハウなどを解説しています。

アシスタントAI作成の舞台裏(その1、基礎知識編)
2024-10-07 - アシスタントAI作成方法解説の前編です。今回はまず、アシスタントAIを作る前に抑えておきたい、基礎知識を延々と解説しています。そもそもLLM型AIとはどんな存在か? RAGとは何か? 等々です。

ソフトの利用をサポートしてくれるアシスタントAIを提供開始!
2024-09-20 - RINEARN製ソフトの使い方の質問応答や、一部作業のお手伝いをしてくれる、アシスタントAIを提供開始しました。ChatGPTアカウントさえあれば、誰でも無料で使用できます。使い方を解説します。

Exevalator 2.1 をリリース、新たに Visual Basic に対応
2024-07-28 - オープンソースの式計算ライブラリ「Exevalator(エグゼバレータ)」の2.1をリリースしました。今回から、新たに Visual Basic(VB.NET)でも使用できるようになりました。詳細を解説します。

関数電卓 RINPn(りんぷん)、Esc キーで計算式の一発クリアが可能に
2024-07-20 - 関数電 RINPn の Ver.1.0.2 をリリースしました。今回から、キーボードの「 Esc 」キーを押すと、入力中の計算式を一発でクリアできるようになりました。詳細を解説します。