0
デジタルアートセミナー#2
openFrameworksで学ぶ、
クリエイティブ・コーディング
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...
アドオンの構造
‣ 一般的なアドオンフォルダ内の構造
ofxMyAddon src
libs
example-xxx
bin
アドオンの構造
‣ 一般的なアドオンフォルダ内の構造
ofxMyAddon src
libs
example-xxx
bin
メインのフォルダ名は
アドオンと同じ名前に
アドオンの構造
‣ 一般的なアドオンフォルダ内の構造
ofxMyAddon src
libs
example-xxx
bin
アドオンのソースコードは
ここに入る
ofxMyAddon.h
ofxMyAddon.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();
cur...
アドオンを作ろう!!
‣ アドオン → 要は、C++のクラス
‣ よくつかう機能を、C++のクラスとして実装すれば、そのまま
アドオンとなる
‣ クラスについての詳細は、セミナー1日目のセッション「構造
をつくる」を参照
‣ http://ww...
#include "Stats.h"
Stats::Stats():top(0), left(0), width(80), height(48), maxValue(120), lapTime(100),
mode(0){
lastLap = ...
アドオンを作ろう!!
‣ 完成すると、現在の画面の描画速度をモニターできる機能が!
アドオンを作ろう!!
‣ これで、もうほとんど完成
‣ クラス名を、「Stats 」から「ofxStats」に変更
‣ クラスの説明を、Markdown形式で記述して「README.md」
という名前で保存
‣ クラスの機能をアピールするような...
アドオンを作ろう!!
‣ アドオン公開前のチェックリスト
‣ プロジェクトについての説明をREADMEに記述したか?
‣ サポートしているOSについてリストアップしたか?
‣ プロジェクトのサンプルはあるか?
‣ サンプルは、oFの最新のバージ...
アドオンを作ろう!!
‣ どうやってofxAddons.comに公開するの?
‣ どこに送るの?
‣ その必要はない(!!)
‣ プロジェクト一式を、GitHubにアップロードするのみ
‣ ofxAddons.comが1日に1回Github内を...
ミニ・アドオン実例
‣ 同じような手順でつくった、別のアドオン
‣ ofxGLSLSandbox:
‣ GLSL sandbox Gallery (http://glsl.heroku.com/) に投稿されて
いるプログラムをoF内ですぐに確...
アドオンをどんどん開発しよう!
‣ openFrameworks開発コミュニティーへの参加
‣ コアへの開発参加はややハードルが高い
‣ アドオン開発が、開発者コミュニティーに入っていく近道
‣ Zachさん始め開発者達は、けっこうまめにアドオ...
アドオンをどんどん開発しよう!
‣ アドオンの機能がとても便利な場合
‣ Step 1: openFrameworksの配布パッケージに内包される
‣ ofxKinect, ofxOpenCV ..etc.
‣ Step 2: アドオンではなく...
DIWO! (Do It with Others)
ありがとうございました!!
Upcoming SlideShare
Loading in...5
×

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

8,461

Published on

0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,461
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
45
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

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

    Clipping is a handy way to collect important slides you want to go back to later.

×