Processingでプロジェクションする時の便利コード書いた

# 概要
Processingでプロジェクション(マッピング)をする際、必要な機能や便利な機能をひとつのコードにまとめました。
VJなどProcessingから映像出力したい時全般に使えると思います。

## 動作検証環境
* Processing 3.5.3
* MadMapper 3.6.1
* Mac OS High Sierra
* Windows 10

# 使い方
コードを保存後、Processingを起動して スケッチ > ライブラリをインポート から「Spout」「Syphon」をダウンロードしてください。
その後、Processingの実行ボタンを押してMadMapperへの出力を確認してください。

# 特徴
## Windows / Mac 両対応の映像出力
映像出力ライブラリとしてWindowsではSpout、MacではSyphonを利用しています。
OSを自動判別して適切なライブラリを通して映像を出力するため、OSが異なるマシン間でのコードの書き換えの手間が省けます。

draw関数末尾に映像送信用コードを書いているので、これより上に描画処理を記述してください。

```java
void draw() {
  // ここに描画処理を記述
  // ...
  // ...

  // 映像を送信
  if (myOS == OS_LIST.MAC) {
    server.sendScreen();
  } else if (myOS == OS_LIST.WIN) {
    spout.sendTexture();
  }
}
```

## タイトルバーにテキストを表示するサンプル
<img width="800" alt="スクリーンショット 2019-10-16 16.11.21.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67311/a27cb8c4-2bfd-6618-7e75-ce029debae05.png">
<img width="800" alt="スクリーンショット 2019-10-16 16.12.42.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67311/d7dfb52a-5a7a-2c3a-ff2f-e8363ac48fbd.png">
実行画面ウィンドウのタイトルバーにテキストを表示するサンプルを付けました。
サンプルでは実行画面上で適当なキーを押すたびに"Normal Mode"と"Debug Mode"が切り替わります。
これを利用すれば現在のステータスや変数の値などを確認することができます。
PC+モニター1枚とプロジェクターというディスプレイ2面体制であれば、モニターにProcessingの実行ウィンドウを表示しておいてそちらでタイトルバーを観測することができます。

## テストパターン
<img width="400" alt="スクリーンショット 2019-10-16 16.32.28.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/67311/83f5bd68-2d38-b7d0-c2ae-ff6c5c99e716.png">
外枠の赤線で表示領域の確認・十字線でマッピングの中心の確認・中央の正円と正方形で歪みの確認ができるようにしました。

# コード
```java
import spout.*;
Spout spout;
import codeanticode.syphon.*;
SyphonServer server;

String OS_NAME = "";
enum OS_LIST {
  WIN, MAC, OTHER
};
OS_LIST myOS;

// タイトルバーのパラメータ表示サンプル
boolean isDebugMode = false;
String normalMessage = "Normal Mode";
String debugMessage = "Debug Mode";

void settings() {
  size(800, 600, P3D);
  PJOGL.profile=1;
}

void setup() {
  // OSの判定
  OS_NAME = System.getProperty("os.name").toLowerCase();
  if (isMac()) {
    myOS = OS_LIST.MAC;
  } else if (isWindows()) {
    myOS = OS_LIST.WIN;
  } else {
    // 判定できないOSを使用していた場合は起動させない
    println("OS判定エラー");
    exit();
  }

  // 映像送信用ライブラリのインスタンス化
  if (myOS == OS_LIST.MAC) {
    server = new SyphonServer(this, "Processing Syphon");
  } else if (myOS == OS_LIST.WIN) {
    spout = new Spout(this);
    spout.createSender("Processing Spout");
  }

  // タイトルバーの文字セット
  if (isDebugMode) {
    surface.setTitle(debugMessage);
  } else {
    surface.setTitle(normalMessage);
  }
}

void draw() {
  background(230);

  // テストパターン
  noFill();
  stroke(0);
  strokeWeight(5);
  line(width/2, 0, width/2, height);
  line(0, height/2, width, height/2);
  ellipse(width/2, height/2, height*0.5, height*0.5);
  rectMode(CENTER);
  rect(width/2, height/2, height*0.75, height*0.75);
  stroke(255, 0, 0);
  strokeWeight(10);
  rect(width/2, height/2, width, height);

  // 映像を送信
  if (myOS == OS_LIST.MAC) {
    server.sendScreen();
  } else if (myOS == OS_LIST.WIN) {
    spout.sendTexture();
  }
}

// キーを押すごとにモードを切り替えてタイトルバーの文字を更新
void keyPressed() {
  isDebugMode = !isDebugMode;

  if (isDebugMode) {
    surface.setTitle(debugMessage);
  } else {
    surface.setTitle(normalMessage);
  }
}

boolean isMac() {
  return OS_NAME.startsWith("mac");
}

boolean isWindows() {
  return OS_NAME.startsWith("windows");
}
```

# 参考URL
* [Processing から Syphon を使って MadMapper に実行結果を送信する \- Qiita](https://qiita.com/reona396/items/2fb5c24cbe8da6e832c0)
* [ProcessingとResolumeを連携させて、映像作ってみた時の話 \- Qiita](https://qiita.com/_miki/items/3e1ee4947ca4f456fa38)
* [Processing3\.0でSyphonを使用 \| office606](https://office606.org/archives/42/)
* [Processing 1\.0 \- Processing Discourse \- Detecting platform / OS?](https://www.processing.org/discourse/beta/num_1161115189.html)
* [Java 実行している OS を取得する方法 \| ホームページ制作のサカエン（墨田区）](https://www.saka-en.com/java/java-get-os/)
* [JavaのプログラムでMacかWindowsかを見分ける](https://mocha-java.com/mac-or-windows/)
* [実行結果ウィンドウのアイコン・タイトルを変更するには（3\.X用） \| 自己啓発。人生について考える](http://mslabo.sakura.ne.jp/WordPress/make/processing%E3%80%80%E9%80%86%E5%BC%95%E3%81%8D%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/%E5%AE%9F%E8%A1%8C%E7%B5%90%E6%9E%9C%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%81%AE%E3%82%A2%E3%82%A4%E3%82%B3%E3%83%B3%E3%83%BB%E3%82%BF%E3%82%A4%E3%83%88%E3%83%AB%E3%82%92%E5%A4%89%E6%9B%B4/)