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 入門

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (10)

Ähnlich wie openFrameworks iOS 入門

Ähnlich wie openFrameworks iOS 入門 (20)

Mehr von Atsushi Tadokoro

Mehr von Atsushi Tadokoro (19)

openFrameworks iOS 入門