【Swift】【C4】OSC通信を使ってiPhoneからC4とoFをつなげてみよう

  • 24
    いいね
  • 0
    コメント

はじめに

最近登場してきたswiftでクリエイティブコーディング可能なC4を使ってoFと連携させてみました.
今回はswiftを用いてOSC通信を送信する側だけを実装してみました.

手順

C4プロジェクトを作ります

こちらのサイトのサンプルを参考にしてみてください

私はC4公式サイトのチュートリアルのサンプルを用いて製作を行いました.

WorkSpace.swiftのコード

WorkSpace.swift

 import UIKit

class WorkSpace: CanvasController{

    override func setup() {

        //背景所を黒くする
        canvas.backgroundColor = black

        //タッチ操作を可能にさせる
        canvas.addPanGestureRecognizer { locations, center, translation, velocity, state in

            ShapeLayer.disableActions = true
            let circle = Circle(center: center, radius: 30)
            circle.strokeColor = clear
            circle.fillColor = white
            self.canvas.add(circle)
            ShapeLayer.disableActions = false 

            //oFに送る座標数値をprintで確認してみましょう
            print(circle.center.x,circle.center.y)

            let a = ViewAnimation(duration: 1.0) {
                circle.opacity = 0.0
                circle.transform.scale(0.01, 0.01)
            }
            a.addCompletionObserver {
                circle.removeFromSuperview()

            }
            a.curve = .Linear
            a.animate()
        }
    }
}


このままコンパイルすると指をなぞると、その軌跡が円形となってでてきます.
スクリーンショット 2016-04-22 23.19.00.png

まるで人魂が浮いているみたいで綺麗ですねー^ ^

このコードに対して指の座標位置をOSC通信を用いてMac上のoFプロジェクトに送信したと思います.

OSCの通信について

C4はswiftベースなのでswiftでOSC通信可能なサンプルを探してみたところ、このような記事にswiftとOSCを上手くつなげてるアメリカンピーポーがいました.
つまるところBuzzOSCというものを使っていたそうなので,早速使っていきます.

手順

githubからプロジェクトごと落としてくる

ファイル内の"F53OSCファイル"(写真参照)を丸ごと最初に作成したプロジェクトファイルの中に放り込みましょう!

スクリーンショット 2016-04-22 23.30.42.png

なんてこったブリッジングヘッダが必要だ!

こちらのファイルの中身はなんとobjective-Cのため、swiftと架け橋をしてくれるBridgingヘッダを追加しなければなりません.

参考サイトとしてはこちらが詳しかったので、皆さんしっかり架け橋をかけてください.

C4プロジェクトにOSCをつなげていきましょう

それでは早速コードを公開します,追加する箇所は3箇所

WorkSpace.swiftのコード

WorkSpace.swift
   import UIKit

class WorkSpace: CanvasController{
    override func setup() {

        /* 1.ここから*/
        let oscClient = F53OSCClient.init()
        //つないでいるwifiのIPアドレスを確認
        oscClient.host = "192.000.0.000"
        //OSC通信を合わせるPort番号を設定
        oscClient.port = 5001
        /*ここまで追加*/

        canvas.backgroundColor = black
        canvas.addPanGestureRecognizer { locations, center, translation, velocity, state in

            ShapeLayer.disableActions = true
            let circle = Circle(center: center, radius: 30)
            circle.strokeColor = clear
            circle.fillColor = white
            self.canvas.add(circle)
            ShapeLayer.disableActions = false

            /* 2.ここから*/
            self.sendMessage(oscClient, addressPattern: "/tasukete", arguments: [circle.center.x,circle.center.y])
            /*ここまで追加*/

            let a = ViewAnimation(duration: 1.0) {
                circle.opacity = 0.0
                circle.transform.scale(0.01, 0.01)
            }
            a.addCompletionObserver {
                circle.removeFromSuperview()

                print(circle.center.x,circle.center.y)

            }
            a.curve = .Linear
            a.animate()
        }
    }

    /* 3.ここから*/
    func sendMessage(client: F53OSCClient, addressPattern: String, arguments: [AnyObject]) {
        let message = F53OSCMessage(addressPattern: addressPattern, arguments: arguments)
        client.sendPacket(message)
        print("Sent '\(message)' to \(client.host):\(client.port)")
    }
    /*ここまで追加*/
}



3箇所追加できましたか??

もしもwifiのIPアドレスがわからなければ画像のようなところを調べれば大丈夫
スクリーンショット_2016-04-23_0_28_18.png

bridgingヘッダのコードも一応

プロジェクト名が"C4test0409"のため,ブリッジングファイルの中身は次のようにしておけばOK

C4test0409-Bridging-Header
//
//  C4test0409-Bridging-Header.h
//  C4test0409

//  Copyright © 2016年 watakemi725. All rights reserved.
//

#ifndef C4test0409_Bridging_Header_h
#define C4test0409_Bridging_Header_h


#endif /* C4test0409_Bridging_Header_h */
#import "F53OSC.h"

これでC4を使ったOSC通信の送信サイドは完成しました.

oFの受信ソフトの製作

つづいてiPhoneでなぞった指の座標位置をOSC通信を通して送られてきたものを受け取り,アプリケーション上でシンプルな円として描画できるものを作りましょう

手順

oFのプロジェクトを生成,addonに"ofxOsc"を忘れずに!

スクリーンショット 2016-04-23 0.21.11.png

それぞれのコードを書いていく

既存のコードに追加するコードは2箇所

ofApp.h
#pragma once

#include "ofMain.h"

/* 1.ここから*/

//アドオンの追加
#include "ofxOsc.h"
//OSC通信用のPORTの設定
#define PORT 5001

/*ここまで追加*/

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 windowResized(int w, int h);
    void dragEvent(ofDragInfo dragInfo);
    void gotMessage(ofMessage msg);


    /* 2.ここから*/
private:

    ofxOscReceiver receiver;

    double numx;
    double numy;

    /*ここまで追加*/

};

続いてOSC通信を実際に受け取り描画していきます

ofApp.cpp

#include "ofApp.h"

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

    //OSC通信の受信設定
    receiver.setup(PORT);

}

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

    while (receiver.hasWaitingMessages()) {

        ofxOscMessage m;

        receiver.getNextMessage(&m);

        //OSC通信用の合言葉"/tasukete"を合わせる
        if(m.getAddress() == "/tasukete") {

            string msg_string;
            msg_string = m.getAddress();

            printf("位置 yが%f xが%f \n", m.getArgAsFloat(1),m.getArgAsFloat(0));

            //座標数値を各変数に代入
            numx = m.getArgAsFloat(0);
            numy = m.getArgAsFloat(1);
        }
    }
}
//--------------------------------------------------------------
void ofApp::draw(){

    //OSC通信して受け取った座標数値にシンプルな円を描画
    ofSetColor(0, 0, 0);
    ofCircle(numx, numy, 10);

}
//--------------------------------------------------------------


以上ですべてとなります!

oFのプロジェクトがOSC通信をする際許可を求めてくるので"許可"を選択しましょう!
スクリーンショット_2016-04-23_1_05_36.png

ってな具合です!!

かなり早とちりで説明してきましたがいかがでしたでしょうか.

不備やこのほうがいいなどアドバイスがあればコメントしていただけると幸いです。

まだまだ未熟者ですのでどうぞ宜しくお願い致します!!!

参考文献

C4を紹介したHackistの記事
BuzzOSC