はじめに
最近登場してきたswiftでクリエイティブコーディング可能なC4を使ってoFと連携させてみました.
今回はswiftを用いてOSC通信を送信する側だけを実装してみました.
手順
C4プロジェクトを作ります
こちらのサイトのサンプルを参考にしてみてください
私はC4公式サイトのチュートリアルのサンプルを用いて製作を行いました.
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()
}
}
}
このままコンパイルすると指をなぞると、その軌跡が円形となってでてきます.
まるで人魂が浮いているみたいで綺麗ですねー^ ^
このコードに対して指の座標位置をOSC通信を用いてMac上のoFプロジェクトに送信したと思います.
OSCの通信について
C4はswiftベースなのでswiftでOSC通信可能なサンプルを探してみたところ、このような記事にswiftとOSCを上手くつなげてるアメリカンピーポーがいました.
つまるところBuzzOSCというものを使っていたそうなので,早速使っていきます.
手順
githubからプロジェクトごと落としてくる
ファイル内の"F53OSCファイル"(写真参照)を丸ごと最初に作成したプロジェクトファイルの中に放り込みましょう！
なんてこったブリッジングヘッダが必要だ！
こちらのファイルの中身はなんとobjective-Cのため、swiftと架け橋をしてくれるBridgingヘッダを追加しなければなりません.
参考サイトとしてはこちらが詳しかったので、皆さんしっかり架け橋をかけてください.
C4プロジェクトにOSCをつなげていきましょう
それでは早速コードを公開します,追加する箇所は3箇所
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アドレスがわからなければ画像のようなところを調べれば大丈夫
bridgingヘッダのコードも一応
プロジェクト名が"C4test0409"のため,ブリッジングファイルの中身は次のようにしておけばOK
//
// 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"を忘れずに！
それぞれのコードを書いていく
既存のコードに追加するコードは2箇所
#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通信を実際に受け取り描画していきます
#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通信をする際許可を求めてくるので"許可"を選択しましょう！
ってな具合です！！
かなり早とちりで説明してきましたがいかがでしたでしょうか.
不備やこのほうがいいなどアドバイスがあればコメントしていただけると幸いです。
まだまだ未熟者ですのでどうぞ宜しくお願い致します！！！