Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス

Media Art II
openFrameworks
アプリ間の通信とタンジブルなインターフェイス
openSoundControl, reacTIVision
多摩美術大学情報デザイン学科情報芸術コース
2013年12月9日
田所淳

Open Sound Control (OSC) について

Open Sound Control とは
‣ Open Sound Control のプロジェクトのWebページより
!

‣ Open Sound Control (OSC) is a protocol for communication
among computers, sound synthesizers, and other
multimedia devices that is optimized for modern
networking technology. Bringing the beneﬁts of modern
networking technology to the world of electronic musical
instruments, OSC's advantages include interoperability,
accuracy, ﬂexibility, and enhanced organization and
documentation.

‣ Open Sound Control のプロジェクトのWebページより
!

‣ Open Sound Control (OSC) は、コンピュータやシンセサイ
ザーや、その他のマルチメディアデバイス同士でコミュニケー
ションするための通信プロトコルです。現代のネットワーク
技術の成果を電子楽器の世界に適用することで、OSCは、相
互運用性、正確さ、柔軟さ、また、拡張性に優れた性能を持
ちます。

‣ Open Sound Control のポイント
!

‣ ポストMIDIを目指す
‣ インターネットのプロトコルの仕組みを、音楽やマルチメディ
アの世界へ適用 (UDP/IPを利用)
‣ 多くの機器、言語、アプリケーションに実装済み
‣ オープンでシンプルな命名規則 ← URLの仕組みに似ている

‣ Open Sound Control が実装された主な環境
!
‣ サウンド系
‣ Max/MSP
‣ Pd
‣ SuperCollider
‣ Chuck
‣ Csound
‣ Reactor など
!
‣ ビジュアル系
‣ Flash ( ﬂosc )
‣ Processing
‣ OpenFrameworks
‣ QuartzComposer
‣ vvvv

!

‣ デバイス
‣ Lemur
‣ monome

‣ iPhoneやiPadからも!

OSCのプロトコル
‣ では、実際にOSCのプロトコルは、どんななっているのか?
!
!

/trigger/inst/a 440 0.1 “hello”
OSC Message

OSC Arguments

•

情報内容をラベリング

•

•

URLに同様の名前付けの規則

•

情報の本体
いろいろな型を同時に含めることがで
きる

OSC Message
‣ OSC Messageのアドレスパターン → URLのような階層構造

OSC の通信のしくみ
‣ 送信側：IPアドレスとportを指定

IP: 192.168.1.3
port: 57120

‣ 受信側：ポートをオープン

IP: 192.168.1.3
port: 57120

‣ 接続

IP: 192.168.1.3
port: 57120

‣ 送信側：情報を送信
‣ 受信側：受信

/trigger/inst/a 440 0.1

hello

IP: 192.168.1.3
port: 57120

‣ 受信側：OSCのメッセージを解釈、アプリケーションに適用
/trigger/inst/a 440 0.1

hello

IP: 192.168.1.3
port: 57120

openFrameworksのアプリケーション同士でOSC
を送受信する

アプリケーション同士でOSCを送受信する
‣ プロジェクトの準備
‣ OSCの送信側、受信側双方のaddons内にofxOscを追加する

‣ まず始めに、openFrameworksのアプリケーション同士でOSC
を送受信してみる
!

‣ まずは簡単なサンプル
‣ マウスの位置とマウスボタンの状態をOSCで表現してみる

‣ マウスの位置とマウスボタンの状態
!

‣ マウスの位置
‣ メッセージ：/mouse/position
‣ 引数：X座標 Y座標 (例： 320 240)
!

‣ マウスボタンの状態
‣ メッセージ：/mouse/button
‣ 引数：ボタンの状態 ( up , down )

‣ 実際にやりとりされるOSCメッセージの例：
!

‣ マウスを座標(480, 240)に動かした場合
‣ /mouse/position 480 240
!

‣ マウスボタンを押した瞬間
‣ /mouse/button down
!

‣ マウスボタンを離した瞬間
‣ /mouse/button up

‣ 実際にOSCがやりとりされている様子を視覚的に表現
!

‣ 送信側のマウス位置 → 受信側では円で表示
‣ マウスボタンを離している時 → 色は青
‣ マウスボタンを押している時 → 色は赤

OSC送信側プログラム
‣ testApp.h
#pragma once

!

#include "ofMain.h"
#include "ofxOsc.h"

!

#define HOST "127.0.0.1" // 受信側のIPアドレス
#define PORT 8000 // 受信側のポート番号

!

class testApp : public ofBaseApp{
public:
void
void
void
void
void
void
void

setup();
update();
draw();
mouseMoved(int x, int y );
mouseDragged(int x, int y, int button);
mousePressed(int x, int y, int button);
mouseReleased(int x, int y, int button);

//OSCメッセージの送信者
ofxOscSender sender;
};

‣ testApp.cpp
#include "testApp.h"

!

void testApp::setup(){
ofBackground(0, 0, 0);
// 指定したIPアドレスとポート番号でサーバーに接続
sender.setup(HOST, PORT);
}

!

void testApp::update(){ }

!

void testApp::draw(){
// 現在のマウスの場所に円を描画
ofSetColor(255, 255, 255);
ofCircle(mouseX, mouseY, 10);
}

!

void testApp::mouseMoved(int x, int y){
// OSCメッセージの準備
ofxOscMessage m;
// OSCアドレスの指定
m.setAddress("/mouse/position");
// OSC引数として、現在のマウスの座標(x, y)を送信
m.addIntArg(x);
m.addIntArg(y);
// メッセージを送信
sender.sendMessage(m);

‣ testApp.cpp
void testApp::mouseDragged(int x, int y, int button){
//OSCメッセージの準備
ofxOscMessage m;
//OSCアドレスの指定
m.setAddress("/mouse/position");
//OSC引数として、現在のマウスの座標(x, y)を送信
m.addIntArg(x);
m.addIntArg(y);
//メッセージを送信
}

!

void testApp::mousePressed(int x, int y, int button){
ofxOscMessage m;
m.setAddress("/mouse/button");
//OSC引数として、マウス状態"down"を送信
m.addStringArg("down");
}

‣ testApp.cpp
void testApp::mouseReleased(int x, int y, int button){
ofxOscMessage m;
m.setAddress("/mouse/button");
//OSC引数として、マウス状態"up"を送信
m.addStringArg("up");
sender.sendMessage( m );
}

OSC受信側プログラム
‣ testApp.h
#pragma once

!

#include "ofMain.h"
#include "ofxOsc.h"

!

// OSCを受信するポート番号を設定
#define PORT 8000

!

public:

!

void setup();
void update();
void draw();
void dumpOSC(ofxOscMessage m); //OSCメッセージを出力
// OSCメッセージを受信するインスタンス

!
!

ofxOscReceiver receiver;
// 受信したマウス座標
ofPoint remoteMouse;
// 受信したマウスボタンの状態 ("up", "down")
string mouseButtonState;

‣ testApp.cpp

!

//指定したポートで接続
receiver.setup( PORT );
//値を初期化
mouseX = 0;
mouseY = 0;
mouseButtonState = "";
}

!

void testApp::update(){
// 現在順番待ちのOSCメッセージがある間は受信を続ける
while(receiver.hasWaitingMessages()){
//次のメッセージを取得
ofxOscMessage m;
receiver.getNextMessage(&m);
// メッセージが /mouse/position ならマウスの位置を取得
if (m.getAddress() == "/mouse/position"){
remoteMouse.x = m.getArgAsInt32(0);
remoteMouse.y = m.getArgAsInt32(1);

‣ testApp.cpp
!

// メッセージが /mouse/button ならマウスボタンの状態を取得
else if (m.getAddress() == "/mouse/button"){
mouseButtonState = m.getArgAsString(0) ;
}
//OSCメッセージをそのままコンソールに出力
dumpOSC(m);
}

}

!

int radius;

!

// マウスボタンが押されていたら、赤い円を描画
if (mouseButtonState == "down") {
radius = 20;
ofSetColor(255, 127, 0);
} else {
// そうでなければ、青い円を描画
radius = 10;
ofSetColor(0, 127, 255);
}
ofCircle(remoteMouse.x, remoteMouse.y, radius);

}

‣ testApp.cpp
// OSCメッセージをコンソールに出力する関数
void testApp::dumpOSC(ofxOscMessage m) {
string msg_string;
msg_string = m.getAddress();
for (int i=0; i<m.getNumArgs(); i++ ) {
msg_string += " ";
if(m.getArgType(i) == OFXOSC_TYPE_INT32)
msg_string += ofToString( m.getArgAsInt32(i));
else if(m.getArgType(i) == OFXOSC_TYPE_FLOAT)
msg_string += ofToString( m.getArgAsFloat(i));
else if(m.getArgType(i) == OFXOSC_TYPE_STRING)
msg_string += m.getArgAsString(i);
}
cout << msg_string << endl;
}

‣ OscSenderの画面でマウスを操作
‣ OscReceiverに現在のマウスの位置と状態が表示される

‣ OSCでやりとりするメッセージは、同一のマシン内でだけでは
ない
‣ IP網を介して、ネットワークで通信することが可能

OSC

‣ 教室内のMac同士でOSC通信してみる
‣ お互いのIPアドレスを調べる
‣ システム環境設定 → ネットワークの「IPアドレス」の数値

‣ 送信先のIPに、OscSenderのtestApp.hのHOSTを変更
#pragma once

!

#include "ofMain.h"
#include "ofxOsc.h"

!

#define HOST "192.168.10.8" // 受信側のIPアドレス

!

#define PORT 8000 // 受信側のポート番号

!

public:
void
void
void
void
void
void
void

setup();
update();
draw();
mouseMoved(int x, int y );
mouseDragged(int x, int y, int button);
mousePressed(int x, int y, int button);
mouseReleased(int x, int y, int button);

//OSCメッセージの送信者
};

‣ OscSenderでマウスを動かすと、ネットワークに接続された他
のマシンの円を動かすことができるはず

複数のマシンでアプリケーションを共有

複数のPCでアプリケーションを共有
‣ では次に、複数のPCで一つの端末のアプリケーションを共有す
るプログラムを作成してみる

‣ 外部のPCからアクセスがあるたびに、輪が追加され波紋のよう
に拡がっていくプログラム

‣ 送信側: testApp.h
#pragma once

!

#include "ofMain.h"
#include "ofxOsc.h"
#include "Ring.h"

!

#define HOST "127.0.0.1"
#define PORT 8000

!

public:
void setup();
void update();
void draw();
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);

!

// OSCメッセージの送信

vector <Ring *> rings;
};


//輪の動的配列

‣ 送信側: testApp.h
#pragma once

!

#include "ofMain.h"
#include "ofxOsc.h"
#include "Ring.h"

!

#define HOST "127.0.0.1"
#define PORT 8000

!

public:
void setup();
void update();
void draw();
void mouseMoved(int x, int y );
void mousePressed(int x, int y, int button);
void mouseReleased(int x, int y, int button);

!

// OSCメッセージの送信

vector <Ring *> rings;
};


// 輪の動的配列

‣ 送信側: testApp.cpp

!

ofSetFrameRate(60);
//指定したIPアドレスとポート番号でサーバーに接続
sender.setup( HOST, PORT );
}

!

//Ring更新
for(vector <Ring *>::iterator it = rings.begin(); it != rings.end();){
(*it)->update();
if ((*it)->dead) {
delete (*it);
it = rings.erase(it);
} else {
++it;
}
}
}

!

//Ringを描画
for(vector <Ring *>::iterator it = rings.begin(); it != rings.end(); ++it){
(*it)->draw();
}

!

void testApp::mouseMoved(int x, int y ){
ofxOscMessage m;
m.setAddress( "/mouse/position" );
m.addIntArg( x );
m.addIntArg( y );
}

!

void testApp::mousePressed(int x, int y, int button){
ofxOscMessage m;
m.setAddress( "/mouse/button" );
//OSC引数として、マウス状態"down"を送信
m.addStringArg( "down" );
m.addIntArg( x );
m.addIntArg( y );
}

void testApp::mouseReleased(int x, int y, int button){
ofxOscMessage m;
m.setAddress( "/mouse/button" );
//OSC引数として、マウス状態"up"を送信
m.addStringArg( "up" );
m.addIntArg( x );
m.addIntArg( y );
//Ringを追加
rings.push_back(new Ring(ofPoint(x, y)));
}

‣ 送信側: Ring.h
#pragma once
#include "ofMain.h"

!

class Ring {
public:
Ring(ofPoint pos);
void update();
void draw();
ofPoint pos;
float radius;
float radiusSpeed;
bool dead;
};

‣ 送信側: Ring.cpp
#include "Ring.h"

!

Ring::Ring(ofPoint _pos){
pos = _pos;
radius = 0;
radiusSpeed = 0.5;
dead = false;
}
void Ring::update(){
radius += radiusSpeed;
if (radius > ofGetWidth()){
dead = true;
}
}
void Ring::draw(){
ofSetCircleResolution(64);
ofEnableBlendMode(OF_BLENDMODE_ADD);
ofEnableSmoothing();
ofSetLineWidth(1);
ofPushMatrix();
ofTranslate(pos.x, pos.y);
ofNoFill();
ofSetColor(63, 127, 255, 127 - radius * 127 / ofGetHeight());
ofCircle(0, 0, radius);
ofFill();
ofSetColor(63, 127, 255, 31 - radius * 31 / ofGetHeight());
ofPopMatrix();

‣ 受信側: testApp.h
#pragma once

!

#include "ofMain.h"
#include "ofxOsc.h"
#include "Ring.h"

!

//ポート番号を設定
#define PORT 8000

!

public:
void setup();
void update();
void draw();
void dumpOSC(ofxOscMessage m);
ofxOscReceiver receiver;
ofPoint remoteMouse;
string mouseButtonState;
string oscString;
vector <Ring *> rings; // 拡大する輪"Ring"の配列
};

‣ 受信側: testApp.cpp

!

//指定したポートで接続
receiver.setup( PORT );
ofSetFrameRate(60);
//値を初期化
mouseX = 0;
mouseY = 0;
}

!

//現在順番待ちのOSCメッセージがあるか確認
while(receiver.hasWaitingMessages()){
//次のメッセージを取得

!

ofxOscMessage m;
oscString = m.getAddress();
receiver.getNextMessage(&m);
//マウスの位置を取得
if(m.getAddress() == "/mouse/position"){
remoteMouse.x = m.getArgAsInt32(0);
remoteMouse.y = m.getArgAsInt32(1);

!

//マウスボタンの状態を取得
else if (m.getAddress() == "/mouse/button") {
mouseButtonState = m.getArgAsString(0) ;
}
//OSCメッセージをそのままコンソールに出力
dumpOSC(m);
}
//マウスアップされたら、新規にRingを追加
if(mouseButtonState == "up"){
rings.push_back(new Ring(ofPoint(remoteMouse.x, remoteMouse.y)));
}
//Ring更新
for(vector <Ring *>::iterator it = rings.begin(); it != rings.end();){
(*it)->update();
if ((*it)->dead) {
delete (*it);
it = rings.erase(it);
} else {
++it;
}
}

//Ringを描画
for(vector <Ring *>::iterator it = rings.begin(); it != rings.end(); ++it){
(*it)->draw();
}
}

!

//OSCメッセージをコンソールに出力する関数
void testApp::dumpOSC(ofxOscMessage m) {
string msg_string;
msg_string = m.getAddress();
for (int i=0; i<m.getNumArgs(); i++ ) {
msg_string += " ";
if(m.getArgType(i) == OFXOSC_TYPE_INT32)
msg_string += ofToString( m.getArgAsInt32(i));
else if(m.getArgType(i) == OFXOSC_TYPE_FLOAT)
msg_string += ofToString( m.getArgAsFloat(i));
else if(m.getArgType(i) == OFXOSC_TYPE_STRING)
msg_string += m.getArgAsString(i);
}
cout << msg_string << endl;
}

‣ 複数のPCから1台のアプリに波紋を追加!!

reacTIVision + ofxTUIO で
タンジブルなインタフェイスを作る

reacTIVisionでタンジブルなインタフェイス
‣ OSCを使用した、より実践的なプロジェクトの例
‣ reacTIVisionを使用して、タンジブル(Tangible)なユーザインタ
フェイスを作成してみる
‣ 様々な作品に応用可能なのでは?

‣ タンジブル(Tangible)ユーザインタフェイスとは?
‣ 形のない情報を直接触れることができる(タンジブル)ように
‣ MITの石井裕教授が提唱
!

‣ 参考: MIT Media Lab, Tangible Media Group
‣ http://tangible.media.mit.edu/

‣ タンジブルな作品の例
‣ musicBottles
‣ http://tangible.media.mit.edu/project/musicbottles/

‣ reacTIVIsion
‣ タンジブル(Tangible)なユーザインタフェイスを実現するため
の、オープンソースのツールキット
‣ http://reactivision.sourceforge.net/

‣ reacTivisionを活用したプロジェクト
‣ Reactable http://www.reactable.com/

‣ reacTIVIsionは、 ﬁducial markerという独特なパターンのマー
カーを光学的に読み込んで解析する
‣ 複数のマーカーの位置だけでなく、角度も検出可能

‣ reacTIVIsionのシステムの概要
‣ マーカーを読み取った情報を、TUIOというプロトコルで送信

‣ TUIO - タンジブルなマルチタッチなインタフェイスのためのオー
プンな通信プロトコル
‣ OpenSoundControlのプロトコルをベースにして拡張
‣ 参考: http://www.tuio.org/

reacTIVisionのセットアップ
‣ まずは、マーカーを読み取る、reacTIVIsionをセットアップ
‣ reacTIVisionのWebサイトのreacTIVision ﬁlesから、最新の
reacTIVison vision engineをダウンロード
‣ http://reactivision.sourceforge.net/

‣ reacTIVisionのためのﬁducial markerを印刷
‣ reacTIVision-1.4 > symbols > default.pdf
‣ マーカーをひとつずつ切り抜く

‣ reacTIVision.appを起動
‣ reacTIVision-1.4 > reacTIVision.app

‣ マーカーをかざすと、中心位置を検出
‣ 複数でもOK

reacTIVisionをopenFrameworksで使用
‣ reacTIVisionで検出されたマーカーの情報を、
openFrameworksで利用する
‣ TUIOの解析には、ofxTuioを利用する
‣ https://github.com/patriciogonzalezvivo/ofxTuio

マーカーの位置を認識する
‣ まず初めに認識したマーカーの位置と角度とIDを表示するだけ
の簡単なプログラムを作成
‣ このプログラムがofxTUIOを用いたアプリケーションのテンプ
レートとなる

‣ testApp.h
#pragma once

!

#include "ofMain.h"
#include "ofxTuio.h"

!

class testApp : public ofSimpleApp{
public:
void setup();
void update();
void draw();
// --- TUIOの物体(マーカー)に関係するイベントを追加 --// 物体の追加を検知
void objectAdded(ofxTuioObject & tuioObject);
// 物体の削除を検知
void objectRemoved(ofxTuioObject & tuioObject);
// 物体の状態の更新を検知
void objectUpdated(ofxTuioObject & tuioObject);

‣ testApp.h
// ---TUIOのカーソル(タッチポイントなど)に関係するイベント--// カーソルの追加を検知
void tuioAdded(ofxTuioCursor & tuioCursor);
// カーソルの削除を検知
void tuioRemoved(ofxTuioCursor & tuioCursor);
// カーソルの状態の更新を検知
void tuioUpdated(ofxTuioCursor & tuioCursor);
//TUIOのクライアントのインスタンス化
ofxTuioClient tuio;
//ログの出力用
string log;
};

‣ testApp.cpp

!

//TUIOに関連するイベントリスナーの追加
ofAddListener(tuio.objectAdded,this,&testApp::objectAdded);
ofAddListener(tuio.objectRemoved,this,&testApp::objectRemoved);
ofAddListener(tuio.objectUpdated,this,&testApp::objectUpdated);
ofAddListener(tuio.cursorAdded,this,&testApp::tuioAdded);
ofAddListener(tuio.cursorRemoved,this,&testApp::tuioRemoved);
ofAddListener(tuio.cursorUpdated,this,&testApp::tuioUpdated);
//フレームレート設定
ofSetFrameRate(60);
//背景を黒に
ofBackground(0);
//ポート番号3333で、TUIOの通信開始
tuio.start(3333);
//ログのテキストを空に
log="";
}

!

//TUIOのメッセージを受信
tuio.getMessage();

‣ testApp.cpp
//カーソルの状態を表示
tuio.drawCursors();
//オブジェクトの状態を表示
tuio.drawObjects();
//ログを表示
ofSetColor(255);
ofDrawBitmapString(log, 20, 20);
}

!

void testApp::objectAdded(ofxTuioObject & tuioObject){
// マーカー追加
log = " new object: " + ofToString(tuioObject.getFiducialId())+
" X: "+ofToString(tuioObject.getX())+
" Y: "+ofToString(tuioObject.getY())+
" angle: "+ofToString(tuioObject.getAngleDegrees());
}

!

void testApp::objectRemoved(ofxTuioObject & tuioObject){
// マーカー削除
log = " object removed: " + ofToString(tuioObject.getFiducialId())+
}

‣ testApp.cpp
!

void testApp::objectUpdated(ofxTuioObject & tuioObject){
// マーカーの状態更新
log = " object updated: " + ofToString(tuioObject.getFiducialId())+
}
void testApp::tuioAdded(ofxTuioCursor & tuioCursor){
// カーソル追加
log = " new cursor: " + ofToString(tuioCursor.getFingerId())+
" X: "+ofToString(tuioCursor.getX())+
" Y: "+ofToString(tuioCursor.getY());
}
void testApp::tuioRemoved(ofxTuioCursor & tuioCursor){
// カーソル削除
log = " cursor removed: " + ofToString(tuioCursor.getFingerId())+
}
void testApp::tuioUpdated(ofxTuioCursor & tuioCursor){
// カーソル状態更新
log = " cursor updated: " + ofToString(tuioCursor.getFingerId())+
}

‣ 複数のマーカーの位置と角度を検出

オリジナルなマーカーを描画する
‣ tuio.drawObjects()を利用してマーカーの状態を描画
‣ この表示はあくまで状態の確認用
‣ 実際に作品を制作する際には、マーカーの状態(ID、座標、角
度)にアクセスして、オリジナルの表現方法で描画する必要
!

‣ tuio.getTuioObjects() メソッドを実行すると、全てのオブジェ
クトのリストを取得可能
‣ データの形式は、ofxTuioObjectのポインタ型を格納したlistと
いう形式
‣ list - vectorとよく似た動的な配列型
‣ vectorと違って、listはその配列内の要素にアクセスする際には
必ずイテレータ(iterator)を用いなければならない

‣ ofxTuioObjectのlistからマーカーの位置を取得する例
//オブジェクトのリストを取得
list<ofxTuioObject*> objectList = tuio.getTuioObjects();
//リスト操作のためのイテレータを準備
list<ofxTuioObject*>::iterator tobj;

!

//全てのオブジェクトをイテレータで操作
for (tobj=objectList.begin(); tobj != objectList.end(); tobj++) {
//物体を取得
ofxTuioObject *blob = (*tobj);
//座標を記録
glPushMatrix();
//座標を移動
glTranslatef(blob->getX()*ofGetWidth(), blob->getY()*ofGetHeight(), 0.0);
//ID番号を表示
ofDrawBitmapString("id = " + ofToString(blob->getFiducialId(), 0), -64, 80);
//回転
glRotatef(blob->getAngleDegrees(), 0.0, 0.0, 1.0);
ofSetColor(255, 255, 255);
//画像を描画
myImage.draw(-64, -64);
//座標を復帰
glPopMatrix();
}

‣ マーカーの位置に、読み込んだ画像を配置してみる
‣ 位置だけでなく、検出した角度で画像を回転

‣ testApp.h
#pragma once

!

#include "ofMain.h"

!

public:
void setup();
void update();
void draw();
//TUIOの物体(マーカー)に関係するイベントを追加
//物体の追加を検知
//物体の削除を検知
//物体の状態の更新を検知
//TUIOのカーソル(タッチポイントなど)に関係するイベント
//カーソルの追加を検知
//カーソルの削除を検知
//カーソルの状態の更新を検知

‣ testApp.h
//TUIOのクライアントのインスタンス化
ofxTuioClient tuio;
//ログの出力用
string log;
//表示する画像
ofImage myImage;
};

‣ testApp.cpp

!

//TUIOに関連するイベントリスナーの追加
//フレームレート設定
ofSetFrameRate(60);
//背景を黒に
ofBackground(0,0,0);
//ポート番号3333で、TUIOの通信開始
tuio.start(3333);
//ログのテキストを空に
log="";
//画像ファイルを読み込み
myImage.loadImage("images/photo.png");
}

!

//TUIOのメッセージを受信

‣ testApp.cpp

!
!

//リスト操作のためのイテレータを準備
list<ofxTuioObject*>::iterator it;
//全てのオブジェクトをイテレータで操作
for (it = objectList.begin(); it != objectList.end(); it ++) {
//物体を取得
ofxTuioObject *blob = (*it);
//座標を記録
glPushMatrix();
//座標を移動
//ID番号を表示
ofDrawBitmapString("id = " + ofToString(blob->getFiducialId(), 0), -64, 80);
//回転
ofSetColor(255, 255, 255);
//画像を描画
myImage.draw(-64, -64);
//座標を復帰
glPopMatrix();

‣ testApp.cpp
//ログを表示
ofSetColor(0xffffff);
}

!

//マーカー追加
}
//マーカー削除
}
//マーカーの状態更新

‣ testApp.cpp
//カーソル追加
}
//カーソル削除
}
//カーソル状態更新
}

タンジブル・サウンドプレーヤー
‣ 応用例として、マーカーの位置や角度によって複数の音を同時
再生するタンジブル・サウンドプレーヤーを作ってみる
!

‣ 5つのofSoundPlayerを準備して、それぞれにサウンドファイ
ルを読み込み
!

‣ マーカーのX座標を音の左右の定位に
‣ マーカーのY座標をオーディオの再生スピード
‣ マーカーの角度でサウンドのボリュームが変化するように

‣ testApp.h
#pragma once

!

#include "ofMain.h"

!

#define NUM 5

!

public:
void setup();
void update();
void draw();
void tuioUpdated(ofxTuioCursor & tuioCursor);
ofxTuioClient tuio;
string log;
ofSoundPlayer mySounds[NUM];
};

‣ testApp.cpp

!

//イベントリスナーの追加
//画面の基本設定
ofBackground(0,0,0);
ofSetFrameRate(60);
ofSetCircleResolution(32);
ofEnableAlphaBlending();
ofSetVerticalSync(true);
ofEnableSmoothing();
//サウンドファイルの読み込み
for (int i = 0; i < NUM; i++) {
mySounds[i].loadSound("sounds/rainstick.aif");
mySounds[i].setLoop(true);
}
//TUIO通信開始、ポート3333

‣ testApp.cpp
//TUIOメッセージの受信

!

tuio.getMessage();
//イテレータの準備
list<ofxTuioObject*>::iterator it;
//表示されている物体の数だけくりかえし
for (it = objectList.begin(); it != objectList.end(); it++) {
//個別の物体を取り出し
ofxTuioObject *blob = (*it);
//IDを抽出
int id = blob->getFiducialId();
//サウンドが設定されたIDの範囲なら
if (id >= 0 && id < NUM) {
//X座標を左右の定位に適用
mySounds[id].setPan(blob->getX());
//Y座標を再生スピードの適用
mySounds[id].setSpeed((1.0f - blob->getY()) * 2.0);
//角度をサウンドのボリュームに適用
mySounds[id].setVolume(blob->getAngleDegrees()/360.0);
}
}

‣ testApp.cpp
//オリジナルの図形を描画
//半径を20に
float radius = 20;
//イテレータの準備
list<ofxTuioObject*>::iterator tobj;
//表示されている物体の数だけくりかえし
for (tobj=objectList.begin(); tobj != objectList.end(); tobj++) {
//個別の物体を取り出し
ofxTuioObject *blob = (*tobj);
//オリジナルの物体を描画
glPushMatrix();
ofFill();
ofSetColor(0, 0, 255, 127);
//サウンドのレベルによって半径を変化させて青い円を描く
float* spectrum;
spectrum = ofSoundGetSpectrum(1);
ofCircle(0, 0, spectrum[0] * radius * 100.0);
ofSetColor(255, 255, 255);
ofNoFill();

‣ testApp.cpp
!

glPopMatrix();
}
//ログを表示
ofSetColor(0xffffff);

}

!

int id = tuioObject.getFiducialId();
if (id >= 0 && id < NUM) {
mySounds[tuioObject.getFiducialId()].play();
}
//マーカー追加
}
int id = tuioObject.getFiducialId();
if (id >= 0 && id < NUM) {
mySounds[tuioObject.getFiducialId()].stop();
}

‣ testApp.cpp
//マーカー削除
}
//マーカーの状態更新
}
//カーソル追加
}
//カーソル削除
}

‣ testApp.cpp
//カーソル状態更新
}

‣ 完成!!

Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (10)

Similar a Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス

Similar a Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス (20)

Más de Atsushi Tadokoro

Más de Atsushi Tadokoro (20)

Último

Último (7)

Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス