View
2.430
Download
3
Category
Preview:
Citation preview
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を主要メンバーとして、世界中の開発者と協力しながら発展
Zachary Lieberman
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"#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"#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
描画
#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
準備
#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
更新
#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
描画
図形を描いてみる!
‣ まず円を描いてみましょう‣ 何を指定したら円を描けるのか、を考える
図形を描いてみる!
‣ 中心の位置 (座標 = x, y) と半径の長さがわかれば円は描ける!
(x,y)r
図形を描いてみる!
‣ openFrameworksでは、下記のように指定する
‣ ofCircle (中心のx座標, 中心のy座標, 半径の長さ);
‣ 例：‣ ofCircle (100, 200, 50);‣ 座標(100, 200) を中心に、半径50の円を描く
#include "testApp.h"
//--------------------------------------------------------------void testApp::setup(){!! // iPhone初期設定! ofRegisterTouchEvents(this);! ofxAccelerometer.setup();! ofxiPhoneAlerts.addListener(this);!! // 背景色! ofBackground(0,0,0);}
//--------------------------------------------------------------void testApp::update(){
}
//--------------------------------------------------------------void testApp::draw(){! // 円を描く! 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);
// 前略
void testApp::draw(){! // 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
Recommended