openFrameworksからVDMXにSyphonでリアルタイム映像を送信する

oFとVDMXを連携する方法を記す。他者さんの同様の記事もあったが、情報が古かったので自分なりにまとめ直した。

Syphonとは、アプリケーション間で映像をリアルタイムやり取りするためのフレームワークです。同様のフレームワークにNewTekのNDIがある。

VDMXとはコンピューターでリアルタイムに映像をプレゼン演出するためのアプリで、結婚式やコンサート、クラブDJの映像演出によく使われる。あと学園祭でも使われたりする。
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588661/fb22304c-a1c9-87e0-9f33-a2452dc363a7.png)

https://www.youtube.com/watch?v=Xm2dnBkzsfQ

openFrameworksについては参考リンクにWiki貼っとく。

# 環境

- Intel CPU
- OS 11.7.10
- openFrameworks 0.12.0

# ダウンロード
必要なものをダウンロードする

- openFrameworks
- ofxSyphon
openFrameworksのホームページのaddonsからリンクを辿れるのでダウンロードする
- VDMX

https://openframeworks.cc/ja/

https://www.vidvox.net/

# oFプロジェクトを生成する
ダウンロードしたofxSyphonはopenFrameworks/addonsフォルダ配下に格納する
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588661/6d89f6f1-a80a-9805-17d5-eb4ce19ecc21.png)

projectGeneratorを立ち上げたらAddonsにofxSyphonを追加して、他はいじらずにGenerateボタンを押す
![23a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588661/8c184f84-a785-2524-990a-5a0391e6ac59.png)

するとプロジェクトがopenFrameworks/apps/myApps以下に生成される
![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/588661/ac8d44a7-a686-6345-015e-0b2858a184e7.png)

# 適当なアニメーションを書く
とりあえず動作確認として、Syphon関係なしにアニメーションを書いてみる

```c++:ofApp.h
#include "ofMain.h"

class ofApp : public ofBaseApp{

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

    int r,add;

};

```


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

//--------------------------------------------------------------
void ofApp::setup(){
    r=10;
    add=10;
}

//--------------------------------------------------------------
void ofApp::update(){
   if(r==200)add=-10;
    if(r==10)add=10;
    r=r+add; 
}

//--------------------------------------------------------------
void ofApp::draw(){
    //丸が大きくなったり、小さくなったりするだけのアニメーション

    ofSetColor(200, 0, 0);
    ofCircle(ofGetWidth()/2, ofGetHeight()/2, r);
}
```

# syphonでoFからアニメーションを送信
うまく行ってるようであれば続けてやる

```cpp:ofApp.h
#pragma once

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

class ofApp : public ofBaseApp{

    public:
        void setup();
        void update();
        void draw();
    ofxSyphonServer output;
    int r,add;

};
```

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

//--------------------------------------------------------------
void ofApp::setup(){
    output.setName("Main");
    r=10;
    add=10;
}

//--------------------------------------------------------------
void ofApp::update(){
   if(r==200)add=-10;
    if(r==10)add=10;
    r=r+add; 
}

//--------------------------------------------------------------
void ofApp::draw(){
    //丸が大きくなったり、小さくなったりするだけのアニメーション

    ofSetColor(200, 0, 0);
    ofCircle(ofGetWidth()/2, ofGetHeight()/2, r);
//ここで送信している
    output.publishScreen();
}
```

# VDMXでアニメーションを受信
VDMXを起動->Templates->simple mixerを選択
![](https://camo.qiitausercontent.com/78f73be03274a22bfbcb2e99db422816c07d0c38/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f34323635362f38626661303435342d386436642d646136652d636334662d3533633835323061383132352e706e67)

oFのアプリをビルド

右クリックでAdd clips from Built-in Sources->syphon->oFアプリを選択
![](https://camo.qiitausercontent.com/377ff2cbcc6ce5930b72316157fb4bc650ba4df1/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f34323635362f62346336646464312d366634622d636234362d323731662d3862326338353030626665342e706e67)

# 参考リンク

https://qiita.com/okawaryota/items/5ed9d975382caf7bfa9b

https://qiita.com/sanokazuya0306/items/1985dd4a42672cc95241

https://ja.wikipedia.org/wiki/OpenFrameworks

応用して、Syphon出力するVJ用の時計アプリclockSyphonを作ったよ。他にもストップウォッチ(stopwatchSyphon)とカウントダウン時計(countdownSyphon)もあるからよろしく

https://qiita.com/HXYoUGZ/items/21d6f8ec3643f885bbbd