yoppa.org


多摩美 - “iTamabi” – iPhoneアプリ開発プロジェクト 2010

openFrameworks入門

openFrameworks入門

  • OpenFrameworksの紹介
  • OpenFrameworksを使ってみる
  • 簡単なプログラムを実行
  • OpenFramwroskをiPhoneで使ってみる
  • 簡単なアニメーションを作成してみる

OpneFrameworksについて

  • OpenFrameworksとは、シンプルで直感的なフレームワークによって、創作活動を手助けするようにデザインされた、C++のライブラリ
  • オフィシャルページ
  • Zach LiebermanとTheodore Watson、Arturo Castroを中心に開発が進められている
  • Processingからの強い影響
  • C++の細かな知識なしに、クリエイティブな部分のみコーディングすることで、高度なアプリケーションを開発可能
  • openFrameworksから影響を受けたプロジェクトも派生している → Cinder

made with openFrameworks from openFrameworks on Vimeo.

OpneFrameworksの入手方法

  • openFrameworksのダウンロードページから
  • 最新のバージョンをダウンロードする
  • 2009年5月現在の最新は、v0.061
  • iPhoe版の “iPhone 0061 FAT” をダウンロード
  • Macでも開発したい人は、mac版の ”x-code FAT” をダウンロード、OS 10.5と10.6によって別になっているのに注意
  • FAT版とは?
  • あらかじめ主要な addon (拡張機能) が組込まれたバージョン
  • OpenCV, OSCの入出力 など

サンプルを実行してみる

  • Mac版「of_preRelease_v0061_osxSL_FAT/apps/examples/」以下にあるフォルダ内のXCodeのプロジェクトファイル「.xcodeproj」を開く
  • iPhone版の場合は「of_preRelease_v0061_iPhone_FAT-pre3/apps/examples/」以下
  • プロジェクトファイルを開くと、自動的にXcodeが起動するはず
  • ツールバーの「ビルドして進行」を押す
  • プログラムがコンパイルされ、エラーが無ければそのままサンプルが実行される


advancedGraphics (iPhone版)

新規プロジェクトの作成場所

  • まずは、自分のプロジェクトを格納するためのフォルダを用意する
  • openFrameworksでは、プロジェクトを格納する場所が指定されている – それ以外の場所にプロジェクトを作成しても動かないので注意!!
  • プロジェクトを格納する場所
  • Mac版「of_preRelease_v0061_osxSL_FAT/apps/[任意のフォルダ]/」以下に
  • iPhone版「of_preRelease_v0061_iPhone_FAT-pre3/apps/[任意のフォルダ]/」以下に
  • 例えば自分用の新規プロジェクトを作成するフォルダを「myApps」とすると
  • Mac版「of_preRelease_v0061_osxSL_FAT/apps/myApps/」以下にプロジェクトのフォルダを作成
  • iPhone版「of_preRelease_v0061_iPhone_FAT-pre3/apps/myApps/」以下にプロジェクトのフォルダを作成

新規プロジェクトの作成

  • openFrameworksの新規プロジェクトを作成する際には、空のプロジェクトをフォルダごとコピーして使用する
  • Mac版 「of_preRelease_v0061_osxSL_FAT/apps/examples/emptyExample」
  • iPhone版 「of_preRelease_v0061_iPhone_FAT-pre3/apps/iPhoneExamples/emptyExample」
  • プロジェクトのフォルダごとコピーして、myAppsフォルダ以下に配置
  • コピーしたemptyExampleフォルダの名称を変更 – 「myNewApp」など
  • プロジェクトのフォルダ内にある、XCodeのプロジェクトファイルの名称も変更 – 「myNewApp.xcodeproj」など
  • XCodeのプロジェクトファイルをダブルクリックして、XCodeを起動
  • グループとファイル」の一覧の中の「ターゲット」の項目内のターゲットファイルのアイコンを右クリックして、「名称変更」を選択します
  • ターゲットの名称をプロジェクト名と同じ名前に – 「myNewApp」など


emptyExampleフォルダの場所


myAppsフォルダにコピー


プロジェクトのフォルダ名の変更


プロジェクトファイル名の変更


ターゲットの名称を変更


ターゲットの名称変更が完了した状態

OpneFrameworksのコード構造

  • さしあたって、編集する必要のあるファイルは、testApp.hとtestApp.cpp (iPhone版の場合は、testApp.mm) のみ!
  • 様々な既存のライブラリが結びついている
  • アプリケーション作成のための「糊」のような存在


openFrameworksの構造

プログラムを作成してみる

  • testApp.h
  • プログラムの中心となるヘッダファイル
  • testApp.cpp で使用される、変数、メソッドなどを宣言する場所

testApp.h (OS X 版)

testApp.h (iPhone版)

  • testApp.cpp (iPhone版の場合は、testApp.mm)
  • プログラムの中心となる実装ファイル
  • 画面の表示、アニメーション、マウスやキーボードとのインタラクションなど、主要な機能はここで定義される

testApp.cpp (OS X 版)

testApp.mm (iPhone版)

testApp内で使用される主な関数(メソッド)

  • testApp.hとtestApp.cpp (testApp.mm) 内には、様々な関数が宣言されている
  • void setup(); / void update(); / void draw(); / void keyPressed(int key); ..etc
  • それぞれの関数で処理される内容が来まっている
定義 機能
setup プログラムが起動した際に1度だけ実行される。初期化。
update 一定間隔で繰り返し実行される。draw関数の直前に実行される。変数の値の更新に使用する。
draw update関数の直後に実行される。描画に関する命令に使用する。
exit プログラムが終了する直前に実行される。
keyPressed キーボードを押した瞬間に実行される。
keyReleased キーボードを離した瞬間に実行される。
mouseMoved マウスを移動した際に実行される
mouseDragged マウスをドラッグした際に実行される
mousePressed マウスボタンを押した瞬間に実行される
mouseReleased マウスボタンを離した瞬間に実行される
touchDown 画面をタッチした瞬間に実行される(iPhone版のみ)
touchMoved 画面をタッチして移動した際に実行される(iPhone版のみ)
touchUp タッチしていた画面から離れた瞬間実行される(iPhone版のみ)
touchDoubleTap ダブルタップ(素早く2回画面をタップ)した瞬間に実行される(iPhone版のみ)

簡単な図形を描いてみる

  • 3つの円を描いてみる
  • アルファチャンネル(透明度)を指定
  • 色の混色を、加法混色に
  • testApp::draw() 関数に色を指定して円を描く命令を追加する

testApp.cpp (OS X 版)

testApp.mm (iPhone版)


実行結果(iPhone版)

アニメーションの基本構造

  • アニメーションを構成する3つの関数 – setup()、update()、draw()
  • setup()
  • 初期化関数
  • プログラムを実行したときに最初に1回だけ実行したい命令を記入
  • 画面書き換えの速度の設定(フレームレート)、背景色、外部データのロードなど
  • update()
  • メインループ関数、指定した画面書き換え速度の設定(フレームレート)の設定に従って、繰り返し実行、
  • draw()関数の前に実行され、プログラムに記憶された値を更新する際に使用される
  • draw()
  • 描画関数
  • update()関数と同様に、指定された画面書き換えの間隔(フレームレート)でプログラムが終了するまで、繰り返し実行
  • 画面の描画に関する命令を実行する

簡単なアニメーションを作成する

  • 画面全体を回転してみる
  • 回転角度は、angleという変数に格納
  • setup() – 表示の初期設定、背景色の定義、フレームレート設定、回転角度の初期化
  • update() – 回転角度を10°増加させる
  • draw() – 画面を描画

testApp.cpp (OS X 版)

testApp.mm (iPhone版)


実行結果(iPhone版)