not good but great

プログラミング、アート、映画・本の感想について書きます。

openFrameworksでiOSシミュレータに円を表示させてみた

openFrameworksを始めてみる

Googleがテクノロジーとアートを組み合わせて作品をつくるという「DevArt」というプロジェクトを進めていることを知りました。
デジタルアートのプロジェクト DevArt がスタートします - Google Japan Developer Relations Blog

Webブラウザ、モバイルを飛び出して作品を作れるようになったらかっこいいなと思い、前々から聞いたことのあった「openFrameworks」を触ってみることにしました。Perfumeのライブ映像をつくっている真鍋さんもoFを使っていたと思います。(情熱大陸に出ていたエディタ画面から推論しました。)

こちらを参考にしました。
Retinaに映える! iOS美麗アプリ制作入門(1):Retinaに映える!美麗なiPhone/iPadアプリが作れるopenFrameworksとは (1/3) - @IT

環境構築

Xcode、oFのインストールをまず済ませます。

openFrameworks

ファイル構成

主なファイル構成は下のようになります。

  • src
    • main.mm
    • testApp.mm
    • testApp.h

testApp.h

#pragma once

#include "ofMain.h"
#include "ofxiPhone.h"
#include "ofxiPhoneExtras.h"

class testApp : public ofxiPhoneApp{
	
    public:
        void setup();
        void update();
        void draw();
        void exit();
	
        void touchDown(ofTouchEventArgs & touch);
        void touchMoved(ofTouchEventArgs & touch);
        void touchUp(ofTouchEventArgs & touch);
        void touchDoubleTap(ofTouchEventArgs & touch);
        void touchCancelled(ofTouchEventArgs & touch);

        void lostFocus();
        void gotFocus();
        void gotMemoryWarning();
        void deviceOrientationChanged(int newOrientation);

};

testApp.hというヘッダファイルで関数の定義をします。定義する関数は描画関連、タッチイベント関連があります。

描画では、まずsetup()を実行し、draw()、update()を繰り返して、図形を描画したり、アニメーションさせたりしています。

円を描画する

f:id:naoyashiga:20140206165034p:plain

void testApp::draw(){
    for(int i = 0;i < 10; i++){
        ofSetColor(20 * i, 20 * i, 0);
        ofEllipse(ofGetWidth() / 2, ofGetHeight() / 2, 320 - 20 * i, 320 - 20 * i);
    }	
}

参考サイトでは赤色の円を描画していますが、ここでは黄色に変えみました。またグラデーションの数も多くさせています。


以上です。描画するだけなら簡単でした。かっこよく動かすのには物理や数学の知識があれば、かなり表現の幅が広がると思います。