サンプルプログラム解説

グラフィックスの世界 第6回
サイバーメディアセンター
サイバーコミュニティ研究部門 安福 健祐
サンプルプログラムの解説
 カラー画像をグレイスケール画像に変換するプログラム
 画像をぼやかすプログラム
グレースケール
元画像
グレースケール画像
グレースケール生成の仕組み
 RGBデータのRGBそれぞれの値が同じ場合グレースケールとなる
 画像の各ピクセルのデータをグレースケールに書き変える
R:207
G:176
B:173
207
185
176
185
R:185
G:185
B:185
グレー
スケール化
ピクセル
抽出
173
185
RGBに
分解
平均可
プログラム（setup）
PImage img;
// 画像読み込み用の変数宣言
void setup()
{
img = loadImage(“sample.jpg”);
// sample.jpgという名前の画像ファイル読み込み
}
size(img.width*2, img.height);
// ウィンドウのサイズ（横：画像ファイルの2倍）
noLoop();
// draw()は1回だけ
プログラム(draw)
void draw()
{
PImage grayImg = createImage( img.width, img.height, RGB );
img.loadPixels();
for ( int y = 0; y < img.height; y++) {
for ( int x = 0; x < img.width; x++) {
int i = x + y*img.width;
color c = img.pixels[i];
float gray = ( red(c) + green(c) + blue(c) )/3.0;
grayImg.pixels[i] = color(gray);
}
}
grayImg.updatePixels();
}
// グレースケール変換後の画像用
// ピクセル操作可能にする
// ピクセル参照用インデックス
// 1ピクセルのカラー情報
// RGBの平均
// グレースケール画像生成
// グレースケール画像データ更新
image(img, 0, 0);
// 元の画像表示
image(grayImg, img.width, 0);
// グレースケール画像表示
ブラー（ぼやかし）画像
元画像
ブラー画像
ブラー画像生成の仕組み
 隣り合うピクセルの平均値をとる
元画像
拡大
ブラー画像生成の仕組み
 一つのピクセルは周囲5×5のピクセルの平均値
元画像
周囲5×5のピクセルの
色を調べて平均値をとる
ブラー画像生成の仕組み
 全ピクセルに対して同様の処理を行う
– 画面端のピクセルなど例外もある
元画像
各ピクセルで同じ処理
ブラー画像
プログラム(draw)
void draw()
{
PImage blurImg = createImage( img.width, img.height, RGB );
img.loadPixels();
// ピクセル操作を可能にする
for ( int y = 0; y < img.height; y++) {
for ( int x = 0; x < img.width; x++) {
int i = x + y*img.width;
// ピクセル参照用インデックス
・・・・
blurImg.pixels[i] = color(r,g,b);
}
}
blurImg.updatePixels();
image(img, 0, 0);
image(blurImg, img.width, 0);
}
// ブラー画像用
プログラム(draw)
color c;
float r = 0.0, g=0.0, b=0.0;
int n = 0;
void draw()
{
PImage blurImg = createImage( img.width, img.height, RGB );
img.loadPixels();
for ( int y = 0; y < img.height; y++) {
for ( int x = 0; x < img.width; x++) {
int i = x + y*img.width;
・・・・
blurImg.pixels[i] = color(r,g,b);
}
}
blurImg.updatePixels();
image(img, 0, 0);
image(blurImg, img.width, 0);
}
// ブラー画像用
for( int dy = -2; dy <=2;
dy++ ) {
// ピクセル操作を可能にする
for( int dx = -2; dx <=2; dx++ ) {
// 端以外は周囲のピクセルの色の平均値をとる
if( 0 <= (x+dx) && (x+dx) < img.width &&
// ピクセル参照用インデックス
0 <= (y+dy) && (y+dy)
< img.height ) {
int j = (x+dx) + (y+dy)*img.width; // 周囲のピクセル参照用
c = img.pixels[j];
r += red(c);
// RGB別に加算
g += green(c); // RGB別に加算
b += blue(c); // RGB別に加算
n++;
// 加算した数を覚えておく（端は少ない）
}
}
}
r/=(float)n;
// RGB別に平均値を出す
g/=(float)n;
// RGB別に平均値を出す
b/=(float)n;
// RGB別に平均値を出す