openFrameworksとResolumeで、簡単プロジェクションマッピング

#はじめに
こんにちは！メディアアートコースメンターのきゃりーです。Life is Tech ! のAdvent Calendar、7日目です！
みなさんPCで開発してるけど、画面の中だけじゃ物足りなくなってきていませんか？
そこで今日はResolumeを使って、プロジェクションマッピングをする方法を紹介しようと思います！
ちなみにopenFrameworksを使わずに、動画ファイルだけでもできるので、openFrameworks使わない人も是非読んでみてください！


#Resolumeとは
Resolumeとは、オーディオヴィジュアルパフォーマンスに使うツールです。ビデオ、オーディオとオーディオヴィジュアルの作品の再生、ミックス、エフェクト効果の適用、ライブパフォーマンスなどに使用できます。
MIDI, DMX,Open Sound Controlなどを用いたインスタレーションにも最適みたいです。
[参考](https://resolume.com/manual/ja/r4/start)

#やること
今回は、このような6面体の白い箱にマッピングしていきます！一面には、ResolumeのExampleを、もう一面には、これから入れる動画ファイルとopenFraemworksのプロジェクトをうつします。
<img width="621" alt="スクリーンショット 2016-11-07 12.45.39.png" src="https://qiita-image-store.s3.amazonaws.com/0/96807/e28a9429-1ba7-82a8-74ad-602dc21ed1ae.jpeg">



#Resolumeの準備
まずはResolumeの準備をしましょう！

##ダウンロード
ここから体験版をダウンロード&インストールしましょう。
[Resolume Download](https://resolume.com/download/)
今回はResolume5で紹介します。

開くとこんな感じ。最初に出てくるExampleを、このまま使用していきます。
![スクリーンショット 2016-12-07 18.40.46.png](https://qiita-image-store.s3.amazonaws.com/0/96807/eb2f9fbe-35f3-2bd1-f2cf-fcff8643de5d.png)

ちなみにExampleファイルは、
`書類/Resolume Arena 5/compositions`の中に、もともと入っている映像や音源は、`アプリケーション/Resolume Arena 5.1.2/media/AV`の中にあります。もし、後で消しちゃったけど、もう一回入れたい！って言う時にはここから。

##言語設定
分かりやすいように日本語にします。
`View/Language/日本語`を選択して、Resolumeを再起動します。
<img width="965" alt="スクリーンショット 2016-12-07 18.51.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/96807/9946a872-58a9-ca97-8345-31f88dea50ad.png">

#openFrameworksの準備
では次にoF側の設定をしましょう！
動画ファイルのみを使用する場合は、とばして大丈夫です。

##Addonの準備
以下からAddonをダウンロードし、addonsフォルダへコピーします。
[ofxSyphon](https://github.com/astellato/ofxSyphon)

##プログラム
まずofxSyphonを入れて新規プロジェクトを作成、または既存のプロジェクトにofxSyphonを追加します。（補足：[リンク](http://qiita.com/ma286/items/954ea2020c3fb25b0c71))
次に、SyphonでopenFraemworksのスケッチを送るようにします。
`...`は省略を意味しています。

```ofApp.h
...

#include "ofxSyphon.h"

class ofApp : public ofBaseApp{

...

  ofxSyphonServer mainOutputSyphonServer;
}
```

```ofApp.cpp
void ofApp::setup(){
...

  mainOutputSyphonServer.setName("Screen Output");
}

void ofApp::draw(){
...

  mainOutputSyphonServer.publishScreen();
}
```
あとは、`mainOutputSyphonServer.publishScreen();`がdraw()の最後になるように注意しながら、プログラムを書いていきましょう！

#出力の準備
縦と横は、Layerとコラムに分かれています。縦に並べた映像は重ねられますが、横に並べたものは同時に選択することはできません。例えば、layer3のコラム1と、layer3のコラム2は、重ねて同時に表示することはできません。
今回は動画とopenFraemworksの映像を、Exampleとは別の面にうつすため、メニューバーからレイヤー->新規を選択し、レイヤーを2つ追加しましょう。layer4には動画ファイルを、layer5にはopenFraemworksのプロジェクトを入れていきます。
<img width="686" alt="スクリーンショット 2016-12-07 20.14.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/96807/f4135f84-eaab-b20a-d8a1-0ecada8954da.png">


##動画ファイル
動画ファイルをドラッグ&ドロップで、layer4の好きなところに入れましょう。
mp4は入らないので注意！movなら大丈夫です。
![input_movie4.gif](https://qiita-image-store.s3.amazonaws.com/0/96807/8e7d7848-1f83-4b0e-d8ba-1fd88057f252.gif)


##openFrameworks
先ほど書いたプロジェクトを実行しましょう！
すると、右下の枠の中のソースのSyphonの中にプロジェクトが出てくるはずなので、layer5にドラッグ&ドロップしましょう。
<img width="2110" alt="スクリーンショット 2016-12-07 20.40.07-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/96807/2bc66e9b-d995-097c-2960-c78d906fded7.png">



#出力する
いよいよマッピングです！
プロジェクターと接続してください！接続したらミラーリングを切りましょう。

##出力設定
メニューバーの、出力->アドバンススクリーン設定を選択します。

まずScreen1を選択し、右側のデバイスをDisplayにしましょう。プロジェクターにうつったらOKです！
<img width="2038" alt="スクリーンショット 2016-12-07 20.52.33-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/96807/651d16b5-fc81-4f46-990b-012737f2b56b.png">


次にスライスを増やします。左側のプラスマークを押し、スライスを選択しましょう。1つのスライスに、1つのレイヤーをのせていきます。
<img width="2036" alt="スクリーンショット 2016-12-07 20.51.41-2.png" src="https://qiita-image-store.s3.amazonaws.com/0/96807/a688e43c-f90f-9e0f-8551-d262cfb8a22d.png">

はじめにSlice1の設定をしましょう。入力選択の右側、入力ソースをLayer1にします。出力変形を選択し、ここで映像を図形に合わせていきます。ポイントを編集を選択し、画面とうつしだされたものを見比べながら、点を動かしましょう。

![IMG_2406.JPG](https://qiita-image-store.s3.amazonaws.com/0/96807/4aef02e9-adfc-7d2c-15bb-884c04e561fe.jpeg)

他のスライスも同様にします。

すべての調整ができたら...完成！
保存をして閉じることを忘れずに。
![sample2-5.gif](https://qiita-image-store.s3.amazonaws.com/0/96807/5147ce00-5e5e-4a2c-5abb-45688f80db49.gif)
実際にやってみると音のMIXも同時に出来て面白いです！！！

#さいごに
Resolumeはもっといっぱい面白いことができます。
体験版だと時々喋るし、ロゴうつっちゃうけど、ぜひ楽しんでください。
そしてもっと色々したいよ〜という方は、こちらもぜひどうぞ。
[Resolume Avenue & Arena Manual](https://resolume.com/manual/ja/r4/start)
[Resolume Basics Tutorial](https://vimeo.com/164106907)

MadMapperも使ってみたい！という人はこちらも。
[openFrameworks0.9.~+MadMapper でプロジェクションマッピング](http://qiita.com/Hiroki11x/items/847ea309b6be65da08a0)

明日はれもん🍋による便利ツール10選です〜！