• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
openFrameworks iOS 入門
 

openFrameworks iOS 入門

on

  • 1,923 views

 

Statistics

Views

Total Views
1,923
Views on SlideShare
1,422
Embed Views
501

Actions

Likes
4
Downloads
21
Comments
0

4 Embeds 501

http://yoppa.org 439
http://scrap.kow-luck.com 33
http://cloud.feedly.com 28
http://digg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    openFrameworks iOS 入門 openFrameworks iOS 入門 Presentation Transcript

    • iTamabi13 第2回: 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