More Related Content Similar to Media Art II 2013 第5回：openFrameworks Addonを使用する Similar to Media Art II 2013 第5回：openFrameworks Addonを使用する (20) More from Atsushi Tadokoro More from Atsushi Tadokoro (20) 1. Media Art II 2013
第5回：openFrameworks
Addonを使用する
2013年10月14日
多摩美術大学 情報デザイン学科 メディア芸術コース
田所 淳
7. Addonsとは?
コンピュータ・ビジョン / AR
ofxOpenCv, ofxARToolkitPlus
シミュレーション / 物理計算 / 流体力学
ofxBox2d, ofxMSAFluid, ofxMSAPhisics, ofxRuiPhusics2d
音響
ofxMidi, ofxOsc, ofxSoundObj, ofxSuperCollider
デバイス / ハードウェア
ofxiPhone, ofxSuddenMotion
8. Addonsとは?
‣ 最初からいくつかのアドオンが付属してくる
アドオンの名称 説明
ofxDirList ディレクトリの項目の一覧を生成
ofxXmlSettings アプリケーションの設定をXML形式で保存、読込み
ofxOsc Open Sound ControlをOpenFrameworksで使用する
ofxOpenCv
画像処理・画像認識用のＣ言語ライブラリOpenCVを使用
できるようにする
ofxNetwork
ネットワーク通信のプロトコル、TCPとUDPを使用可能に
する、マルチキャストにも対応
ofxThred クロスプラットフォームでスレッドの管理を実現
ofxVectorGraphics OpenFrameworksからPostscriptを生成し出力する
ofx3dModelLoader 3ds形式の3DモデルをOpenFrameworksに読みこむ
22. #pragma once
#include "ofMain.h"
#include "ofxGui.h"
class testApp : public ofBaseApp{
public:
void setup();
void update();
void draw();
void keyPressed(int key);
void keyReleased(int key);
void mouseMoved(int x, int y );
void mouseDragged(int x, int y, int button);
void mousePressed(int x, int y, int button);
void mouseReleased(int x, int y, int button);
void windowResized(int w, int h);
void dragEvent(ofDragInfo dragInfo);
void gotMessage(ofMessage msg);
};
ofxGui
‣ まず始めに、testApp.h の冒頭で ofxGui を 読み込む
←ココ
23. #pragma once
#include "ofMain.h"
#include "ofxGui.h"
class testApp : public ofBaseApp{
public:
void setup();
void update();
void draw();
...
ofxPanel gui;
ofxFloatSlider radius;
ofxColorSlider color;
ofxVec2Slider position;
};
ofxGui
‣ 必要なパーツを全てインスタンス化
←ココ
25. #include "testApp.h"
//--------------------------------------------------------------
void testApp::setup(){
ofSetFrameRate(60);
ofBackground(127);
ofSetCircleResolution(32);
// colorの初期値、最小値、最大値を設定
ofColor initColor = ofColor(0, 127, 255, 255);
ofColor minColor = ofColor(0,0,0,0);
ofColor maxColor = ofColor(255,255,255,255);
// positionの初期値、最小値、最大値を設定
ofVec2f initPos = ofVec2f(ofGetWidth()/2, ofGetHeight()/2);
ofVec2f minPos = ofVec2f(0, 0);
ofVec2f maxPos = ofVec2f(ofGetWidth(), ofGetHeight());
gui.setup();
gui.add(radius.setup("radius", 200, 0, 400));
gui.add(color.setup("color", initColor, minColor, maxColor));
gui.add(position.setup("position", initPos, minPos, maxPos));
}
ofxGui
‣ testApp.cpp 必要なパーツを全てインスタンス化
29. ofxGui
‣ 先週のVector FieldのサンプルのパラメータをGUIで操作
‣ GUIで操作するパラメータをスライダーで
‣ friction (摩擦) float
‣ radius (パーティクル半径) float
‣ color (パーティクル色) ofColor ...etc.
‣ イベントを発生させるボタン
‣ パーティクルの位置をリセット
‣ Vector Fieldの力をリセット
‣ Vector Fieldの力をランダマイズ
31. ‣ testApp.cpp スライダーを作成する際にイベントリスナーを追
加する
‣ 摩擦を変化させた際のイベントを記述する
‣ 同じようにして、半径や、各種ボタンに関しても
ofxGui
friction.addListener(this, &testApp::frictionChanged);
void testApp::frictionChanged(float & friction){
for (int i = 0; i < particles.size(); i++){
particles[i].friction = friction;
}
}
37. ofxBox2d
‣ ofxBox2d → Box2Dを、openFrameworksのAddons形式にし
たもの
‣ oF v007用に大幅に機能が向上している
‣ http://vanderlin.cc/2011/07/ofxbox2d-007/
45. Box2D基本：たくさんの円で物理演算
‣ testApp.h
‣#pragma once
#include "ofMain.h"
#include "ofxBox2d.h"
class testApp : public ofBaseApp {
!
public:
!
! void setup();
! void update();
! void draw();
! void keyPressed(int key);
!
! ofxBox2d box2d;!// Box2Dの世界を構築
! vector <ofxBox2dCircle> circles;!// Circleを格納する動的配列
};
46. Box2D基本：たくさんの円で物理演算
‣ testApp.cpp - 1 of 2
#include "testApp.h"
void testApp::setup() {
! ofSetVerticalSync(true);
! ofBackgroundHex(0x000000);
!
! box2d.init(); // Box2Dの世界の初期化
! box2d.setGravity(0, 10); // 重力を下向きに10
! box2d.createBounds(); // 地面を生成
! box2d.setFPS(30.0); // Box2Dの世界でのFPS
! box2d.registerGrabbing(); // 物体に接触可能に
}
void testApp::update() {
! box2d.update(); // Box2Dの更新
}
void testApp::draw() {
! // circlesを描く
! for(int i=0; i<circles.size(); i++) {
! ! ofSetHexColor(0x3366ff);
! ! circles[i].draw();
! }
}
47. Box2D基本：たくさんの円で物理演算
‣ testApp.cpp - 2 of 2
void testApp::keyPressed(int key) {
! // [c]キーを押すと、Circleを追加
! if(key == 'c') {
! ! float r = ofRandom(4, 20); //半径をランダムに
! ! ofxBox2dCircle circle; //円
! ! circle.setPhysics(3.0, 0.53, 0.1); //物理法則を追加
! ! // Box2dの世界に生成した円を追加
! ! circle.setup(box2d.getWorld(), mouseX, mouseY, r);
! ! circles.push_back(circle); // 動的配列に追加
! }
}
50. いろいろな形を描いてみる
‣ さらに色々な形を描いてみましょう
‣ 円 - ofxBox2dCircle
‣ 四角形 - ofxBox2dRect
‣ ポリゴン - ofxBox2dPolygon
‣ それぞれ以下の操作でBox2Dの世界で追加
‣ 円 - 「c」キーを押すと追加
‣ 四角形 - 「r」キーを押すと追加
‣ ポリゴン - 画面をマウスでドラッグして描く
51. いろいろな形を描いてみる
‣ testApp.h
#pragma once
#include "ofMain.h"
#include "ofxBox2d.h"
class testApp : public ofBaseApp {
!
public:
!
! void setup();
! void update();
! void draw();
! void keyPressed(int key);
! void mouseDragged(int x, int y, int button);
! void mousePressed(int x, int y, int button);
! void mouseReleased(int x, int y, int button);
!
! ofxBox2d box2d;!// Box2Dの世界を構築
! vector <ofxBox2dCircle> circles;!// Circleを格納する動的配列
! vector <ofxBox2dRect> rects;!// Rectを格納する動的配列
! ofPolyline drawing; // 画面に描く線
! ofxBox2dPolygon polyLine; // 描いた線から、多角形の物体を生成
};
52. いろいろな形を描いてみる
‣ testApp.cpp - 1 of 1
#include "testApp.h"
void testApp::setup() {
! ofSetVerticalSync(true);
! ofBackgroundHex(0x000000);
!
! box2d.init(); // Box2Dの世界の初期化
! box2d.setGravity(0, 10); // 重力を下向きに10
! box2d.setFPS(30.0); // Box2Dの世界でのFPS
! box2d.registerGrabbing(); // 物体に接触可能に
!
! polyLine.setPhysics(0.0, 0.5, 0.5);
! polyLine.create(box2d.getWorld());!
}
void testApp::update() {
! box2d.update(); // Box2Dの更新
}
53. いろいろな形を描いてみる
‣ testApp.cpp - 1 of 3
void testApp::draw() {
! // 円を描く
! ofFill();
! for(int i=0; i<circles.size(); i++) {
! ! ofSetHexColor(0x3366ff);
! ! circles[i].draw();
! }
!
! // 四角形を描く
! for(int i=0; i<rects.size(); i++) {
! ! ofSetHexColor(0xff6633);
! ! rects[i].draw();
! }
!
! // 多角形(描画した線分)を描く
! ofNoFill();
! ofSetHexColor(0xffffff);
! if(drawing.size()==0) {
! ! polyLine.draw();!
! }! else {
! ! drawing.draw();!
! }
}
54. いろいろな形を描いてみる
‣ testApp.cpp - 2 of 3
void testApp::keyPressed(int key) {
! // [c]キーを押すと、ofxBox2DCircleを追加
! if(key == 'c') {
! ! float r = ofRandom(4, 20); //半径をランダムに
! ! ofxBox2dCircle circle; //円
! ! circle.setPhysics(3.0, 0.53, 0.1); //物理法則を追加
! ! // Box2dの世界に生成した円を追加
! ! circle.setup(box2d.getWorld(), mouseX, mouseY, r);
! ! circles.push_back(circle); // 動的配列に追加
! }
! // [r]キーを押すと、ofxBox2DRectを追加
! if(key == 'r') {
! ! float w = ofRandom(4, 20); // 幅をランダムに
! ! float h = ofRandom(4, 20); // 高さをランダムに
! ! ofxBox2dRect rect; // 四角形
! ! rect.setPhysics(3.0, 0.53, 0.1); // 物理法則を追加
! ! // Box2dの世界に生成した四角形を追加
! ! rect.setup(box2d.getWorld(), mouseX, mouseY, w, h);
! ! rects.push_back(rect); // 動的配列に追加
! }
}
55. いろいろな形を描いてみる
‣ testApp.cpp - 3 of 3
void testApp::mouseDragged(int x, int y, int button) {
! drawing.addVertex(x, y);
}
void testApp::mousePressed(int x, int y, int button) {
! // もしも既に多角形が存在していたら、消去する
! if(polyLine.isBody()) {
! ! drawing.clear();
! ! polyLine.destroy();!
! }
! // 描画中の線分に辺を追加
! drawing.addVertex(x, y);
}
void testApp::mouseReleased(int x, int y, int button) {
! // 描画していた多角形を確定
! drawing.setClosed(false);
! drawing.simplify();
! // ofxBox2dPlyLineとして生成
! polyLine.addVertexes(drawing);
! polyLine.simplify();
! polyLine.setPhysics(0.0, 0.5, 0.5);
! polyLine.create(box2d.getWorld());
! drawing.clear();
}
59. 「ばね」の運動
‣ ofxBox2dJoint - Box2Dで生成した図形の間を連結する
‣ パラメータを調節することで、固い棒のような性質から、やわ
らかい「ばね」の動きなど様々なシミュレーションが可能
‣ 配置した全ての円の間を「ばね」で繋いでみる
60. いろいろな形を描いてみる
‣ testApp.h
#pragma once
#include "ofMain.h"
#include "ofxBox2d.h"
class testApp : public ofBaseApp {
!
public:
!
! void setup();
! void update();
! void draw();
! //void keyPressed(int key);
! void mouseReleased(int x, int y, int button);
! void mouseDragged(int x, int y, int button);
!
! ofxBox2d box2d;!// Box2Dの世界を構築
! vector <ofxBox2dRect> rects;!// Circleを格納する動的配列
! vector <ofxBox2dJoint> joints; // バネの配列
};
61. 「ばね」の運動
‣ testApp.cpp - 1 of 3
#include "testApp.h"
void testApp::setup() {
! ofSetVerticalSync(true);
! ofBackgroundHex(0x000000);
!
! box2d.init(); // Box2Dの世界の初期化
! box2d.setGravity(0, 0); // 無重力に
! box2d.createBounds(); // 地面を生成
! box2d.setFPS(30.0); // Box2Dの世界でのFPS
! box2d.registerGrabbing(); // 物体に接触可能に
}
void testApp::update() {
! box2d.update(); // Box2Dの更新
}
void testApp::draw() {
! // バネを描く
! for(int i=0; i<joints.size(); i++) {
! ! ofNoFill();
! ! ofSetHexColor(0x333333);
! ! joints[i].draw();
! }
62. 「ばね」の運動
‣ testApp.cpp - 2 of 3
! // circlesを描く
! for(int i=0; i<rects.size(); i++) {
! ! ofFill();
! ! ofSetHexColor(0x3366ff);
! ! rects[i].draw();
! }
}
void testApp::mouseReleased(int x, int y, int button) {
! ofxBox2dRect rect; //円
! rect.setPhysics(10.0, 0.99, 0.0);
!
! // Box2dの世界に生成した円を追加
! rect.setup(box2d.getWorld(), x, y, 2, 2);
! rects.push_back(rect); // 動的配列に追加
!
! if (rects.size() > 1) {
! ! for (int i = 0; i < rects.size()-1; i++) {
! ! ! ofxBox2dJoint joint;
! ! ! joint.setup(box2d.getWorld(),
rects[rects.size()-1].body, rects[i].body);
! ! ! joint.setFrequency(0.4);
! ! ! joint.setDamping(0.1);
! ! ! joint.setLength(200);
! ! ! joints.push_back(joint);
63. 「ばね」の運動
‣ testApp.cpp - 3 of 3
! ! }
! }
}
void testApp::mouseDragged(int x, int y, int button) {
! for (int i = 0; i < rects.size()-1; i++) {
! ! rects[i].addRepulsionForce(x, y, -1);
! }
}
