Tech Racho エンジニアの「?」を「!」に。
  • 開発

iPhoneとopenFrameworksをOSCで接続する

夏です。バイトの片山です。最近ブリグリ(the brilliant green)にハマってます。

今回はopenFrameworksとiPhoneとをOSCで繋いでみたいと思います。

導入篇

必要なもの

openFrameworks
Mrmr

すること

・openFrameworksを使えるようにする
・MrmrをiPhoneにインストールする

以上です。どちらも導入はとても簡単なので今回は割愛します。
ちなみに今回は無料という理由だけでとりあえずMrmrを使っていますが、その他にもスマホをOSCコントローラーにするためのアプリはTouchOSC等色々あります。

実践編

Mrmrの設定

iPhoneにMrmrのインストールが終わったらとりあえずMrmrを立ち上げます

mrmr1

こんな感じになるはずなので赤枠内のAdd a Serverをタップします。

すると

mrmr2

になりますのでAdd server manuallyをタップします。

サーバー側のipアドレス(この場合は連携するPCのipアドレス)を入力します。
ipアドレスはifconfigとかで適当に調べます。

mrmr3

からConnectします。

次にPrefsからPort番号を確認します。私の場合はデフォルトで1337番ポートに設定されていたのでそのまま使うことにしました。

mrmr4

Mrmr側の設定はひとまずここで一旦区切ります。

openFrameworksでOSCを受信する準備をする

openFrameworksの細かい使い方については(面倒くさいので)割愛しますが、プロジェクトを作成するときに必ずAddonsにてofxOscをインポートするように気をつけましょう。これがないとOSCが使えません。

openFramework1

あとはコードを書くだけです。やっつけ仕事なので適当なのは見逃して下さい。今回は加速度センサーを使う体で書きました。

ofApp.h

#pragma once

#include "ofMain.h"
#include "ofxOsc.h" // うっかりここを忘れてOSCが使えないことが多々あるので気をつける

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

class ofApp : 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 mouseEntered(int x, int y);
        void mouseExited(int x, int y);
        void windowResized(int w, int h);
        void dragEvent(ofDragInfo dragInfo);
        void gotMessage(ofMessage msg);

        void dumpOSC(ofxOscMessage m); 

        float acc_x;
        float acc_y;
        float acc_z;

    private:
        ofxOscReceiver receiver;

};

ofApp.cpp

#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup(){

    ofSetFrameRate(30); 
    ofSetCircleResolution(32);
    ofSetBackgroundAuto(false);
    ofEnableAlphaBlending();
    receiver.setup(SERVER_PORT);
    ofBackground(0); //背景色を黒に設定
    acc_x = 0; //初期化
    acc_y = 0; 
    acc_z = 0;

}

//--------------------------------------------------------------
void ofApp::update(){

    while (receiver.hasWaitingMessages()) {

        ofxOscMessage m;
        receiver.getNextMessage(m);

        if(m.getAddress() == "/mrmr/accelerometerX/0/YKiPhone"){ // OSCのアドレス部はメッセージの種類やデバイスによって変わるので気をつける。事前にPuredataやMax/MSP等でOSCメッセージの中身を確認しておくと良いかも
            acc_x = m.getArgAsInt(0); //加速度センサー(X軸)の値を取得
        }

        if (m.getAddress() == "/mrmr/accelerometerY/0/YKiPhone") {
            acc_y = m.getArgAsInt(0); //加速度センサー(Y軸)の値を取得
        }

        if (m.getAddress() == "/mrmr/accelerometerZ/0/YKiPhone") {
            acc_z = m.getArgAsInt(0); //加速度センサー(Z軸)の値を取得
        }

    }
}

//--------------------------------------------------------------
void ofApp::draw(){

    ofSetColor(0, 0, 0, 120); // 透明度を255段階中120にした。ここの値は適当で大丈夫
    ofDrawRectangle(0, 0, ofGetWidth(), ofGetHeight()); // これがないと塗りつぶしになって見にくいので入れておく
    string x;
    string y;
    string z;
    x = ofToString(acc_x);
    y = ofToString(acc_y);
    z = ofToString(acc_z);
    ofSetColor(255);
    ofDrawBitmapString(x, 10, 10); // X軸の値を座標(10, 10)に描画
    ofDrawBitmapString(y, 10, 20); // Y軸の値を座標(10, 20)に描画
    ofDrawBitmapString(z, 10, 30); // Z軸の値を座標(10, 30)に描画

}

Xcodeの場合は左上を

xcode

プロジェクト名 Debugになっていることを確認してからRunします。

openFramework2

ちょっとアンバランスですが一応これで、1337番ポートで待機できました。

Mrmrを使う

メインメニュー下のNewをタップします。するとこんな画面になります。

mrmr5

今回は加速度センサーを使うのでAccelerometerを左側のバーをスクロールして探します。タップすると

mrmr6

こうなります。そしたらopenFrameworksのアプリを見てみましょう。

openFramework4

左上の方にセンサーの値が表示されているのですが、とっても見づらいので拡大します。

今回は

筆者の時間の関係でここまでとしますが、ひとまず数値をとってきて表示することは出来ましたので、色々出来そうな気がしてきますね。

関連記事


CONTACT

TechRachoでは、パートナーシップをご検討いただける方からの
ご連絡をお待ちしております。ぜひお気軽にご意見・ご相談ください。