1. デジタルアートセミナー#2
openFrameworksで学ぶ、
クリエイティブ・コーディング
Session 3: アドオンを作ろう!
2013年10月5日
田所 淳

2. アドオンを作ろう!!
‣ ofxAddons.com リニューアル

3. アドオンを作ろう!!
‣ make your own! のページは必読!!
‣ 日本語版つくりました → http://yoppa.org/blog/4909.html

4. アドオン(addons)って何?
‣ アドオンとは、oepnFrameworksの機能を何らかの方法で拡張
するコード
‣ 「ofx」という接頭辞で始まる

5. 何故アドオンを作るのか?
‣ 外部ライブラリやフレームワークをoFに統合
‣ ofxKinect, ofxMidi etc..
‣ 定型の作業、複雑な操作を単純化
‣ ofxQuadWrap、ofxControlPanel etc...

6. ofxAddons.comのアドオンをインストール
‣ どうやって、ofxAddonsのアドオンをインストールすのか?
‣ 方法1: git コマンドをつかって、コードの複製をつくる
‣ 方法2: WebサイトからZip形式ダウンロード
$cd of_preRelease/addons/
$git clone https://github.com/obviousjim/ofxSomeAddon
コレ

7. アドオンの構造
‣ 一般的なアドオンフォルダ内の構造
ofxMyAddon src
libs
example-xxx
bin

8. アドオンの構造
‣ 一般的なアドオンフォルダ内の構造
ofxMyAddon src
libs
example-xxx
bin
メインのフォルダ名は
アドオンと同じ名前に

9. アドオンの構造
‣ 一般的なアドオンフォルダ内の構造
ofxMyAddon src
libs
example-xxx
bin
アドオンのソースコードは
ここに入る
ofxMyAddon.h
ofxMyAddon.cpp

10. アドオンの構造
‣ 一般的なアドオンフォルダ内の構造
ofxMyAddon src
libs
example-xxx
bin
外部ライブラリのインタ
フェイストとなっている場
合には、ここにそのライブ
ラリを格納する

11. アドオンの構造
‣ 一般的なアドオンフォルダ内の構造
ofxMyAddon src
libs
example-xxx
bin
サンプルファイルは、
「example-xxx」という
フォルダ名で格納する
複数のサンプルを用意する
ことも可能

12. アドオンの構造
‣ 一般的なアドオンフォルダ内の構造
ofxMyAddon src
libs
example-xxx
bin
アドオンが外部データ(画
像、フォント、XML、テキ
スト...etc.)が必要な場合
は、bin/data以下に格納す
る

13. アドオンを作ろう!!
‣ やってみよう!!
‣ 簡単な(ミニ)アドオンを作ってみる

14. アドオンを作ろう!!
‣ 以前作成したミニ・アドオン ofxStats を例に
‣ https://github.com/tado/ofxStats

15. アドオンを作ろう!!
‣ 作成過程のサンプルファイルを下記からダウンロード!
‣ https://github.com/tado/DigitalArtSeminar13

16. アドオンを作ろう!!
‣ まず始めに、単体の機能としてtestAppに実装
‣ ムービーをつくったんだけど、なんだかコマ落ちしてるという
ことがよくある(cf. https://gist.github.com/tado/6846720)
‣ システムの状態をモニターできる汎用機能をつくりたい

17. アドオンを作ろう!!
‣ WebGL (JavaScript) でよく見かける、負荷をグラフで表示す
る機能が便利そう
‣ https://github.com/mrdoob/stats.js/
‣ ぱくっちゃえ!

18. //--------------------------------------------------------------
void testApp::update(){
curretFps = ofGetFrameRate();
currentMs = (ofGetElapsedTimef() - lastMs) * 1000;
lastMs = ofGetElapsedTimef();
if (int(ofGetElapsedTimef() * 1000) / lapTime > lastLap) {
fpsList.push_front(curretFps);
if (fpsList.size() > width - padding * 2 + 1) {
fpsList.pop_back();
}
msList.push_front(currentMs);
if (msList.size() > width - padding * 2 + 1) {
msList.pop_back();
}
lastLap++;
}
}
//--------------------------------------------------------------
void testApp::draw(){
// sphere animation
ofPushStyle();
ofEnableDepthTest();
ofEnableLighting();
light.enable();
ofSetHexColor(0xcccccc);
アドオンを作ろう!!
‣ まずは、testAppの中で単体で実装してみた
‣ https://github.com/tado/DigitalArtSeminar13/tree/master/03_01statsSketch

19. アドオンを作ろう!!
‣ アドオン → 要は、C++のクラス
‣ よくつかう機能を、C++のクラスとして実装すれば、そのまま
アドオンとなる
‣ クラスについての詳細は、セミナー1日目のセッション「構造
をつくる」を参照
‣ http://www.slideshare.net/tado/dac-ws02

20. #include "Stats.h"
Stats::Stats():top(0), left(0), width(80), height(48), maxValue(120), lapTime(100),
mode(0){
lastLap = 0;
lastMs = 0;
padding = 3;
}
void Stats::update(){
curretFps = ofGetFrameRate();
currentMs = (ofGetElapsedTimef() - lastMs) * 1000;
lastMs = ofGetElapsedTimef();
if (int(ofGetElapsedTimef() * 1000) / lapTime > lastLap) {
fpsList.push_front(curretFps);
if (fpsList.size() > width - padding * 2 + 1) {
fpsList.pop_back();
}
msList.push_front(currentMs);
if (msList.size() > width - padding * 2 + 1) {
msList.pop_back();
}
lastLap++;
アドオンを作ろう!!
‣ 先程のプログラムのグラフ表示部分のみ、クラスに分割する
‣ https://github.com/tado/DigitalArtSeminar13/tree/master/03_02statsSketch_class

21. アドオンを作ろう!!
‣ 完成すると、現在の画面の描画速度をモニターできる機能が!

22. アドオンを作ろう!!
‣ これで、もうほとんど完成
‣ クラス名を、「Stats 」から「ofxStats」に変更
‣ クラスの説明を、Markdown形式で記述して「README.md」
という名前で保存
‣ クラスの機能をアピールするようなサムネイル画像を以下の
フォーマットで作成
‣ ファイル名「ofxaddons_thumbnail.png」
‣ フォーマット: PNG
‣ ファイルサイズ: 270 x 70

23. アドオンを作ろう!!
‣ アドオン公開前のチェックリスト
‣ プロジェクトについての説明をREADMEに記述したか?
‣ サポートしているOSについてリストアップしたか?
‣ プロジェクトのサンプルはあるか?
‣ サンプルは、oFの最新のバージョンでコンパイルできるか?
‣ オリジナルなコードがある場合、クレジットとリンクを明示
‣ どのようなライセンスで配布するか明示
‣ 商業的利用はOK?
‣ 依存しているライブラリのライセンスについても明確に

24. アドオンを作ろう!!
‣ どうやってofxAddons.comに公開するの?
‣ どこに送るの?
‣ その必要はない(!!)
‣ プロジェクト一式を、GitHubにアップロードするのみ
‣ ofxAddons.comが1日に1回Github内を巡回
‣ 「ofx」から始まるリポジトリを自動追加

25. ミニ・アドオン実例
‣ 同じような手順でつくった、別のアドオン
‣ ofxGLSLSandbox:
‣ GLSL sandbox Gallery (http://glsl.heroku.com/) に投稿されて
いるプログラムをoF内ですぐに確認できるアドオン

26. アドオンをどんどん開発しよう!
‣ openFrameworks開発コミュニティーへの参加
‣ コアへの開発参加はややハードルが高い
‣ アドオン開発が、開発者コミュニティーに入っていく近道
‣ Zachさん始め開発者達は、けっこうまめにアドオンやその開
発者をチェックしてる

27. アドオンをどんどん開発しよう!
‣ アドオンの機能がとても便利な場合
‣ Step 1: openFrameworksの配布パッケージに内包される
‣ ofxKinect, ofxOpenCV ..etc.
‣ Step 2: アドオンではなくコア機能としてとり込まれることも
‣ ofxVectorMath → ofVectorMath
‣ ofxThread → ofThread
‣ ofxShader → ofShader

28. DIWO! (Do It with Others)

29. ありがとうございました!!