Media Art II 2013 第5回：openFrameworks Addonを使用する

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Media Art II 2013
第5回：openFrameworks
Addonを使用する
2013年10月14日
多摩美術大学情報デザイン学科メディア芸術コース
田所淳

Addonとは?
‣ Addonとは、oepnFrameworksの機能を何らかの方法で拡張
するコード
‣ 「ofx」という接頭辞で始まる

Addonとは?
‣ openFrameworksに機能を拡張するためのライブラリー
‣ processingのLibrariesのような存在
‣ openFrameworks単体ではできなかった様々な機能を実現
‣ oF本体の開発者以外でも独...

Addonとは?
‣ ofxAddons.com リニューアル

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

Addonとは?
‣ Addonは何のためにあるの?
‣ 外部ライブラリやフレームワークをoFに統合
‣ ofxKinect, ofxMidi etc..
‣ 定型の作業、複雑な操作を単純化
‣ ofxQuadWrap、ofxControlPa...

Addonsとは?
コンピュータ・ビジョン / AR
ofxOpenCv, ofxARToolkitPlus
シミュレーション / 物理計算 / 流体力学
ofxBox2d, ofxMSAFluid, ofxMSAPhisics, ofxRui...

Addonsとは?
‣ 最初からいくつかのアドオンが付属してくる
アドオンの名称説明
ofxDirList ディレクトリの項目の一覧を生成
ofxXmlSettings アプリケーションの設定をXML形式で保存、読込み
ofxOsc Open...

Addonsとは?
‣ アドオンがインストールされている場所
‣ 《oFをインストールしたフォルダ》/addons/

Addonsとは?
‣ 今回は題材として2つのAddonを試してみます
‣ ofxGui：GUI
‣ 長らく待望されていた、oFオフィシャルGUI
‣ プログラムで頻繁に調整する必要のあるパラメータを
GUIから設定可能にする
‣ 設定した項目...

ofxGui

ofxGui
‣ 長らく待望されていた(?) openFrameworks開発チーム純正の
GUI を作成するためのAddon
‣ v.0.8.0 から配布パッケージに同梱
‣ 簡単にプロジェクトにGUIを追加可能

ofxGui
‣ Addon の使用法を知るにはサンプルをみるのが一番!
‣ Addon の多くにはサンプルが付属してる
‣ ofxGuiの場合は「of_v0.8.0_osx_release/examples/gui/」に
大量に掲載 (オフィ...

ofxGui
‣ まずは基本の「guiExample」をみてみる

ofxGui
‣ 「guiExample」に含まれる様々なGUIの機能
‣ 数値のスライダー (int, ﬂoat)
‣ カラー設定スライダー
‣ 位置 (ofVec2f)
‣ トグルボタン
‣ ボタン
‣ ... etc.

ofxGui
‣ ofxGuiで使用できる機能いろいろ
アドオンの名称説明
ofxIntSlider 整数型 (int) のスライダー
ofxFloatSlider 浮動小数点型 (ﬂoat) のスライダー
ofxVec2Slider 2次元...

ofxGui
‣ 簡単なプログラムで使い方をマスター
‣ まずは新規プロジェクトの生成方法から
‣ ProjectGeneratorの設定方法から

ofxGui
‣ プロジェクト名を設定したら、「Addons」ボタンを押す
←ココ

ofxGui
‣ ofxGuiのチェックボックスをチェックして戻る
‣ GENERATE PROJECT ボタンを押して完了

ofxGui
‣ プロジェクトを開いてみる
‣ addonsフォルダにAddonsが追加され
ているはず

ofxGui
‣ 以下のようなシンプルなGUI操作を実現したい
‣ 画面に円を描く
‣ 円の半径をスライダーで調整
‣ 円の色もスライダーで調整

#pragma once
#include "ofMain.h"
#include "ofxGui.h"
class testApp : public ofBaseApp{
public:
void setup();
void update()...

#pragma once
#include "ofMain.h"
#include "ofxGui.h"
class testApp : public ofBaseApp{
public:
void setup();
void update()...

ofxGui
‣ まず、gui.setup() でGUI生成
‣ そこへ、スライダーの初期設定を追加していく
‣ gui.add(スライダー.setup( 名前 , 初期値, 最小値, 最大値));

#include "testApp.h"
//--------------------------------------------------------------
void testApp::setup(){
ofSetFrameRat...

void testApp::draw(){
// パラメータを適用して円を描画
ofSetColor(color);
ofCircle(ofVec2f(position), radius);
// GUIを表示
gui.draw();
}
of...

ofxGui
‣ 実行結果

ofxGui
‣ ofxGuiのより実践的な練習
‣ 先週のVector FieldのサンプルのパラメータをGUIで操作

ofxGui
‣ 先週のVector FieldのサンプルのパラメータをGUIで操作
‣ GUIで操作するパラメータをスライダーで
‣ friction (摩擦) ﬂoat
‣ radius (パーティクル半径) ﬂoat
‣ color (パ...

‣ 既に生成されて、vectorに格納された大量のParticleのオブ
ジェクトに対してパラメータ変更するにはちょっと工夫が必要
‣ イベントリスナーをつかう
‣ 例えば、friction (摩擦) の場合
‣ testApp.hで、イベント...

‣ testApp.cpp スライダーを作成する際にイベントリスナーを追
加する
‣ 摩擦を変化させた際のイベントを記述する
‣ 同じようにして、半径や、各種ボタンに関しても
ofxGui
friction.addListener(this, ...

ofxGui
‣ 完成!!

ofxBox2d

ofxBox2d
‣ 本日のAddonsその2
‣ ２次元の物理シミュレーションのためのAddon
‣ ofxBox2d

ofxBox2d
‣ ofxBox2d：
‣ Box2DをoFのアドオン形式にしたもの
‣ Box2Dとは
‣ C++で書かれた、物理エンジン
‣ 重力や反発力、摩擦、衝突判定といった物理計算を複雑な
計算をすることなく利用できる
‣ Acti...

ofxBox2d
‣ Box2D Google Codeページ
‣ http://code.google.com/p/box2d/

ofxBox2d
‣ ofxBox2d → Box2Dを、openFrameworksのAddons形式にし
たもの
‣ oF v007用に大幅に機能が向上している
‣ http://vanderlin.cc/2011/07/ofxbox2d-...

Addonをプロジェクトに追加する
‣ Box2Dを題材にして、実際に空のプロジェクトにBox2Dを追加
してみる
‣ ProjectGeneratorから、ofxBox2dを追加する
‣ 必要となるAddonはofxBox2Dだけ

Box2D基本

Box2D基本
‣ Box2Dに描かれる図形は全てBox2Dの物理世界に配置
‣ testAppのsetup()関数内で、まずBox2Dの世界を初期化する
‣ 初期化の例
void testApp::setup() {
! ...
!
! bo...

Box2D基本
‣ Box2Dの物理計算を実行するには、testAppのupdate()関数
で、ofxBox2Dのupdate()メソッドを呼びだすだけ
‣ 自動的に全ての「重力」「摩擦」「衝突」「反射」などの物理
計算を行なってくれる
vo...

Box2D基本
‣ Box2Dの物理世界に配置する物体は、Box2Dで用いられる専用
のクラスから生成する
‣ 基本クラスを継承して、自分独自の形態にすることも可能
‣ ofxBox2Dで使用できる物体
クラス名形態
ofxBox2dCirc...

たくさんの円を配置してみる

たくさんの円を配置してみる
‣ まずはシンプルなサンプルを作成してみましょう
‣ Box2Dの物理世界に、沢山の円(ofxBox2dCircle)を配置してそ
の動きを観察
‣ 配置する円の数に制限を設けたくないので、ofxBox2dCircl...

Box2D基本：たくさんの円で物理演算
‣ testApp.h
‣#pragma once
#include "ofMain.h"
#include "ofxBox2d.h"
class testApp : public ofBaseApp {...

Box2D基本：たくさんの円で物理演算
‣ testApp.cpp - 1 of 2
#include "testApp.h"
void testApp::setup() {
! ofSetVerticalSync(true);
! ofBac...

Box2D基本：たくさんの円で物理演算
‣ testApp.cpp - 2 of 2
void testApp::keyPressed(int key) {
! // [c]キーを押すと、Circleを追加
! if(key == 'c') {...

Box2D基本：たくさんの円で物理演算
‣ 「c」キーを押すと、円が追加されていく

いろいろな形を描いてみる

いろいろな形を描いてみる
‣ さらに色々な形を描いてみましょう
‣ 円 - ofxBox2dCircle
‣ 四角形 - ofxBox2dRect
‣ ポリゴン - ofxBox2dPolygon
‣ それぞれ以下の操作でBox2Dの世界で追加...

いろいろな形を描いてみる
‣ testApp.h
#pragma once
#include "ofMain.h"
#include "ofxBox2d.h"
class testApp : public ofBaseApp {
!
publi...

いろいろな形を描いてみる
‣ testApp.cpp - 1 of 1
#include "testApp.h"
void testApp::setup() {
! ofSetVerticalSync(true);
! ofBackground...

いろいろな形を描いてみる
‣ testApp.cpp - 1 of 3
void testApp::draw() {
! // 円を描く
! ofFill();
! for(int i=0; i<circles.size(); i++) {
!...

いろいろな形を描いてみる
‣ testApp.cpp - 2 of 3
void testApp::keyPressed(int key) {
! // [c]キーを押すと、ofxBox2DCircleを追加
! if(key == 'c') ...

いろいろな形を描いてみる
‣ testApp.cpp - 3 of 3
void testApp::mouseDragged(int x, int y, int button) {
! drawing.addVertex(x, y);
}
vo...

いろいろな形を描いてみる
‣ マウスで描いた形にそって、円と四角が落ちていく

いろいろな形を描いてみる
‣ 参考：Line Rider
‣ 描いた線にそって、そり滑り!!

「ばね」の運動

「ばね」の運動
‣ ofxBox2dJoint - Box2Dで生成した図形の間を連結する
‣ パラメータを調節することで、固い棒のような性質から、やわ
らかい「ばね」の動きなど様々なシミュレーションが可能
‣ 配置した全ての円の間を「ばね」で...

いろいろな形を描いてみる
‣ testApp.h
#pragma once
#include "ofMain.h"
#include "ofxBox2d.h"
class testApp : public ofBaseApp {
!
publi...

「ばね」の運動
‣ testApp.cpp - 1 of 3
#include "testApp.h"
void testApp::setup() {
! ofSetVerticalSync(true);
! ofBackgroundHex(0...

「ばね」の運動
‣ testApp.cpp - 2 of 3
! // circlesを描く
! for(int i=0; i<rects.size(); i++) {
! ! ofFill();
! ! ofSetHexColor(0x336...

「ばね」の運動
‣ testApp.cpp - 3 of 3
! ! }
! }
}
void testApp::mouseDragged(int x, int y, int button) {
! for (int i = 0; i < re...

「ばね」の運動
‣ ばねで連結された物体が出現
‣ マウスをドラッグすると、動きまわる

「ばね」の運動
‣ 参考：SodaPlay (http://sodaplay.com/)
‣ ばねの連結でできた、生物たち

Share SlideShare

Facebook
Twitter
LinkedIn

Embed

Size (px)

Show related SlideShares at end

WordPress Shortcode

Link

Share
Email

Media Art II 2013 第6回：openFramewor... by Atsushi Tadokoro 24531 views
Media Art II 2013 第4回：openFramewor... by Atsushi Tadokoro 15635 views
メディア・アートII 第3回 openFrameworks基礎 OOo... by Atsushi Tadokoro 12861 views
Media Art II 2013 第7回 : openFramewo... by Atsushi Tadokoro 42009 views
メディア・アートII 第2回 openFrameworks基礎配列... by Atsushi Tadokoro 18500 views
メディア・アート II 第1回: ガイダンス openFramewor... by Atsushi Tadokoro 24775 views

Top clipped slide

View on SlideShare

1 of 65 Ad

1 of 65 Ad