openFrameworks入門

• OpenFrameworksの紹介
• OpenFrameworksを使ってみる
• 簡単なプログラムを実行
• OpenFramwroskをiPhoneで使ってみる
• 簡単なアニメーションを作成してみる

OpneFrameworksについて

• OpenFrameworksとは、シンプルで直感的なフレームワークによって、創作活動を手助けするようにデザインされた、C++のライブラリ
• オフィシャルページ
• Zach LiebermanとTheodore Watson、Arturo Castroを中心に開発が進められている
• Processingからの強い影響
• C++の細かな知識なしに、クリエイティブな部分のみコーディングすることで、高度なアプリケーションを開発可能
• openFrameworksから影響を受けたプロジェクトも派生している → Cinder

made with openFrameworks from openFrameworks on Vimeo.

OpneFrameworksの入手方法

• openFrameworksのダウンロードページから
• 最新のバージョンをダウンロードする
• 2009年5月現在の最新は、v0.061
• iPhoe版の “iPhone 0061 FAT” をダウンロード
• Macでも開発したい人は、mac版の ”x-code FAT” をダウンロード、OS 10.5と10.6によって別になっているのに注意
• FAT版とは?
• あらかじめ主要な addon (拡張機能) が組込まれたバージョン
• OpenCV, OSCの入出力 など

サンプルを実行してみる

• Mac版「of_preRelease_v0061_osxSL_FAT/apps/examples/」以下にあるフォルダ内のXCodeのプロジェクトファイル「.xcodeproj」を開く
• iPhone版の場合は「of_preRelease_v0061_iPhone_FAT-pre3/apps/examples/」以下
• プロジェクトファイルを開くと、自動的にXcodeが起動するはず
• ツールバーの「ビルドして進行」を押す
• プログラムがコンパイルされ、エラーが無ければそのままサンプルが実行される

advancedGraphics (iPhone版)

新規プロジェクトの作成場所

• まずは、自分のプロジェクトを格納するためのフォルダを用意する
• openFrameworksでは、プロジェクトを格納する場所が指定されている – それ以外の場所にプロジェクトを作成しても動かないので注意!!

• プロジェクトを格納する場所
• Mac版「of_preRelease_v0061_osxSL_FAT/apps/[任意のフォルダ]/」以下に
• iPhone版「of_preRelease_v0061_iPhone_FAT-pre3/apps/[任意のフォルダ]/」以下に

• 例えば自分用の新規プロジェクトを作成するフォルダを「myApps」とすると
• Mac版「of_preRelease_v0061_osxSL_FAT/apps/myApps/」以下にプロジェクトのフォルダを作成
• iPhone版「of_preRelease_v0061_iPhone_FAT-pre3/apps/myApps/」以下にプロジェクトのフォルダを作成

新規プロジェクトの作成

• openFrameworksの新規プロジェクトを作成する際には、空のプロジェクトをフォルダごとコピーして使用する
• Mac版 「of_preRelease_v0061_osxSL_FAT/apps/examples/emptyExample」
• iPhone版 「of_preRelease_v0061_iPhone_FAT-pre3/apps/iPhoneExamples/emptyExample」
• プロジェクトのフォルダごとコピーして、myAppsフォルダ以下に配置
• コピーしたemptyExampleフォルダの名称を変更 – 「myNewApp」など
• プロジェクトのフォルダ内にある、XCodeのプロジェクトファイルの名称も変更 – 「myNewApp.xcodeproj」など
• XCodeのプロジェクトファイルをダブルクリックして、XCodeを起動
• グループとファイル」の一覧の中の「ターゲット」の項目内のターゲットファイルのアイコンを右クリックして、「名称変更」を選択します
• ターゲットの名称をプロジェクト名と同じ名前に – 「myNewApp」など

emptyExampleフォルダの場所

myAppsフォルダにコピー

プロジェクトのフォルダ名の変更

プロジェクトファイル名の変更

ターゲットの名称を変更

ターゲットの名称変更が完了した状態

OpneFrameworksのコード構造

• さしあたって、編集する必要のあるファイルは、testApp.hとtestApp.cpp (iPhone版の場合は、testApp.mm) のみ!
• 様々な既存のライブラリが結びついている
• アプリケーション作成のための「糊」のような存在

openFrameworksの構造

プログラムを作成してみる

• testApp.h
• プログラムの中心となるヘッダファイル
• testApp.cpp で使用される、変数、メソッドなどを宣言する場所

testApp.h (OS X 版)

#ifndef _TEST_APP
#define _TEST_APP


#include "ofMain.h"

class testApp : public ofBaseApp{

public:
  void setup();
  void update();
  void draw();

  void keyPressed  (int key);
  void keyReleased(int key);
  void mouseMoved(int x, int y );
  void mouseDragged(int x, int y, int button);
  void mousePressed(int x, int y, int button);
  void mouseReleased(int x, int y, int button);
  void windowResized(int w, int h);

};
#endif

testApp.h (iPhone版)

#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 lostFocus();
  void gotFocus();
  void gotMemoryWarning();
  void deviceOrientationChanged(int newOrientation);
};

• testApp.cpp (iPhone版の場合は、testApp.mm)
• プログラムの中心となる実装ファイル
• 画面の表示、アニメーション、マウスやキーボードとのインタラクションなど、主要な機能はここで定義される

testApp.cpp (OS X 版)

#include "testApp.h"

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

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

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

//--------------------------------------------------------------
void testApp::keyPressed(int key){
    
}

//--------------------------------------------------------------
void testApp::keyReleased(int key){
    
}

//--------------------------------------------------------------
void testApp::mouseMoved(int x, int y ){
    
}

//--------------------------------------------------------------
void testApp::mouseDragged(int x, int y, int button){
    
}

//--------------------------------------------------------------
void testApp::mousePressed(int x, int y, int button){
    
}

//--------------------------------------------------------------
void testApp::mouseReleased(int x, int y, int button){
    
}

//--------------------------------------------------------------
void testApp::windowResized(int w, int h){
    
}

testApp.mm (iPhone版)

#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(127,127,127);
}

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

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

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

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

//--------------------------------------------------------------
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内で使用される主な関数(メソッド)

• testApp.hとtestApp.cpp (testApp.mm) 内には、様々な関数が宣言されている
• void setup(); / void update(); / void draw(); / void keyPressed(int key); ..etc
• それぞれの関数で処理される内容が来まっている

定義	機能
setup	プログラムが起動した際に1度だけ実行される。初期化。
update	一定間隔で繰り返し実行される。draw関数の直前に実行される。変数の値の更新に使用する。
draw	update関数の直後に実行される。描画に関する命令に使用する。
exit	プログラムが終了する直前に実行される。
keyPressed	キーボードを押した瞬間に実行される。
keyReleased	キーボードを離した瞬間に実行される。
mouseMoved	マウスを移動した際に実行される
mouseDragged	マウスをドラッグした際に実行される
mousePressed	マウスボタンを押した瞬間に実行される
mouseReleased	マウスボタンを離した瞬間に実行される
touchDown	画面をタッチした瞬間に実行される(iPhone版のみ)
touchMoved	画面をタッチして移動した際に実行される(iPhone版のみ)
touchUp	タッチしていた画面から離れた瞬間実行される(iPhone版のみ)
touchDoubleTap	ダブルタップ(素早く2回画面をタップ)した瞬間に実行される(iPhone版のみ)

簡単な図形を描いてみる

• 3つの円を描いてみる
• アルファチャンネル(透明度)を指定
• 色の混色を、加法混色に
• testApp::draw() 関数に色を指定して円を描く命令を追加する

testApp.cpp (OS X 版)

#include "testApp.h"

//--------------------------------------------------------------
void testApp::setup(){
    ofBackground(0, 0, 0);
}

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

//--------------------------------------------------------------
void testApp::draw(){
    //アルファチャンネル(透明度)を使用可能に
    ofEnableAlphaBlending();
    //混色を、加算混色に
    glBlendFunc(GL_ONE, GL_ONE);
    //塗りの色を赤に
    ofSetColor(255, 0, 0, 63);
    //円を描く
    ofEllipse(ofGetWidth()/2, ofGetHeight()/2-40, 150, 150);
    //塗りの色を青に
    ofSetColor(0, 0, 255, 63);
    //円を描く
    ofEllipse(ofGetWidth()/2-40, ofGetHeight()/2+40, 150, 150);
    //塗りの色を緑に
    ofSetColor(0, 255, 0, 63);
    //円を描く
    ofEllipse(ofGetWidth()/2+40, ofGetHeight()/2+40, 150, 150);  
}

//--------------------------------------------------------------
void testApp::keyPressed(int key){
    
}

//--------------------------------------------------------------
void testApp::keyReleased(int key){
    
}

//--------------------------------------------------------------
void testApp::mouseMoved(int x, int y ){
    
}

//--------------------------------------------------------------
void testApp::mouseDragged(int x, int y, int button){
 
}

//--------------------------------------------------------------
void testApp::mousePressed(int x, int y, int button){
    
}

//--------------------------------------------------------------
void testApp::mouseReleased(int x, int y, int button){
    
}

//--------------------------------------------------------------
void testApp::windowResized(int w, int h){
    
}

testApp.mm (iPhone版)

#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);
}

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

//--------------------------------------------------------------
void testApp::draw(){
    //アルファチャンネル(透明度)を使用可能に
    ofEnableAlphaBlending();
    //混色を、加算混色に
    glBlendFunc(GL_ONE, GL_ONE);
    //塗りの色を赤に
    ofSetColor(255, 0, 0, 63);
    //円を描く
    ofEllipse(ofGetWidth()/2, ofGetHeight()/2-40, 150, 150);
    //塗りの色を青に
    ofSetColor(0, 0, 255, 63);
    //円を描く
    ofEllipse(ofGetWidth()/2-40, ofGetHeight()/2+40, 150, 150);
    //塗りの色を緑に
    ofSetColor(0, 255, 0, 63);
    //円を描く
    ofEllipse(ofGetWidth()/2+40, ofGetHeight()/2+40, 150, 150);
}

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

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

//--------------------------------------------------------------
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){
    
}

実行結果(iPhone版)

アニメーションの基本構造

• アニメーションを構成する3つの関数 – setup()、update()、draw()

• setup()
• 初期化関数
• プログラムを実行したときに最初に1回だけ実行したい命令を記入
• 画面書き換えの速度の設定(フレームレート)、背景色、外部データのロードなど

• update()
• メインループ関数、指定した画面書き換え速度の設定(フレームレート)の設定に従って、繰り返し実行、
• draw()関数の前に実行され、プログラムに記憶された値を更新する際に使用される

• draw()
• 描画関数
• update()関数と同様に、指定された画面書き換えの間隔(フレームレート)でプログラムが終了するまで、繰り返し実行
• 画面の描画に関する命令を実行する

簡単なアニメーションを作成する

• 画面全体を回転してみる
• 回転角度は、angleという変数に格納
• setup() – 表示の初期設定、背景色の定義、フレームレート設定、回転角度の初期化
• update() – 回転角度を10°増加させる
• draw() – 画面を描画

testApp.cpp (OS X 版)

#include "testApp.h"

double angle; //傾きの角度

//--------------------------------------------------------------
void testApp::setup(){
    //背景色を黒に
	ofBackground(0,0,0);
    //フレームレートを60fpsに
    ofSetFrameRate(60);
    //角度を初期化
    angle = 0;
}

//--------------------------------------------------------------
void testApp::update(){
    //角度を10°増加させる
    angle+=10;
}

//--------------------------------------------------------------
void testApp::draw(){
    //現在の座標系を保存
    ofPushMatrix();
    //座標系の原点(0,0)を、画面の中心に
    ofTranslate(ofGetWidth()/2, ofGetHeight()/2, 0);
    //画面のX軸を40°回転
    ofRotateX(40);
    //画面のZ軸を、angleの角度回転させる
    ofRotateZ(angle);
    //アルファチャンネル(透明度)を使用可能に
    ofEnableAlphaBlending();
    //混色を、加算混色に
    glBlendFunc(GL_ONE, GL_ONE);
    //塗りの色を赤に
    ofSetColor(255, 0, 0, 63);
    //円を描く
    ofEllipse(0, -40, 150, 150);
    //塗りの色を青に
    ofSetColor(0, 0, 255, 63);
    //円を描く
    ofEllipse(-40, 40, 150, 150);
    //塗りの色を緑に
    ofSetColor(0, 255, 0, 63);
    //円を描く
    ofEllipse(40, 40, 150, 150);
    //座標系を復元
    ofPopMatrix();
}

//--------------------------------------------------------------
void testApp::keyPressed(int key){
    
}

//--------------------------------------------------------------
void testApp::keyReleased(int key){
    
}

//--------------------------------------------------------------
void testApp::mouseMoved(int x, int y ){
    
}

//--------------------------------------------------------------
void testApp::mouseDragged(int x, int y, int button){
 
}

//--------------------------------------------------------------
void testApp::mousePressed(int x, int y, int button){
    
}

//--------------------------------------------------------------
void testApp::mouseReleased(int x, int y, int button){
    
}

//--------------------------------------------------------------
void testApp::windowResized(int w, int h){
    
}

testApp.mm (iPhone版)

#include "testApp.h"

double angle; //傾きの角度

//--------------------------------------------------------------
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);
    //フレームレートを60fpsに
    ofSetFrameRate(60);
    //角度を初期化
    angle = 0;
}

//--------------------------------------------------------------
void testApp::update(){
    //角度を10°増加させる
    angle+=10;
}

//--------------------------------------------------------------
void testApp::draw(){
    //現在の座標系を保存
    ofPushMatrix();
    //座標系の原点(0,0)を、画面の中心に
    ofTranslate(ofGetWidth()/2, ofGetHeight()/2, 0);
    //画面のX軸を40°回転
    ofRotateX(40);
    //画面のZ軸を、angleの角度回転させる
    ofRotateZ(angle);
    //アルファチャンネル(透明度)を使用可能に
    ofEnableAlphaBlending();
    //混色を、加算混色に
    glBlendFunc(GL_ONE, GL_ONE);
    //塗りの色を赤に
    ofSetColor(255, 0, 0, 63);
    //円を描く
    ofEllipse(0, -40, 150, 150);
    //塗りの色を青に
    ofSetColor(0, 0, 255, 63);
    //円を描く
    ofEllipse(-40, 40, 150, 150);
    //塗りの色を緑に
    ofSetColor(0, 255, 0, 63);
    //円を描く
    ofEllipse(40, 40, 150, 150);
    //座標系を復元
    ofPopMatrix();
}

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

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

//--------------------------------------------------------------
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){
    
}

実行結果(iPhone版)