Code Life

iyamaです。

今日はopenFrameworksで画像を扱ってみたいと思います。

　

画像ファイルを読み込んで表示させるのと、
その画像ファイルを画像データとしていじってみましょう。

■環境
Mac OS X 10.7
Xcode 4.2.1
openFrameworks v007 osx

■testApp.h
public: の中に以下を追加

ofImage myImage;

■testApp.cpp
今回はsetup()とdraw()に処理を追加。
以下、testApp.cppの一部抜粋。

//--------------------------------------------------------------
void testApp::setup(){
    ofBackground(0, 0, 0);
    ofEnableSmoothing();
    
    glEnable(GL_BLEND);
    glBlendFunc(GL_SRC_ALPHA, GL_ONE);
    
    myImage.loadImage("test.jpg");
}

//--------------------------------------------------------------
void testApp::draw(){
    ofSetColor(255, 255, 255);
    myImage.draw(20, 29);
    unsigned char * pixels = myImage.getPixels();
    int w = myImage.width;
    int h = myImage.height;
    
    for (int i = 0; i < w; i+=8) {
        for (int j = 0; j < h; j+=8) {
            int valueR = pixels[j * 3 * w + i * 3];
            int valueG = pixels[j * 3 * w + i * 3 + 1];
            int valueB = pixels[j * 3 * w + i * 3 + 2];
            
            ofSetColor(255, 0, 0, 63);
            ofCircle(600 + i, 20 + j, 10 * valueR / 255.0);
            
            ofSetColor(0, 255, 0, 63);
            ofCircle(600 + i, 20 + j, 10 * valueG / 255.0);
            
            ofSetColor(0, 0, 255, 63);
            ofCircle(600 + i, 20 + j, 10 * valueB / 255.0);
        }
    }

}

■解説
setup()は初回実行時に一度だけ呼び出される関数？エリアです。
初期化処理を記述しましょう。
今回は画面の基本設定と画像の読み込みを行っています。
ofBackground…の部分は画面上の基本設定。
glEnable…部分は画面の色取り扱い設定で、加法混色にします。
myImage…で画像を読み込み。
myImageはFlashで言うところのMovieClipというイメージでしょうか。
loadImageで画像の置いてあるパスを指定し、呼び出します。
ファイルの呼び出しパスは[プロジェクトディレクトリ]/bin/data内がルートになっています。
　

次にdraw()、画面上の描画についてです。
ofSetColorで色の指定をしてからmyImage.drawで表示。
色の指定とはRGBのすべてのチャンネルを表示に設定したと考えてください。
この場合、元の画像のまま表示されます。
　

次にpixelsに画像のビットマップ情報を配列で取得します。
その後のforのループでは画像データを8px間隔で処理を施しています。
valueR、valueG、valueBはそれぞれRGBの値を取得しています。
RGBごとに円を描画して画像データを操作しています。
ofSetColorの4つ目の値は透明度(Alpha)を設定します。
　

■実行結果
実際にコンパイルしてみると、以下のように表示されます。

なんだか思ったより簡単に画像いじったりできますね。