• Like
Media Art II openFrameworks  アプリ間の通信とタンジブルなインターフェイス
Upcoming SlideShare
Loading in...5
×

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

  • 3,932 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,932
On Slideshare
0
From Embeds
0
Number of Embeds
7

Actions

Shares
Downloads
55
Comments
0
Likes
7

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Media Art II openFrameworks アプリ間の通信とタンジブルなインターフェイス openSoundControl, reacTIVision 多摩美術大学情報デザイン学科情報芸術コース 2013年12月9日 田所 淳
  • 2. Open Sound Control (OSC) について
  • 3. 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 benefits of modern networking technology to the world of electronic musical instruments, OSC's advantages include interoperability, accuracy, flexibility, and enhanced organization and documentation.
  • 4. Open Sound Control とは ‣ Open Sound Control のプロジェクトのWebページより ! ‣ Open Sound Control (OSC) は、コンピュータやシンセサイ ザーや、その他のマルチメディアデバイス同士でコミュニケー ションするための通信プロトコルです。現代のネットワーク 技術の成果を電子楽器の世界に適用することで、OSCは、相 互運用性、正確さ、柔軟さ、また、拡張性に優れた性能を持 ちます。
  • 5. Open Sound Control とは ‣ Open Sound Control のポイント ! ‣ ポストMIDIを目指す ‣ インターネットのプロトコルの仕組みを、音楽やマルチメディ アの世界へ適用 (UDP/IPを利用) ‣ 多くの機器、言語、アプリケーションに実装済み ‣ オープンでシンプルな命名規則 ← URLの仕組みに似ている
  • 6. Open Sound Control とは ‣ Open Sound Control が実装された主な環境 ! ‣ サウンド系 ‣ Max/MSP ‣ Pd ‣ SuperCollider ‣ Chuck ‣ Csound ‣ Reactor など ! ‣ ビジュアル系 ‣ Flash ( flosc ) ‣ Processing ‣ OpenFrameworks ‣ QuartzComposer ‣ vvvv
  • 7. Open Sound Control とは ‣ Open Sound Control が実装された主な環境 ! ‣ デバイス ‣ Lemur ‣ monome
  • 8. Open Sound Control とは ‣ Open Sound Control が実装された主な環境 ‣ iPhoneやiPadからも!
  • 9. OSCのプロトコル ‣ では、実際にOSCのプロトコルは、どんななっているのか? ! ! /trigger/inst/a 440 0.1 “hello” OSC Message OSC Arguments • 情報内容をラベリング • • URLに同様の名前付けの規則 • 情報の本体 いろいろな型を同時に含めることがで きる
  • 10. OSC Message ‣ OSC Messageのアドレスパターン → URLのような階層構造
  • 11. OSC の通信のしくみ
  • 12. OSC の通信のしくみ ‣ 送信側:IPアドレスとportを指定 IP: 192.168.1.3 port: 57120
  • 13. OSC の通信のしくみ ‣ 受信側:ポートをオープン IP: 192.168.1.3 port: 57120
  • 14. OSC の通信のしくみ ‣ 接続 IP: 192.168.1.3 port: 57120
  • 15. OSC の通信のしくみ ‣ 送信側:情報を送信 ‣ 受信側:受信 /trigger/inst/a 440 0.1 hello IP: 192.168.1.3 port: 57120
  • 16. OSC の通信のしくみ ‣ 受信側:OSCのメッセージを解釈、アプリケーションに適用 /trigger/inst/a 440 0.1 hello IP: 192.168.1.3 port: 57120
  • 17. openFrameworksのアプリケーション同士でOSC を送受信する
  • 18. アプリケーション同士でOSCを送受信する ‣ プロジェクトの準備 ‣ OSCの送信側、受信側双方のaddons内にofxOscを追加する
  • 19. アプリケーション同士でOSCを送受信する ‣ まず始めに、openFrameworksのアプリケーション同士でOSC を送受信してみる ! ‣ まずは簡単なサンプル ‣ マウスの位置とマウスボタンの状態をOSCで表現してみる
  • 20. アプリケーション同士でOSCを送受信する ‣ マウスの位置とマウスボタンの状態 ! ‣ マウスの位置 ‣ メッセージ:/mouse/position ‣ 引数:X座標 Y座標 (例: 320 240) ! ‣ マウスボタンの状態 ‣ メッセージ:/mouse/button ‣ 引数:ボタンの状態 ( up , down )
  • 21. アプリケーション同士でOSCを送受信する ‣ 実際にやりとりされるOSCメッセージの例: ! ‣ マウスを座標(480, 240)に動かした場合 ‣ /mouse/position 480 240 ! ‣ マウスボタンを押した瞬間 ‣ /mouse/button down ! ‣ マウスボタンを離した瞬間 ‣ /mouse/button up
  • 22. アプリケーション同士でOSCを送受信する ‣ 実際にOSCがやりとりされている様子を視覚的に表現 ! ‣ 送信側のマウス位置 → 受信側では円で表示 ‣ マウスボタンを離している時 → 色は青 ‣ マウスボタンを押している時 → 色は赤
  • 23. 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; };
  • 24. OSC送信側プログラム ‣ 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);
  • 25. OSC送信側プログラム ‣ 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); //メッセージを送信 sender.sendMessage(m); } ! void testApp::mousePressed(int x, int y, int button){ //OSCメッセージの準備 ofxOscMessage m; //OSCアドレスの指定 m.setAddress("/mouse/button"); //OSC引数として、マウス状態"down"を送信 m.addStringArg("down"); //メッセージを送信 sender.sendMessage(m); }
  • 26. OSC送信側プログラム ‣ testApp.cpp void testApp::mouseReleased(int x, int y, int button){ //OSCメッセージの準備 ofxOscMessage m; //OSCアドレスの指定 m.setAddress("/mouse/button"); //OSC引数として、マウス状態"up"を送信 m.addStringArg("up"); //メッセージを送信 sender.sendMessage( m ); }
  • 27. OSC受信側プログラム ‣ testApp.h #pragma once ! #include "ofMain.h" #include "ofxOsc.h" ! // OSCを受信するポート番号を設定 #define PORT 8000 ! class testApp : public ofBaseApp{ public: ! void setup(); void update(); void draw(); void dumpOSC(ofxOscMessage m); //OSCメッセージを出力 // OSCメッセージを受信するインスタンス ! ! ofxOscReceiver receiver; // 受信したマウス座標 ofPoint remoteMouse; // 受信したマウスボタンの状態 ("up", "down") string mouseButtonState;
  • 28. OSC受信側プログラム ‣ testApp.cpp #include "testApp.h" ! void testApp::setup(){ ofBackground(0, 0, 0); //指定したポートで接続 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);
  • 29. OSC受信側プログラム ‣ testApp.cpp ! // メッセージが /mouse/button ならマウスボタンの状態を取得 else if (m.getAddress() == "/mouse/button"){ mouseButtonState = m.getArgAsString(0) ; } //OSCメッセージをそのままコンソールに出力 dumpOSC(m); } } ! void testApp::draw(){ int radius; ! // マウスボタンが押されていたら、赤い円を描画 if (mouseButtonState == "down") { radius = 20; ofSetColor(255, 127, 0); } else { // そうでなければ、青い円を描画 radius = 10; ofSetColor(0, 127, 255); } ofCircle(remoteMouse.x, remoteMouse.y, radius); }
  • 30. OSC受信側プログラム ‣ 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; }
  • 31. アプリケーション同士でOSCを送受信する ‣ OscSenderの画面でマウスを操作 ‣ OscReceiverに現在のマウスの位置と状態が表示される
  • 32. アプリケーション同士でOSCを送受信する ‣ OSCでやりとりするメッセージは、同一のマシン内でだけでは ない ‣ IP網を介して、ネットワークで通信することが可能 OSC
  • 33. アプリケーション同士でOSCを送受信する ‣ 教室内のMac同士でOSC通信してみる ‣ お互いのIPアドレスを調べる ‣ システム環境設定 → ネットワーク の「IPアドレス」の数値
  • 34. アプリケーション同士でOSCを送受信する ‣ 送信先のIPに、OscSenderのtestApp.hのHOSTを変更 #pragma once ! #include "ofMain.h" #include "ofxOsc.h" ! #define HOST "192.168.10.8" // 受信側の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; };
  • 35. アプリケーション同士でOSCを送受信する ‣ OscSenderでマウスを動かすと、ネットワークに接続された他 のマシンの円を動かすことができるはず
  • 36. 複数のマシンでアプリケーションを共有
  • 37. 複数のPCでアプリケーションを共有 ‣ では次に、複数のPCで一つの端末のアプリケーションを共有す るプログラムを作成してみる
  • 38. 複数のPCでアプリケーションを共有 ‣ 外部のPCからアクセスがあるたびに、輪が追加され波紋のよう に拡がっていくプログラム
  • 39. 複数のマシンでアプリケーションを共有 ‣ 送信側: testApp.h #pragma once ! #include "ofMain.h" #include "ofxOsc.h" #include "Ring.h" ! #define HOST "127.0.0.1" #define PORT 8000 ! class testApp : public ofBaseApp{ 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; }; ofxOscSender sender; //輪の動的配列
  • 40. 複数のマシンでアプリケーションを共有 ‣ 送信側: testApp.h #pragma once ! #include "ofMain.h" #include "ofxOsc.h" #include "Ring.h" ! #define HOST "127.0.0.1" #define PORT 8000 ! class testApp : public ofBaseApp{ 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; }; ofxOscSender sender; // 輪の動的配列
  • 41. 複数のマシンでアプリケーションを共有 ‣ 送信側: testApp.cpp #include "testApp.h" ! void testApp::setup(){ ofBackground(0, 0, 0); ofSetFrameRate(60); //指定したIPアドレスとポート番号でサーバーに接続 sender.setup( HOST, PORT ); } ! void testApp::update(){ //Ring更新 for(vector <Ring *>::iterator it = rings.begin(); it != rings.end();){ (*it)->update(); if ((*it)->dead) { delete (*it); it = rings.erase(it); } else { ++it; } } } ! void testApp::draw(){ //Ringを描画 for(vector <Ring *>::iterator it = rings.begin(); it != rings.end(); ++it){ (*it)->draw(); }
  • 42. 複数のマシンでアプリケーションを共有 ‣ 送信側: testApp.cpp ! 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 ); } ! void testApp::mousePressed(int x, int y, int button){ //OSCメッセージの準備 ofxOscMessage m; //OSCアドレスの指定 m.setAddress( "/mouse/button" ); //OSC引数として、マウス状態"down"を送信 m.addStringArg( "down" ); //OSC引数として、現在のマウスの座標(x, y)を送信 m.addIntArg( x ); m.addIntArg( y ); sender.sendMessage( m ); }
  • 43. 複数のマシンでアプリケーションを共有 ‣ 送信側: testApp.cpp void testApp::mouseReleased(int x, int y, int button){ //OSCメッセージの準備 ofxOscMessage m; //OSCアドレスの指定 m.setAddress( "/mouse/button" ); //OSC引数として、マウス状態"up"を送信 m.addStringArg( "up" ); //OSC引数として、現在のマウスの座標(x, y)を送信 m.addIntArg( x ); m.addIntArg( y ); sender.sendMessage( m ); //Ringを追加 rings.push_back(new Ring(ofPoint(x, y))); }
  • 44. 複数のマシンでアプリケーションを共有 ‣ 送信側: 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; };
  • 45. 複数のマシンでアプリケーションを共有 ‣ 送信側: 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()); ofCircle(0, 0, radius); ofPopMatrix();
  • 46. 複数のマシンでアプリケーションを共有 ‣ 受信側: testApp.h #pragma once ! #include "ofMain.h" #include "ofxOsc.h" #include "Ring.h" ! //ポート番号を設定 #define PORT 8000 ! class testApp : public ofBaseApp{ public: void setup(); void update(); void draw(); void dumpOSC(ofxOscMessage m); ofxOscReceiver receiver; ofPoint remoteMouse; string mouseButtonState; string oscString; vector <Ring *> rings; // 拡大する輪"Ring"の配列 };
  • 47. 複数のマシンでアプリケーションを共有 ‣ 受信側: testApp.cpp #include "testApp.h" ! void testApp::setup(){ //指定したポートで接続 receiver.setup( PORT ); ofSetFrameRate(60); //値を初期化 mouseX = 0; mouseY = 0; mouseButtonState = ""; ofBackground(0, 0, 0); } ! void testApp::update(){ //現在順番待ちの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);
  • 48. 複数のマシンでアプリケーションを共有 ‣ 受信側: testApp.cpp ! //マウスボタンの状態を取得 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))); mouseButtonState = ""; } //Ring更新 for(vector <Ring *>::iterator it = rings.begin(); it != rings.end();){ (*it)->update(); if ((*it)->dead) { delete (*it); it = rings.erase(it); } else { ++it; } }
  • 49. 複数のマシンでアプリケーションを共有 ‣ 受信側: testApp.cpp void testApp::draw(){ //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; }
  • 50. 複数のPCでアプリケーションを共有 ‣ 複数のPCから1台のアプリに波紋を追加!!
  • 51. reacTIVision + ofxTUIO で タンジブルなインタフェイスを作る
  • 52. reacTIVisionでタンジブルなインタフェイス ‣ OSCを使用した、より実践的なプロジェクトの例 ‣ reacTIVisionを使用して、タンジブル(Tangible)なユーザインタ フェイスを作成してみる ‣ 様々な作品に応用可能なのでは?
  • 53. reacTIVisionでタンジブルなインタフェイス ‣ タンジブル(Tangible)ユーザインタフェイスとは? ‣ 形のない情報を直接触れることができる(タンジブル)ように ‣ MITの石井裕教授が提唱 ! ‣ 参考: MIT Media Lab, Tangible Media Group ‣ http://tangible.media.mit.edu/
  • 54. reacTIVisionでタンジブルなインタフェイス ‣ タンジブルな作品の例 ‣ musicBottles ‣ http://tangible.media.mit.edu/project/musicbottles/
  • 55. reacTIVisionでタンジブルなインタフェイス ‣ reacTIVIsion  ‣ タンジブル(Tangible)なユーザインタフェイスを実現するため の、オープンソースのツールキット ‣ http://reactivision.sourceforge.net/
  • 56. reacTIVisionでタンジブルなインタフェイス ‣ reacTivisionを活用したプロジェクト ‣ Reactable http://www.reactable.com/
  • 57. reacTIVisionでタンジブルなインタフェイス ‣ reacTIVIsionは、 fiducial markerという独特なパターンのマー カーを光学的に読み込んで解析する ‣ 複数のマーカーの位置だけでなく、角度も検出可能
  • 58. reacTIVisionでタンジブルなインタフェイス ‣ reacTIVIsionのシステムの概要 ‣ マーカーを読み取った情報を、TUIOというプロトコルで送信
  • 59. reacTIVisionでタンジブルなインタフェイス ‣ TUIO - タンジブルなマルチタッチなインタフェイスのためのオー プンな通信プロトコル ‣ OpenSoundControlのプロトコルをベースにして拡張 ‣ 参考: http://www.tuio.org/
  • 60. reacTIVisionのセットアップ ‣ まずは、マーカーを読み取る、reacTIVIsionをセットアップ ‣ reacTIVisionのWebサイトのreacTIVision filesから、最新の reacTIVison vision engineをダウンロード ‣ http://reactivision.sourceforge.net/
  • 61. reacTIVisionのセットアップ ‣ reacTIVisionのためのfiducial markerを印刷 ‣ reacTIVision-1.4 > symbols > default.pdf  ‣ マーカーをひとつずつ切り抜く
  • 62. reacTIVisionのセットアップ ‣ reacTIVision.appを起動 ‣ reacTIVision-1.4 > reacTIVision.app
  • 63. reacTIVisionのセットアップ ‣ マーカーをかざすと、中心位置を検出 ‣ 複数でもOK
  • 64. reacTIVisionをopenFrameworksで使用 ‣ reacTIVisionで検出されたマーカーの情報を、 openFrameworksで利用する ‣ TUIOの解析には、ofxTuioを利用する ‣ https://github.com/patriciogonzalezvivo/ofxTuio
  • 65. マーカーの位置を認識する ‣ まず初めに認識したマーカーの位置と角度とIDを表示するだけ の簡単なプログラムを作成 ‣ このプログラムがofxTUIOを用いたアプリケーションのテンプ レートとなる
  • 66. マーカーの位置を認識する ‣ 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);
  • 67. マーカーの位置を認識する ‣ testApp.h // ---TUIOのカーソル(タッチポイントなど)に関係するイベント--// カーソルの追加を検知 void tuioAdded(ofxTuioCursor & tuioCursor); // カーソルの削除を検知 void tuioRemoved(ofxTuioCursor & tuioCursor); // カーソルの状態の更新を検知 void tuioUpdated(ofxTuioCursor & tuioCursor); //TUIOのクライアントのインスタンス化 ofxTuioClient tuio; //ログの出力用 string log; };
  • 68. マーカーの位置を認識する ‣ testApp.cpp #include "testApp.h" ! void testApp::setup(){ //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=""; } ! void testApp::update(){ //TUIOのメッセージを受信 tuio.getMessage();
  • 69. マーカーの位置を認識する ‣ testApp.cpp void testApp::draw(){ //カーソルの状態を表示 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())+ " X: "+ofToString(tuioObject.getX())+ " Y: "+ofToString(tuioObject.getY())+ " angle: "+ofToString(tuioObject.getAngleDegrees()); }
  • 70. マーカーの位置を認識する ‣ testApp.cpp ! void testApp::objectUpdated(ofxTuioObject & tuioObject){ // マーカーの状態更新 log = " object updated: " + ofToString(tuioObject.getFiducialId())+ " X: "+ofToString(tuioObject.getX())+ " Y: "+ofToString(tuioObject.getY())+ " angle: "+ofToString(tuioObject.getAngleDegrees()); } 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())+ " X: "+ofToString(tuioCursor.getX())+ " Y: "+ofToString(tuioCursor.getY()); } void testApp::tuioUpdated(ofxTuioCursor & tuioCursor){ // カーソル状態更新 log = " cursor updated: " + ofToString(tuioCursor.getFingerId())+ " X: "+ofToString(tuioCursor.getX())+ " Y: "+ofToString(tuioCursor.getY()); }
  • 71. マーカーの位置を認識する ‣ 複数のマーカーの位置と角度を検出
  • 72. オリジナルなマーカーを描画する ‣ tuio.drawObjects()を利用してマーカーの状態を描画 ‣ この表示はあくまで状態の確認用 ‣ 実際に作品を制作する際には、マーカーの状態(ID、座標、角 度)にアクセスして、オリジナルの表現方法で描画する必要 !
  • 73. オリジナルなマーカーを描画する ‣ tuio.getTuioObjects() メソッドを実行すると、全てのオブジェ クトのリストを取得可能 ‣ データの形式は、ofxTuioObjectのポインタ型を格納したlistと いう形式 ‣ list - vectorとよく似た動的な配列型 ‣ vectorと違って、listはその配列内の要素にアクセスする際には 必ずイテレータ(iterator)を用いなければならない
  • 74. オリジナルなマーカーを描画する ‣ 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(); }
  • 75. オリジナルなマーカーを描画する ‣ マーカーの位置に、読み込んだ画像を配置してみる ‣ 位置だけでなく、検出した角度で画像を回転
  • 76. オリジナルなマーカーを描画する ‣ 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); //TUIOのカーソル(タッチポイントなど)に関係するイベント //カーソルの追加を検知 void tuioAdded(ofxTuioCursor & tuioCursor); //カーソルの削除を検知 void tuioRemoved(ofxTuioCursor & tuioCursor); //カーソルの状態の更新を検知
  • 77. オリジナルなマーカーを描画する ‣ testApp.h //TUIOのクライアントのインスタンス化 ofxTuioClient tuio; //ログの出力用 string log; //表示する画像 ofImage myImage; };
  • 78. オリジナルなマーカーを描画する ‣ testApp.cpp #include "testApp.h" ! void testApp::setup(){ //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,0,0); //ポート番号3333で、TUIOの通信開始 tuio.start(3333); //ログのテキストを空に log=""; //画像ファイルを読み込み myImage.loadImage("images/photo.png"); } ! void testApp::update(){ //TUIOのメッセージを受信
  • 79. オリジナルなマーカーを描画する ‣ testApp.cpp void testApp::draw(){ //オブジェクトのリストを取得 ! ! list<ofxTuioObject*> objectList = tuio.getTuioObjects(); //リスト操作のためのイテレータを準備 list<ofxTuioObject*>::iterator it; //全てのオブジェクトをイテレータで操作 for (it = objectList.begin(); it != objectList.end(); it ++) { //物体を取得 ofxTuioObject *blob = (*it); //座標を記録 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();
  • 80. オリジナルなマーカーを描画する ‣ testApp.cpp //ログを表示 ofSetColor(0xffffff); 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())+ " X: "+ofToString(tuioObject.getX())+ " Y: "+ofToString(tuioObject.getY())+ " angle: "+ofToString(tuioObject.getAngleDegrees()); } void testApp::objectUpdated(ofxTuioObject & tuioObject){ //マーカーの状態更新 log = " object updated: " + ofToString(tuioObject.getFiducialId())+ " X: "+ofToString(tuioObject.getX())+ " Y: "+ofToString(tuioObject.getY())+ " angle: "+ofToString(tuioObject.getAngleDegrees());
  • 81. オリジナルなマーカーを描画する ‣ testApp.cpp 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())+ " X: "+ofToString(tuioCursor.getX())+ " Y: "+ofToString(tuioCursor.getY()); } void testApp::tuioUpdated(ofxTuioCursor & tuioCursor){ //カーソル状態更新 log = " cursor updated: " + ofToString(tuioCursor.getFingerId())+ " X: "+ofToString(tuioCursor.getX())+ " Y: "+ofToString(tuioCursor.getY()); }
  • 82. タンジブル・サウンドプレーヤー ‣ 応用例として、マーカーの位置や角度によって複数の音を同時 再生するタンジブル・サウンドプレーヤーを作ってみる ! ‣ 5つのofSoundPlayerを準備して、それぞれにサウンドファイ ルを読み込み ! ‣ マーカーのX座標を音の左右の定位に ‣ マーカーのY座標をオーディオの再生スピード ‣ マーカーの角度でサウンドのボリュームが変化するように
  • 83. タンジブル・サウンドプレーヤー ‣ testApp.h #pragma once ! #include "ofMain.h" #include "ofxTuio.h" ! #define NUM 5 ! class testApp : public ofSimpleApp{ public: void setup(); void update(); void draw(); void objectAdded(ofxTuioObject & tuioObject); void objectRemoved(ofxTuioObject & tuioObject); void objectUpdated(ofxTuioObject & tuioObject); void tuioAdded(ofxTuioCursor & tuioCursor); void tuioRemoved(ofxTuioCursor & tuioCursor); void tuioUpdated(ofxTuioCursor & tuioCursor); ofxTuioClient tuio; string log; ofSoundPlayer mySounds[NUM]; };
  • 84. タンジブル・サウンドプレーヤー ‣ testApp.cpp #include "testApp.h" ! void testApp::setup(){ //イベントリスナーの追加 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); //画面の基本設定 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
  • 85. タンジブル・サウンドプレーヤー ‣ testApp.cpp void testApp::update(){ //TUIOメッセージの受信 ! tuio.getMessage(); //オブジェクトのリストを取得 list<ofxTuioObject*> objectList = tuio.getTuioObjects(); //イテレータの準備 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); } }
  • 86. タンジブル・サウンドプレーヤー ‣ testApp.cpp void testApp::draw(){ //オリジナルの図形を描画 //半径を20に float radius = 20; //オブジェクトのリストを取得 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); glRotatef(blob->getAngleDegrees(), 0.0, 0.0, 1.0); ofFill(); ofSetColor(0, 0, 255, 127); //サウンドのレベルによって半径を変化させて青い円を描く float* spectrum; spectrum = ofSoundGetSpectrum(1); ofCircle(0, 0, spectrum[0] * radius * 100.0); ofSetColor(255, 255, 255); ofNoFill(); ofCircle(0, 0, radius);
  • 87. タンジブル・サウンドプレーヤー ‣ testApp.cpp ! glPopMatrix(); } //ログを表示 ofSetColor(0xffffff); ofDrawBitmapString(log, 20, 20); } ! void testApp::objectAdded(ofxTuioObject & tuioObject){ int id = tuioObject.getFiducialId(); if (id >= 0 && id < NUM) { mySounds[tuioObject.getFiducialId()].play(); } //マーカー追加 log = " new object: " + ofToString(tuioObject.getFiducialId())+ " X: "+ofToString(tuioObject.getX())+ " Y: "+ofToString(tuioObject.getY())+ " angle: "+ofToString(tuioObject.getAngleDegrees()); } void testApp::objectRemoved(ofxTuioObject & tuioObject){ int id = tuioObject.getFiducialId(); if (id >= 0 && id < NUM) { mySounds[tuioObject.getFiducialId()].stop(); }
  • 88. タンジブル・サウンドプレーヤー ‣ testApp.cpp //マーカー削除 log = " object removed: " + ofToString(tuioObject.getFiducialId())+ " X: "+ofToString(tuioObject.getX())+ " Y: "+ofToString(tuioObject.getY())+ " angle: "+ofToString(tuioObject.getAngleDegrees()); } void testApp::objectUpdated(ofxTuioObject & tuioObject){ //マーカーの状態更新 log = " object updated: " + ofToString(tuioObject.getFiducialId())+ " X: "+ofToString(tuioObject.getX())+ " Y: "+ofToString(tuioObject.getY())+ " angle: "+ofToString(tuioObject.getAngleDegrees()); } 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())+ " X: "+ofToString(tuioCursor.getX())+ " Y: "+ofToString(tuioCursor.getY()); }
  • 89. タンジブル・サウンドプレーヤー ‣ testApp.cpp void testApp::tuioUpdated(ofxTuioCursor & tuioCursor){ //カーソル状態更新 log = " cursor updated: " + ofToString(tuioCursor.getFingerId())+ " X: "+ofToString(tuioCursor.getX())+ " Y: "+ofToString(tuioCursor.getY()); }
  • 90. タンジブル・サウンドプレーヤー ‣ 完成!!