ofxSyphonを既存のopenFrameworksプロジェクトに追加する

この記事は[クリエイティブコーディング Advent Calendar 2016](http://qiita.com/advent-calendar/2016/creative-coding)の3日目のものです。

#__<i class="fa fa-connectdevelop" aria-hidden="true"></i>はじめに__

以前openFrameworksとMadMapperを使ってプロジェクションマッピングするみたいな話を書きましたが、
http://qiita.com/Hiroki11x/items/847ea309b6be65da08a0

ofxSyphonは、この[サンプル](https://github.com/Hiroki11x/openFrameworksSample/tree/master/ofxSyphon_Sample)を参考にみたいな雑な感じだったので。改めて、既存のopenFrameworksプロジェクトにofxSyphonを追加する方法を紹介します。

[追記]ProjectGenaratorなめてたんですが、updateするだけでできるのですね、それでもできなかった人oF0.8.~の方は以下を参考にしてください。

#__<i class="fa fa-newspaper-o" aria-hidden="true"></i> Syphonとは__

http://syphon.v002.info/ の説明を翻訳すると

> SyphonはオープンソースのMac OS Xテクノロジーで、アプリケーションはフルフレームレートのビデオや静止画をリアルタイムで相互に共有できます。 今では、ジョブの各部分に最適なツールを使用して、イメージをミックス、マッシュ、編集、サンプル、テクスチャマップ、合成、および提示するための多彩なツールの表現力を活用できます。 Syphonは、シングルアプリケーションソリューションから抜け出し、ニーズに合わせてクリエイティブアプリケーションを組み合わせる柔軟性を提供します。

みたいです。以下のようなソフトウェア、アプリケーションで利用できるようです。

<img class="aligncenter size-full wp-image-17237" src="https://qiita-image-store.s3.amazonaws.com/0/56510/7237fe53-40c3-c153-c43e-a5e97b8a5d4b.png" alt="img" width="70%" />


#__<i class="fa fa-apple" aria-hidden="true"></i> 環境__

今回はOSX環境のみの紹介になります。基本的に私の環境が少し古いですが、ほとんど、最新バージョンと互換性があるみたいなので最新に全部持っていけば問題ないかと思います。

| 本記事の環境 | Image | 最新版のURL |
|:-----------|:------------|:------------|
|Xcode 7.3.1      | ![xcode](https://qiita-image-store.s3.amazonaws.com/0/56510/ad720bfc-c7a5-729b-981f-822c49df47da.png) | https://developer.apple.com/download/|
|  OSX 10.11.4  | ![osx](https://qiita-image-store.s3.amazonaws.com/0/56510/23068b0d-ed5c-dd2e-d613-3fb80e12cf8d.png) | https://support.apple.com/ja_JP/downloads/macos|
|  openFrameworks 0.9.2  | ![openFrameworks](https://qiita-image-store.s3.amazonaws.com/0/56510/0cebb483-d1ab-c573-c77f-d74ee447c671.png) | http://openframeworks.cc/ja/download/|
|ofxSyphon    |![Screen Shot 2016-12-03 at 12.58.39.png](https://qiita-image-store.s3.amazonaws.com/0/56510/deabde2e-9357-0003-3f7a-ee738b2dcd25.png)| https://github.com/astellato/ofxSyphon | 

ただし、`ofxSyphon`の追加する位置は`OF_PATH/addons/`内です。

#__<i class="fa fa-cog" aria-hidden="true"></i> プロジェクトに設定をする__

### 1. まず`ofxSyphon`を`Addon`として追加します

![Screen Shot 2016-12-03 at 13.11.05.png](https://qiita-image-store.s3.amazonaws.com/0/56510/67c1869c-1fcf-2807-cddb-f3fcee882e09.png)

`addons`を右クリック(二本指でクリック)すると`Add Files to ofxSyphon_Sample(今回のプロジェクト名|ここは任意)`という選択肢が出てくるので、それを選択し、`OF_PATH/addons/`内に追加した`ofxSyphon`を`Add`を押して追加します。

![Screen Shot 2016-12-03 at 13.15.57.png](https://qiita-image-store.s3.amazonaws.com/0/56510/8398b417-f788-6af5-d335-8f1206bfee21.png)

すると以下のようにaddons内に追加されますが、青枠のものは必要ないので

![Screen Shot 2016-12-03 at 13.17.30.png](https://qiita-image-store.s3.amazonaws.com/0/56510/c36b1854-082b-2429-489b-8644ee57eb10.png)

右クリックで選択し、以下のように`Remove Reference`しましょう。

![Screen Shot 2016-12-03 at 13.18.50.png](https://qiita-image-store.s3.amazonaws.com/0/56510/ae77c829-de5d-6899-9e55-b08929b88a86.png)

###2. `XcodeProject`に対して設定を加えます。

__XcodeProject(ofxSyphon_Sample) > TARGETS > Build Phases__ を選択し、
以下のように、__`Compile Sources`__に

- `ofxSyphonClient.mm`
- `ofxSyphonServer.mm`
- `ofxSyphonServerDirectory.mm`
- `SyphonNameboundClient.m`

が追加されているか確認。

また、以下のように、__`Link Binary With Libraries`__に

- `Syphon.framework`

が追加されていることを確認してください。

![Screen Shot 2016-12-03 at 13.23.51.png](https://qiita-image-store.s3.amazonaws.com/0/56510/33904bbe-8937-8542-dee7-a5f5112712d1.png)

また、以下のように
__XcodeProject(ofxSyphon_Sample) > TARGETS > General > Embedded Binaries__ を選択し、

![Screen Shot 2016-12-03 at 13.57.39.png](https://qiita-image-store.s3.amazonaws.com/0/56510/5084667b-6b61-66b8-5ba9-deb2d54bad2d.png)

`Syphon.framework`を追加します。


次に、__XcodeProject(ofxSyphon_Sample) > TARGETS > Build Setting__を選択し、

__Search Path > Framework Search Path__ に

- `../../../addons/ofxSyphon/libs/Syphon/lib/osx`

を追加します。

![Screen Shot 2016-12-03 at 13.30.19.png](https://qiita-image-store.s3.amazonaws.com/0/56510/e0e486b5-3e69-e76f-a170-85d69f331a7c.png)

同様にして __Search Path > Header Search Path__ に以下の六つを追加します。

- `../../../addons/ofxSyphon/libs`
- `../../../addons/ofxSyphon/libs/Syphon`
- `../../../addons/ofxSyphon/libs/Syphon/lib`
- `../../../addons/ofxSyphon/libs/Syphon/lib/osx`
- `../../../addons/ofxSyphon/libs/Syphon/src`
- `../../../addons/ofxSyphon/src`

#__<i class="fa fa-file-code-o" aria-hidden="true"></i> コードを書く__

今回は、openFrameworksで描画したものをSyphonとしてServeする、つまり送信側の役割を書きたいと思います。手順は簡単で、SyphonServerに`setup()`で名前をつけてあげて、(全て送信したいなら)`draw()`の最後で,
`publishScreen()`を呼んであげるだけです。

```ofApp.h
#pragma once

#include "ofMain.h"
#include "ofxSyphon.h"

class ofApp : public ofBaseApp{
private:
    ofxSyphonServer mSyphonServer;

public:
    void setup();
    void update();
    void draw();
};
```

```ofApp.cpp
#include "ofApp.h"

//--------------------------------------------------------------
void ofApp::setup(){
    mSyphonServer.setName("Main");
}

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

//--------------------------------------------------------------
void ofApp::draw(){
    ofBackground(ofColor::fromHsb(ofGetFrameNum()%256,255,255));
    mSyphonServer.publishScreen();
}
```

#__<i class="fa fa-television" aria-hidden="true"></i> 実際の送信結果__

##Resolume Arena 5

VJソフトの一つ。
右側の __Source > Syphon__ の選択肢に。 
`ofxSyhon_SampleDebug - Main`みたいなのが出るのでそこを、Layerにドラッグアンドドロップします。
するとこんな感じ。
左側は生のoFの画面です。

![Screen Shot 2016-12-03 at 14.05.02.png](https://qiita-image-store.s3.amazonaws.com/0/56510/59254c0e-edb2-101f-7ca2-12146a538d5d.png)


##VDMX5

VJソフトの一つ。
__Right Scr > Use Source > Syphon > ofxSyhon_SampleDebug-Main__ を選択することでできます。

![Screen Shot 2016-12-03 at 14.10.29.png](https://qiita-image-store.s3.amazonaws.com/0/56510/8458b2f6-4bd7-651b-39e8-6e6e26e36efa.png)


##MadMapper 

プロジェクションマッピングなどによく用いられるソフトの一つ。
右側の入力ソースにSyphonの欄があるので、ofxSyhon_SampleDebug-Mainの左側の三角をクリックするとソースとして選択できます。

![Screen Shot 2016-12-03 at 14.15.02.png](https://qiita-image-store.s3.amazonaws.com/0/56510/c59468f9-3ce0-a5b3-1f9b-296e1ee41c11.png)


間違い等、指摘していただけると幸いです🙇