Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
7
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

@Hiroki11x

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

この記事はクリエイティブコーディング Advent Calendar 2016の3日目のものです。

はじめに

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

ofxSyphonは、このサンプルを参考にみたいな雑な感じだったので。改めて、既存のopenFrameworksプロジェクトにofxSyphonを追加する方法を紹介します。

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

Syphonとは

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

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

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

img

環境

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

本記事の環境 Image 最新版のURL
Xcode 7.3.1 xcode https://developer.apple.com/download/
OSX 10.11.4 osx https://support.apple.com/ja_JP/downloads/macos
openFrameworks 0.9.2 openFrameworks http://openframeworks.cc/ja/download/
ofxSyphon Screen Shot 2016-12-03 at 12.58.39.png https://github.com/astellato/ofxSyphon

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

プロジェクトに設定をする

1. まずofxSyphonAddonとして追加します

Screen Shot 2016-12-03 at 13.11.05.png

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

Screen Shot 2016-12-03 at 13.15.57.png

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

Screen Shot 2016-12-03 at 13.17.30.png

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

Screen Shot 2016-12-03 at 13.18.50.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

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

Screen Shot 2016-12-03 at 13.57.39.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

同様にして 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

コードを書く

今回は、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();
}

実際の送信結果

Resolume Arena 5

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

Screen Shot 2016-12-03 at 14.05.02.png

VDMX5

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

Screen Shot 2016-12-03 at 14.10.29.png

MadMapper

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

Screen Shot 2016-12-03 at 14.15.02.png

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
7
Help us understand the problem. What are the problem?