JUCEアプリでOSCをセンドする

# JUCE
JUCE (Jules' Utility Class Extensions)を使って簡単なOSCセンドアプリを作る備忘録


[JUCE](https://en.wikipedia.org/wiki/JUCE)使ってマルチタッチ情報をOSCで送信してみた。 
ROLI-Lightpad-Block MultiTouch to OSC. https://youtu.be/ksqfD9LUVe8

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/ksqfD9LUVe8/0.jpg)](http://www.youtube.com/watch?v=ksqfD9LUVe8)


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">JUCE使ってマルチタッチ情報をOSCで送信してみた。 <br>ROLI-Lightpad-Block MultiTouch to OSC. <a href="https://t.co/Cd5JBMgNt1">https://t.co/Cd5JBMgNt1</a></p>&mdash; tatmos (@tatmos) <a href="https://twitter.com/tatmos/status/918814555282726913?ref_src=twsrc%5Etfw">2017年10月13日</a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

# 対象
- JUCEをインストールしたばかりの人
- OSCを送るアプリを作ってみたい人
- Macユーザーで、XCodeちょっと触れる
- C++よくわからない（またはちょっとできる）

#OSCって？
OSC(Open Sound Control)を送信するアプリがあれば
Max7とかTouchDesignerとかその他アプリ(Unityなど）とかでも
とても簡単にアプリケーション間の通信ができます。

基本的には演奏情報送信のためのものなので、結構雑な情報のやりとりになるけど、
とにかく簡単に処理が書けるのが特徴です。

# 手順　JUCE超入門
## GUI Applicationを選択
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/dbf23553-9d5a-dc9c-6792-72352d077d52.png)
JUCEをインストールして起動するとこんな画面なのでとりあえず左上のGUI Applicationのところを押す。

# ProjectNameをつける
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/a185c0f9-673f-dbd8-551f-659a4d60174a.png)

ここでは「OSCSendTest」って名前に変更
右下の「Create」ボタンを押す

# プロジェクトができる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/e16e44b6-a61d-9c51-65d8-5c7a19f9bece.png)
プロジェクトができるので、これをビルドしてみましょう。

右上のXCodeアイコンを押すと

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/9c47ee36-352b-a274-bb1d-34bc3e4f5156.png)
こんな感じのXCodeプロジェクトができる。

左上の三角の再生ボタンを押して実行すると

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/9472e626-27ea-2f30-993a-5ee872230c7e.png)

Hello World!
なウィンドウがでてきます。

# OSCのモジュール追加

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/1dee4232-eee8-12d0-6f7f-952e81ab33b0.png)
JUCEに戻って
左側のModulesをダブルクリックして、プラスボタンを押して「juce_oscを選ぶ」

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/475c8e6b-f853-cab7-f00a-623e908e8ed0.png)

Modulesにjuce_oscが追加される。
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/2b4e8227-3f61-8113-411a-1171c6d1c16a.png)

# OSCを飛ばすように書き換える

## ヘッダーに追加
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/1c4ebd60-f63c-a128-8960-9ed9a67e985d.png)

``` MainComponent.h
private:
    //==============================================================================
    JUCE_DECLARE_NON_COPYABLE_WITH_LEAK_DETECTOR (MainContentComponent)
    OSCSender sender;
};
```
このOSCSender senderというのをここに書く。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/3098fd65-1db1-ec1d-b912-3ccc18cad7b9.png)

``` MainComponent.cpp
MainContentComponent::MainContentComponent()
{
    setSize (600, 400);
    
    if(! sender.connect("127.0.0.1",9001))
        printf("Error:could not connect to UDP port 9001.");
}
```
これで127.0.0.1 （自分のPCのIP）のポート9001に接続しようとします。失敗するとログにエラーメッセージがでます。
すでにそのポートを握っているアプリが他にあったらエラーになります。

## メッセージを送る
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/24a3665f-f7d9-7558-14c8-059a99dcbf37.png)

``` MainComponent.cpp
void MainContentComponent::paint (Graphics& g)
{
    // (Our component is opaque, so we must completely fill the background with a solid colour)
    g.fillAll (getLookAndFeel().findColour (ResizableWindow::backgroundColourId));

    g.setFont (Font (16.0f));
    g.setColour (Colours::white);
    g.drawText ("Hello World!", getLocalBounds(), Justification::centred, true);
    
    if(! sender.send ("/test",(float) 123.456))
        g.drawText("Error:could not connect to UDP port 9001.",20,60,200,40,true);
}
```
この　sender.sendで送ってます。
これを実行（右上のXCodeボタン押して再生ボタン押す）すると

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/78c2ca38-87d2-414d-7266-243c8fa747b7.png)

Maxで受け取った例。
こんな感じで、OSCが送れます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/dc4187cb-fd7e-5e8b-e066-59df1a510788.png)

TouchDesignerだとこんな感じ。

## 注意
受け取りPortが他のアプリで使われているとうまく送れないので注意。
例えば、同じIPで同じPortで受け取れるアプリは一つっぽいので、
複数アプリ起動時にうまく送れないとかある。　
この場合はPortを変更するなど対応すればいい。

## ここから先は
![image.png](https://qiita-image-store.s3.amazonaws.com/0/96808/7b1924da-c0f0-f8dc-b75d-c5c5fc1239fb.png)

JUCE/examplesにOSC関連のサンプルがあるのでそれを動かしてみるなど。

以上

# おまけ

2017年11月18日土曜にJUCEのもくもく会
[「JUCE超入門」「第20回エフェクターミニハッカソン」](https://effectorhack.connpass.com/event/69606/
)をやる予定です。