openFrameworks iOSで画像を表示、グレースケール化、反転させてみた

チュートリアル記事

Qiitaに良い記事があったので、参考にしました。
openFrameworks for iOS の日本語チュートリアル記事まとめ - Qiita

その中に画像を表示させるものがあったのでやってみることにしました。
yoppa org – openFrameworks for iPhone：画像ファイルを読み込む、アニメーションを作成する

画像を1枚表示させる

testApp.h

//ofImageクラスのインスタンスを生成
ofImage myImage;

ヘッダファイルにインスタンスを作ります。

testApp.mm

void testApp::setup(){
	//register touch events
	ofRegisterTouchEvents(this);

	// initialize the accelerometer
	ofxAccelerometer.setup();

	//iPhoneAlerts will be sent to this.
	ofxiPhoneAlerts.addListener(this);

	//If you want a landscape oreintation 
	//iPhoneSetOrientation(OFXIPHONE_ORIENTATION_LANDSCAPE_RIGHT);
	ofBackground(255,255,255);

	//画像ファイル読み込み
	myImage.loadImage("cat.png");
}

setup()で画像を読み込んでおきます。

void testApp::draw(){
    //画像を(0,0)から画面いっぱいに描画
    myImage.draw(0, 0, 320, 480);
}

描画位置、大きさを指定して描画します。

こちらの非公式日本語ドキュメントを参考にしました。
OpenFrameworks doc 日本語訳

白黒画像を表示させる

testApp.h

//画面の大きさ
int SCREEN_WIDTH = 320;
int SCREEN_HEIGHT = 480;

//ofImageクラスのインスタンスを生成
ofImage myImage;
ofImage myCopyImage;

画面の大きさを定数で宣言しておきます。あとあと描画する位置、大きさを指定するのが楽になります。

testApp.mm

void testApp::draw(){
    //画像を(0,0)から描画
    myImage.draw(0, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);
    //画像をクローン
    myCopyImage.clone(myImage);
    //クローンをグレースケール化
    myCopyImage.setImageType(OF_IMAGE_GRAYSCALE);
    //クローン画像を描画
    myCopyImage.draw(SCREEN_WIDTH / 2, 0, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);
}

同じ画像を使うので、clone()を使って複製します。setImageType()でグレースケールにしています。

・公式ドキュメント
ofImage | openFrameworks

水平、垂直反転させて画像を表示させる

testApp.h

ofImage myVerticalMirrorImage;
ofImage myHorizontalMirrorImage;

新しくインスタンスを生成します。

testApp.m

void testApp::draw(){
	/*省略*/

	//クローン
	myVerticalMirrorImage.clone(myImage);
	//垂直に反転
	myVerticalMirrorImage.mirror(true, false);
	//描画
	myVerticalMirrorImage.draw(0, SCREEN_HEIGHT / 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);
	//クローン
	myHorizontalMirrorImage.clone(myImage);
	//水平に反転
	myHorizontalMirrorImage.mirror(false, true);
	//描画
	myHorizontalMirrorImage.draw(SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2, SCREEN_WIDTH / 2, SCREEN_HEIGHT / 2);
}

mirror()を使って反転させます。

void ofImage_::mirror(bool vertical, bool horizontal)

mirror()の使い方はこのようになります。引数にbool値を設定して、水平・垂直反転を決定します。

・公式ドキュメント
ofImage | openFrameworks