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

デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

Embed Size (px)

Citation preview

Page 1: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

デジタルアートセミナー#2openFrameworksで学ぶ、クリエイティブ・コーディングSession 3: アドオンを作ろう!

2013年10月5日田所 淳

Page 2: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

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

Page 3: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

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

Page 4: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

アドオン(addons)って何?‣ アドオンとは、oepnFrameworksの機能を何らかの方法で拡張するコード

‣ 「ofx」という接頭辞で始まる

Page 5: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

何故アドオンを作るのか?‣ 外部ライブラリやフレームワークをoFに統合‣ ofxKinect, ofxMidi etc..

‣ 定型の作業、複雑な操作を単純化‣ ofxQuadWrap、ofxControlPanel etc...

Page 6: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

ofxAddons.comのアドオンをインストール‣ どうやって、ofxAddonsのアドオンをインストールすのか?

‣ 方法1: git コマンドをつかって、コードの複製をつくる

‣ 方法2: WebサイトからZip形式ダウンロード

$cd of_preRelease/addons/$git clone https://github.com/obviousjim/ofxSomeAddon

コレ

Page 7: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

アドオンの構造‣ 一般的なアドオンフォルダ内の構造

ofxMyAddon src

libs

example-xxx

bin

Page 8: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

アドオンの構造‣ 一般的なアドオンフォルダ内の構造

ofxMyAddon src

libs

example-xxx

bin

メインのフォルダ名はアドオンと同じ名前に

Page 9: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

アドオンの構造‣ 一般的なアドオンフォルダ内の構造

ofxMyAddon src

libs

example-xxx

bin

アドオンのソースコードはここに入るofxMyAddon.hofxMyAddon.cpp

Page 10: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

アドオンの構造‣ 一般的なアドオンフォルダ内の構造

ofxMyAddon src

libs

example-xxx

bin

外部ライブラリのインタフェイストとなっている場合には、ここにそのライブラリを格納する

Page 11: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

アドオンの構造‣ 一般的なアドオンフォルダ内の構造

ofxMyAddon src

libs

example-xxx

bin

サンプルファイルは、「example-xxx」というフォルダ名で格納する複数のサンプルを用意することも可能

Page 12: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

アドオンの構造‣ 一般的なアドオンフォルダ内の構造

ofxMyAddon src

libs

example-xxx

binアドオンが外部データ(画像、フォント、XML、テキスト...etc.)が必要な場合は、bin/data以下に格納する

Page 13: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

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

Page 14: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

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

Page 15: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

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

Page 16: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

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

‣ システムの状態をモニターできる汎用機能をつくりたい

Page 17: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

アドオンを作ろう!!‣ WebGL (JavaScript) でよく見かける、負荷をグラフで表示する機能が便利そう

‣ https://github.com/mrdoob/stats.js/

‣ ぱくっちゃえ!

Page 18: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

//--------------------------------------------------------------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

Page 19: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

アドオンを作ろう!!‣ アドオン → 要は、C++のクラス‣ よくつかう機能を、C++のクラスとして実装すれば、そのままアドオンとなる

‣ クラスについての詳細は、セミナー1日目のセッション「構造をつくる」を参照

‣ http://www.slideshare.net/tado/dac-ws02

Page 20: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

#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

Page 21: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

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

Page 22: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

アドオンを作ろう!!‣ これで、もうほとんど完成

‣ クラス名を、「Stats 」から「ofxStats」に変更‣ クラスの説明を、Markdown形式で記述して「README.md」という名前で保存

‣ クラスの機能をアピールするようなサムネイル画像を以下のフォーマットで作成‣ ファイル名「ofxaddons_thumbnail.png」‣ フォーマット: PNG‣ ファイルサイズ: 270 x 70

Page 23: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

アドオンを作ろう!!‣ アドオン公開前のチェックリスト

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

Page 24: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

アドオンを作ろう!!‣ どうやってofxAddons.comに公開するの?‣ どこに送るの?

‣ その必要はない(!!)‣ プロジェクト一式を、GitHubにアップロードするのみ

‣ ofxAddons.comが1日に1回Github内を巡回‣ 「ofx」から始まるリポジトリを自動追加

Page 25: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

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

Page 26: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

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

Page 27: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

アドオンをどんどん開発しよう!‣ アドオンの機能がとても便利な場合

‣ Step 1: openFrameworksの配布パッケージに内包される‣ ofxKinect, ofxOpenCV ..etc.

‣ Step 2: アドオンではなくコア機能としてとり込まれることも‣ ofxVectorMath → ofVectorMath‣ ofxThread → ofThread‣ ofxShader → ofShader

Page 28: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

DIWO! (Do It with Others)

Page 29: デジタルアートセミナー#2 openFrameworksで学ぶ、 クリエイティブ・コーディング Session 3: アドオンを作ろう!

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