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

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

on

  • 2,878 views

 

Statistics

Views

Total Views
2,878
Views on SlideShare
1,764
Embed Views
1,114

Actions

Likes
3
Downloads
26
Comments
0

5 Embeds 1,114

http://yoppa.org 784
https://twitter.com 219
http://of.studio23c.com 80
http://cloud.feedly.com 30
http://digg.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • デジタルアートセミナー#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 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.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(); 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)
    • ありがとうございました!!