openFrameworks iOS 入門

iTamabi13 第２回：
openFrameworks iOS 入門
2013年9月16日
田所淳

このワークショップでの開発枠組み
‣ iPhone SDK + openFrameworks で!!
+

openFrameworks (for iPhone) 入門

openFrameworks とは?
‣ C++によるクリエイティブなコーディングのためのオープン
ソースのツールキット
‣ http://openframeworks.cc/

簡単な歴史
‣ 2004年、Zachary Liebermanがニューヨークのパーソンズ美
術大学での大学院のクラスの作品制作のためのツールとして開
発
‣ その後、Zachary Lieberman、Theo Watson、Arturo Castro
を主要メンバーとして、世界中の開発者と協力しながら発展

openFrameworks とは?
‣ 様々なメディアを駆使した作品を作りたい!!
‣ 様々な技術に精通しなくてはならない
‣ サウンド、ビデオ、フォント、画像解析...etc.
‣ openFrameworksを利用すると、
‣ 既存の道具(=ライブラリ)を設定なしに使用可能
‣ 作品制作のための「糊」

開発のための「糊」
‣ oFの構造イメージ
main.cpp
testApp.h testApp.cpp
openGL GLUT freeimage freetype
fmod rtaudio quicktime openCV
ofSimpleApp, ofGraphics, ofImage, ofTruTypeFont,
ofVidePlayer, ofVideoGrabber, ofTexture, ofSoundPlayer,
ofSoundStream, ofSerial, ofMath, ofUtils
プログラムの開始
コードを書くところ
OpenFrameworksの機能
ベースとなるライブラリ群

サンプルを実行してみよう!!
‣ Mac版「of_preRelease_v007_iphone/apps/
iPhoneExamples/」以下にあるフォルダ内のXCodeのプロ
ジェクトファイル「.xcodeproj」を開く
‣ プロジェクトファイルを開くと、自動的にXcodeが起動
‣ 左上のプルダウンより、プロジェクトの名前の項目のiPhone
シミュレータを選択

サンプルを実行してみよう!!
‣ 「Run」ボタンを押す
‣ コード実行のための様々な処理 (コンパイル) を行った後、iOS
シミュレータでサンプルプログラムが実行される(はず)

まずはSimulatorで実行してみる!!
‣ 例：advancedGraphics

新規にプロジェクトを作成する
‣ 新規にプロジェクトを作成するには、空プロジェクトをコピー
‣ 空プロジェクトは、下記のものをコピーしてつかう
‣ apps > iPhoneExamples > emptyExample
‣ 例：apps > iPhoneExamples > emptyExample を下記の場所
にコピー
‣ apps > iTamabi_example110524 > emptyExample

OpneFrameworksのコード構造
‣ さしあたって、編集するのは、testApp.hとtestApp.mm の
み!!
main.cpp
testApp.h testApp.cpp
openGL GLUT freeimage freetype
fmod rtaudio quicktime openCV
ofSimpleApp, ofGraphics, ofImage, ofTruTypeFont,
ofVidePlayer, ofVideoGrabber, ofTexture, ofSoundPlayer,
ofSoundStream, ofSerial, ofMath, ofUtils
プログラムの開始
コードを書くところ
OpenFrameworksの機能
ベースとなるライブラリ群
ココ

プロジェクトの中身を開いてみよう!
‣ testApp.mm を開いてみる!

2つのファイル
‣ testApp.h - ヘッダファイル
‣ プログラム全体で使用される部品 (変数、関数) を宣言
‣ 料理のレシピに例えると…
‣ 材料の一覧
‣ 料理手順の一覧
‣ testApp.mm - 実装ファイル
‣ 実際に何をするかを記述
‣ 料理のレシピに例えると…
‣ 実際の調理内容の全てを記述

重要な3つのブロック
‣ とりあえず今日の段階で重要になるのは、下記の3つブロック
‣ setup - 準備
‣ update - 更新
‣ draw - 描画
‣ つまり...
‣ 絵を描く準備をしたら継続的に更新しながら描画する

#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 では
‣ testApp.h
準備

#pragma once
#include "ofMain.h"
!
public:
! void setup();
! void update();
! void draw();
! void exit();
!
!
! void lostFocus();
! void gotFocus();
!
};
testApp.h では
‣ testApp.h
更新

#pragma once
#include "ofMain.h"
!
public:
! void setup();
! void update();
! void draw();
! void exit();
!
!
! void lostFocus();
! void gotFocus();
!
};
testApp.h では
‣ testApp.h
描画

#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(){
!
}
testApp.mm では
‣ testApp.mm
準備

//--------------------------------------------------------------
!
!
!
!
}
//--------------------------------------------------------------
}
//--------------------------------------------------------------
!
}
testApp.mm では
‣ testApp.mm
更新

//--------------------------------------------------------------
!
!
!
!
}
//--------------------------------------------------------------
}
//--------------------------------------------------------------
!
}
testApp.mm では
‣ testApp.mm
描画

図形を描いてみる!
‣ まず円を描いてみましょう
‣ 何を指定したら円を描けるのか、を考える

‣ 中心の位置 (座標 = x, y) と半径の長さがわかれば円は描ける!
(x,y)
r

‣ openFrameworksでは、下記のように指定する
‣ ofCircle (中心のx座標, 中心のy座標, 半径の長さ);
‣ 例：
‣ ofCircle (100, 200, 50);
‣ 座標(100, 200) を中心に、半径50の円を描く

//--------------------------------------------------------------
! // iPhone初期設定
!
! // 背景色
}
//--------------------------------------------------------------
}
//--------------------------------------------------------------
! // 円を描く
! ofCircle(160, 240, 50);
}
やってみよう!!
‣ testApp.mm
1行追加

‣ 円が描けた!

色を塗ってみる
‣ コンピュータの画面はどうなっているのか?
‣ コンピュータの画面を拡大していくと...
‣ 縦横に並んだ点の集合 → ピクセル (Pixel)
‣ 一つのピクセルは赤、緑、青の三原色から成り立っている

色を塗ってみる
‣ 色を指定するには?
‣ R(赤) G(緑) B(青)の三原色で指定する
‣ 加法混色 (光の三原色であることに注意) ←→ 色料の三原色

色を指定するには?
‣ openFrameworks で色を指定するには?
‣ ofSetColor を使用する
‣ ofSetColor (Red, Green, Blue, Alpha);
‣ それぞれの色の範囲は 0 ∼ 255
‣ Alphaは透明度をあらわす
‣ 色を指定した以降の図形に適用される
‣ 例：
‣ ofSetColor(0, 127, 255, 127);

// 前略
! // 2つの円を描く
! ofEnableAlphaBlending();
! ofSetColor(0, 127, 255, 200);
! ofCircle(130, 240, 50);
! ofSetColor(255, 127, 0, 200);
! ofCircle(190, 240, 50);
}
// 後略
‣ testApp.mm - draw( )関数
変更

‣ 色がついた!

参考：oFの命令を調べる
‣ たとえば、円以外の形を描きたくなったとき、どうやって調べ
る?
‣ リファレンスを参考にすると良い
‣ http://www.openframeworks.cc/documentation
‣ oFの全ての命令の解説が掲載されています

Let’s Try!
‣ iPhoneのキャンバス上に、円や (余裕があれば) 他の形で自由
に絵を描いてみる!!

応用：アニメーションの第一歩
‣ アニメーションするにはどうする?
‣ setup、update、draw をつかいこなす
‣ 初期値の設定 : setup
‣ 変化する部分 : update
‣ 描画 : draw

画面全体が回転するプログラム
‣ サンプルをみながら解説します!
‣ 01_03_RotateCircles

openFrameworks iOS 入門

More Related Content

What's hot (20)

Viewers also liked (10)

Similar to openFrameworks iOS 入門 (20)

More from Atsushi Tadokoro (19)

openFrameworks iOS 入門