• Like
openFrameworks iOS 入門
Upcoming SlideShare
Loading in...5
×

openFrameworks iOS 入門

  • 2,036 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,036
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
24
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. iTamabi13 第2回: openFrameworks iOS 入門 2013年9月16日 田所 淳
  • 2. このワークショップでの開発枠組み ‣ iPhone SDK + openFrameworks で!! +
  • 3. openFrameworks (for iPhone) 入門
  • 4. openFrameworks とは? ‣ C++によるクリエイティブなコーディングのためのオープン ソースのツールキット ‣ http://openframeworks.cc/
  • 5. 簡単な歴史 ‣ 2004年、Zachary Liebermanがニューヨークのパーソンズ美 術大学での大学院のクラスの作品制作のためのツールとして開 発 ‣ その後、Zachary Lieberman、Theo Watson、Arturo Castro を主要メンバーとして、世界中の開発者と協力しながら発展
  • 6. Zachary Lieberman
  • 7. openFrameworks とは? ‣ 様々なメディアを駆使した作品を作りたい!! ‣ 様々な技術に精通しなくてはならない ‣ サウンド、ビデオ、フォント、画像解析...etc. ‣ openFrameworksを利用すると、 ‣ 既存の道具(=ライブラリ)を設定なしに使用可能 ‣ 作品制作のための「糊」
  • 8. 開発のための「糊」 ‣ 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の機能 ベースとなるライブラリ群
  • 9. サンプルを実行してみよう!! ‣ Mac版「of_preRelease_v007_iphone/apps/ iPhoneExamples/」以下にあるフォルダ内のXCodeのプロ ジェクトファイル「.xcodeproj」を開く ‣ プロジェクトファイルを開くと、自動的にXcodeが起動 ‣ 左上のプルダウンより、プロジェクトの名前の項目のiPhone シミュレータを選択
  • 10. サンプルを実行してみよう!! ‣ 「Run」ボタンを押す ‣ コード実行のための様々な処理 (コンパイル) を行った後、iOS シミュレータでサンプルプログラムが実行される(はず)
  • 11. まずはSimulatorで実行してみる!! ‣ 例:advancedGraphics
  • 12. 新規にプロジェクトを作成する ‣ 新規にプロジェクトを作成するには、空プロジェクトをコピー ‣ 空プロジェクトは、下記のものをコピーしてつかう ‣ apps > iPhoneExamples > emptyExample ‣ 例:apps > iPhoneExamples > emptyExample を下記の場所 にコピー ‣ apps > iTamabi_example110524 > emptyExample
  • 13. 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の機能 ベースとなるライブラリ群 ココ
  • 14. プロジェクトの中身を開いてみよう! ‣ testApp.mm を開いてみる!
  • 15. 2つのファイル ‣ testApp.h - ヘッダファイル ‣ プログラム全体で使用される部品 (変数、関数) を宣言 ‣ 料理のレシピに例えると… ‣ 材料の一覧 ‣ 料理手順の一覧 ‣ testApp.mm - 実装ファイル ‣ 実際に何をするかを記述 ‣ 料理のレシピに例えると… ‣ 実際の調理内容の全てを記述
  • 16. 重要な3つのブロック ‣ とりあえず今日の段階で重要になるのは、下記の3つブロック ‣ setup - 準備 ‣ update - 更新 ‣ draw - 描画 ‣ つまり... ‣ 絵を描く準備をしたら継続的に更新しながら描画する
  • 17. #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 準備
  • 18. #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 更新
  • 19. #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 描画
  • 20. #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 準備
  • 21. #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 更新
  • 22. #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 描画
  • 23. 図形を描いてみる! ‣ まず円を描いてみましょう ‣ 何を指定したら円を描けるのか、を考える
  • 24. 図形を描いてみる! ‣ 中心の位置 (座標 = x, y) と半径の長さがわかれば円は描ける! (x,y) r
  • 25. 図形を描いてみる! ‣ openFrameworksでは、下記のように指定する ‣ ofCircle (中心のx座標, 中心のy座標, 半径の長さ); ‣ 例: ‣ ofCircle (100, 200, 50); ‣ 座標(100, 200) を中心に、半径50の円を描く
  • 26. #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行追加
  • 27. やってみよう!! ‣ 円が描けた!
  • 28. 色を塗ってみる ‣ コンピュータの画面はどうなっているのか? ‣ コンピュータの画面を拡大していくと... ‣ 縦横に並んだ点の集合 → ピクセル (Pixel) ‣ 一つのピクセルは赤、緑、青の三原色から成り立っている
  • 29. 色を塗ってみる ‣ 色を指定するには? ‣ R(赤) G(緑) B(青)の三原色で指定する ‣ 加法混色 (光の三原色であることに注意) ←→ 色料の三原色
  • 30. 色を指定するには? ‣ openFrameworks で色を指定するには? ‣ ofSetColor を使用する ‣ ofSetColor (Red, Green, Blue, Alpha); ‣ それぞれの色の範囲は 0 ∼ 255 ‣ Alphaは透明度をあらわす ‣ 色を指定した以降の図形に適用される ‣ 例: ‣ ofSetColor(0, 127, 255, 127);
  • 31. // 前略 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( )関数 変更
  • 32. やってみよう!! ‣ 色がついた!
  • 33. 参考:oFの命令を調べる ‣ たとえば、円以外の形を描きたくなったとき、どうやって調べ る? ‣ リファレンスを参考にすると良い ‣ http://www.openframeworks.cc/documentation ‣ oFの全ての命令の解説が掲載されています
  • 34. Let’s Try! ‣ iPhoneのキャンバス上に、円や (余裕があれば) 他の形で自由 に絵を描いてみる!!
  • 35. 応用:アニメーションの第一歩 ‣ アニメーションするにはどうする? ‣ setup、update、draw をつかいこなす ‣ 初期値の設定 : setup ‣ 変化する部分 : update ‣ 描画 : draw
  • 36. 画面全体が回転するプログラム ‣ サンプルをみながら解説します! ‣ 01_03_RotateCircles