openframeworks iPhoneアプリ入門 サンプル１

OpenFrameworksは、インタラクティブアート／メディアアートの作成が主な目的のフレームワークです。静止画、動画、音声などの処理がとても簡単にできるので、アイデアを作品として短時間で実現できることが特徴です。

作成するサンプルは簡単なもので、iPhoneをタッチしたところからランダムな円を描き、徐々に画面が埋めつくされていきます。



objective-cでは複雑になりがちなタイムラインや描画の管理を、openframeworksがおこなってくれることがポイントです。

最初に、円のクラス「particle」を作成します。

particle.h

#include "ofMain.h"
class particle {
public:
	ofPoint pos;	// パーティクルの位置
	particle();
	void update();
	void draw();
};

particle.cpp

#include "particle.h"
particle::particle() {
}
void particle::update() {
}
void particle::draw() {	
	// 円を描く
	ofCircle(pos.x, pos.y, 20);
}

円の位置情報を保持してdraw()が呼ばれた時にその位置に円を描く、というのがこのクラスの役割です。ofCircle(x, y, radius)という関数一つで円を描くことができます。

そして、メインの機能を書くクラス「testApp」でタッチ入力と描画の扱いを指示します。

testApp.h

#pragma once

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

#include "particle.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 lostFocus();
	void gotFocus();
	void gotMemoryWarning();
	void deviceOrientationChanged(int newOrientation);
	
	vector <particle> particles;
};

vector <particle> particlesという、円のオブジェクトを保持する配列だけを加えました。

testApp.mm

#include "testApp.h"

//--------------------------------------------------------------
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(0, 0, 0);
	ofSetBackgroundAuto(false);
	ofSetFrameRate(60);
}

//--------------------------------------------------------------
void testApp::update(){
	
	// particle 位置変更
	for (int i = 0; i < particles.size(); i++){
		particles[i].pos.x += sin(ofGetElapsedTimef()*20) + ofRandom(-35, 35);
		particles[i].pos.y += cos(ofGetElapsedTimef()*30) + ofRandom(-35, 35);
	}
}

//--------------------------------------------------------------
void testApp::draw(){
	
	// particle 描画
	ofSetColor(ofRandom(0, 255), ofRandom(0, 255), ofRandom(0, 255), 50);
	ofFill();
	
	ofEnableAlphaBlending();
	
	ofBeginShape();
	for (int i = 0; i < particles.size(); i++){
		particles[i].draw();
	}
	ofEndShape();
	
	ofDisableAlphaBlending();
	
	// ストップ領域
	ofFill();
	ofSetColor(255, 100, 0);
	ofRect(290, 450, 20, 20);
}

//--------------------------------------------------------------
void testApp::exit(){
	particles.clear();
}

//--------------------------------------------------------------
void testApp::touchDown(ofTouchEventArgs &touch){
	
	// ストップ&クリア
	if(touch.x>290 && touch.x<290+20 && touch.y>450 && touch.y<450+20)
	{
		particles.clear();
		ofFill();
		ofSetColor(0, 0, 0);
		ofRect(0, 0, ofGetWidth(), ofGetHeight());
		return;
	}

	// particle作成
	particle temp;
	temp.pos.x = touch.x;
	temp.pos.y = touch.y;
	particles.push_back(temp);
}

//--------------------------------------------------------------
void testApp::touchMoved(ofTouchEventArgs &touch){
}

//--------------------------------------------------------------
void testApp::touchUp(ofTouchEventArgs &touch){
}

//--------------------------------------------------------------
void testApp::touchDoubleTap(ofTouchEventArgs &touch){
}

//--------------------------------------------------------------
void testApp::lostFocus(){
}

//--------------------------------------------------------------
void testApp::gotFocus(){
}

//--------------------------------------------------------------
void testApp::gotMemoryWarning(){
}

//--------------------------------------------------------------
void testApp::deviceOrientationChanged(int newOrientation){
}

testApp::draw()で画面を描画しています。ここではparticles配列に入っているオブジェクト自身のdraw()を呼び出しています。

openFrameworksの一番のウリは、testApp::update()です。ここに時系列で変化させたい値を処理しておくと、画面に動きがでるわけです。今回は、各パーティクル（円）の位置をランダムに変化させています。その後、testApp::draw()が呼ばれると、変化させた位置で描画されるという仕組みです。

以上のように、とても簡単に動きを出すことができます。

サンプルコードはここからダウンロードできます。