Upload
atsushi-tadokoro
View
5.352
Download
5
Embed Size (px)
Citation preview
デジタルアートセミナー#2openFrameworksで学ぶ、クリエイティブ・コーディングSession 3: アドオンを作ろう!
2013年10月5日田所 淳
アドオンを作ろう!!‣ ofxAddons.com リニューアル
アドオンを作ろう!!‣ “make your own!” のページは必読!!‣ 日本語版つくりました → http://yoppa.org/blog/4909.html
アドオン(addons)って何?‣ アドオンとは、oepnFrameworksの機能を何らかの方法で拡張するコード
‣ 「ofx」という接頭辞で始まる
何故アドオンを作るのか?‣ 外部ライブラリやフレームワークをoFに統合‣ ofxKinect, ofxMidi etc..
‣ 定型の作業、複雑な操作を単純化‣ ofxQuadWrap、ofxControlPanel etc...
ofxAddons.comのアドオンをインストール‣ どうやって、ofxAddonsのアドオンをインストールすのか?
‣ 方法1: git コマンドをつかって、コードの複製をつくる
‣ 方法2: WebサイトからZip形式ダウンロード
$cd of_preRelease/addons/$git clone https://github.com/obviousjim/ofxSomeAddon
コレ
アドオンの構造‣ 一般的なアドオンフォルダ内の構造
ofxMyAddon src
libs
example-xxx
bin
アドオンの構造‣ 一般的なアドオンフォルダ内の構造
ofxMyAddon src
libs
example-xxx
bin
メインのフォルダ名はアドオンと同じ名前に
アドオンの構造‣ 一般的なアドオンフォルダ内の構造
ofxMyAddon src
libs
example-xxx
bin
アドオンのソースコードはここに入るofxMyAddon.hofxMyAddon.cpp
アドオンの構造‣ 一般的なアドオンフォルダ内の構造
ofxMyAddon src
libs
example-xxx
bin
外部ライブラリのインタフェイストとなっている場合には、ここにそのライブラリを格納する
アドオンの構造‣ 一般的なアドオンフォルダ内の構造
ofxMyAddon src
libs
example-xxx
bin
サンプルファイルは、「example-xxx」というフォルダ名で格納する複数のサンプルを用意することも可能
アドオンの構造‣ 一般的なアドオンフォルダ内の構造
ofxMyAddon src
libs
example-xxx
binアドオンが外部データ(画像、フォント、XML、テキスト...etc.)が必要な場合は、bin/data以下に格納する
アドオンを作ろう!!‣ やってみよう!!‣ 簡単な(ミニ)アドオンを作ってみる
アドオンを作ろう!!‣ 以前作成したミニ・アドオン ofxStats を例に‣ https://github.com/tado/ofxStats
アドオンを作ろう!!‣ 作成過程のサンプルファイルを下記からダウンロード!‣ https://github.com/tado/DigitalArtSeminar13
アドオンを作ろう!!‣ まず始めに、単体の機能としてtestAppに実装‣ ムービーをつくったんだけど、なんだかコマ落ちしてるということがよくある(cf. https://gist.github.com/tado/6846720)
‣ システムの状態をモニターできる汎用機能をつくりたい
アドオンを作ろう!!‣ WebGL (JavaScript) でよく見かける、負荷をグラフで表示する機能が便利そう
‣ https://github.com/mrdoob/stats.js/
‣ ぱくっちゃえ!
//--------------------------------------------------------------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
アドオンを作ろう!!‣ アドオン → 要は、C++のクラス‣ よくつかう機能を、C++のクラスとして実装すれば、そのままアドオンとなる
‣ クラスについての詳細は、セミナー1日目のセッション「構造をつくる」を参照
‣ http://www.slideshare.net/tado/dac-ws02
#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
アドオンを作ろう!!‣ 完成すると、現在の画面の描画速度をモニターできる機能が!
アドオンを作ろう!!‣ これで、もうほとんど完成
‣ クラス名を、「Stats 」から「ofxStats」に変更‣ クラスの説明を、Markdown形式で記述して「README.md」という名前で保存
‣ クラスの機能をアピールするようなサムネイル画像を以下のフォーマットで作成‣ ファイル名「ofxaddons_thumbnail.png」‣ フォーマット: PNG‣ ファイルサイズ: 270 x 70
アドオンを作ろう!!‣ アドオン公開前のチェックリスト
‣ プロジェクトについての説明をREADMEに記述したか?‣ サポートしているOSについてリストアップしたか?‣ プロジェクトのサンプルはあるか?‣ サンプルは、oFの最新のバージョンでコンパイルできるか?‣ オリジナルなコードがある場合、クレジットとリンクを明示‣ どのようなライセンスで配布するか明示‣ 商業的利用はOK?‣ 依存しているライブラリのライセンスについても明確に
アドオンを作ろう!!‣ どうやってofxAddons.comに公開するの?‣ どこに送るの?
‣ その必要はない(!!)‣ プロジェクト一式を、GitHubにアップロードするのみ
‣ ofxAddons.comが1日に1回Github内を巡回‣ 「ofx」から始まるリポジトリを自動追加
ミニ・アドオン実例‣ 同じような手順でつくった、別のアドオン‣ ofxGLSLSandbox: ‣ GLSL sandbox Gallery (http://glsl.heroku.com/) に投稿されているプログラムをoF内ですぐに確認できるアドオン
アドオンをどんどん開発しよう!‣ openFrameworks開発コミュニティーへの参加‣ コアへの開発参加はややハードルが高い‣ アドオン開発が、開発者コミュニティーに入っていく近道‣ Zachさん始め開発者達は、けっこうまめにアドオンやその開発者をチェックしてる
アドオンをどんどん開発しよう!‣ アドオンの機能がとても便利な場合
‣ Step 1: openFrameworksの配布パッケージに内包される‣ ofxKinect, ofxOpenCV ..etc.
‣ Step 2: アドオンではなくコア機能としてとり込まれることも‣ ofxVectorMath → ofVectorMath‣ ofxThread → ofThread‣ ofxShader → ofShader
DIWO! (Do It with Others)
ありがとうございました!!