p5.js Web Editor のプログラムから osc.js を使った OSC通信（OSC over WebSocket を利用）

以下の続きです。

●osc.js でブラウザから OSC Data Monitor に OSC over WebSocket でデータを送る（とりあえず片方向） - Qiita
　https://qiita.com/youtoy/items/0f170f4f86f6d7bf52ad

上記の記事では、HTML+JavaScript のプログラムから OSC over WebSocket の通信を行いました。
（HTML内で読み込んだライブラリは osc.js のみ）

今回は、p5.js Web Editor上の p5.js を使ったプログラムで、 OSC over WebSocket を利用します。

## p5.js で  OSC over WebSocket を使った通信
### 構成
今回、OSC の通信を試すにあたり、冒頭の記事の内容と同様に OSC Data Monitor を受け側として使います。
また、ブラウザ上で  OSC over UDP は使えないので、OSC over WebSocket を受けて OSC over UDP の通信を行ってくれる仲介役が必要ですが、冒頭の記事の中で使った Node.js のプログラムがそのまま使えます（※ 何も手を加えず使います）。

今回扱うのは、主に p5.js Web Editor上の p5.js のプログラムのみです。

### 簡単な通信のテスト（ボタン押下を使う）
まずは、ボタン押下で p5.js側から  OSC Data Monitor にデータを送る、というのを試します。

前回の記事と同様に、ブラウザ側で素の WebSocket を使うと通信周りでエラーがでるので、osc.ｊｓ のライブラリを用いた実装にします。前回の記事で使った CDN上のライブラリを、p5.js Web Editor の index.html内で読み込んでやるだけで OK です。

以下のスクリプトタグを 1行足してください。

```html
<script src="https://cdn.jsdelivr.net/npm/osc@2.4.2/dist/osc-browser.min.js"></script>
```

後は、sketch.js を書いていきます。
送信を簡易に行うだけの、シンプルなものを用意してみます。

```javascript
let socket;

function setup() {
  createCanvas(500, 400);
  background(220);
  noLoop();

  socket = new osc.WebSocketPort({
    url: "ws://localhost:8081",
  });
  socket.open();
}

function draw() {}

function keyPressed() {
  if (key === "e") {
    send(70);
  } else if (key === "r") {
    send(80);
  }
}

function send(inputValue) {
  if (socket) {
    console.log("send "+inputValue);
    socket.send({
      address: "/trigger/synth",
      args: [
        {
          type: "f",
          value: inputValue,
        },
      ],
    });
  }
}
```

ここで送っている JSON は、以下の記事を書いた時に使った送信内容です。
前回の記事とは、送信する内容を別にしてみました。

●Sonic Pi による音の出力を Node.js のプログラム（osc.js を利用）から制御： OSC over UDP による通信 - Qiita
　https://qiita.com/youtoy/items/a158b847b142f0a134a6

動かしてみた結果は以下のとおりで、問題なく通信が行われていました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">p5.js Web Editor の <a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> のプログラムから osc.js を使った OSC通信（OSC over WebSocket を利用）、 OSC Data Monitor で無事にデータを受信できた！<br><br>ブラウザでは、OSC over UDP が使えないので、OSC over WebSocket を使い、Node.js のプログラムが UDP へ変換をする構成。 <a href="https://t.co/e8f6AN6MfL">pic.twitter.com/e8f6AN6MfL</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1462293176098508802?ref_src=twsrc%5Etfw">November 21, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### マウスの動きを使ってみる
今度は、キー押下とマウスの縦方向の動き、それぞれに連動して色々な値を送る処理でやってみました。

```javascript
let socket,
  isSend2 = false;

function setup() {
  createCanvas(500, 400);
  frameRate(10);

  socket = new osc.WebSocketPort({
    url: "ws://localhost:8081",
  });
  socket.open();
}

function draw() {
  background(220);

  const yc = constrain(mouseY, 0 + 50, height - 50);
  // console.log(yc);
  ellipse((width * 2) / 3, yc, 10);
  send(yc);

  if (isSend2) {
    ellipse(width / 3, height / 2, 30);
    send(30);
  }
}

function keyPressed() {
  if (key === "s") {
    isSend2 = true;
  } else if (key === "d") {
    isSend2 = false;
  }
}

function send(inputValue) {
  if (socket) {
    console.log("send " + inputValue);
    socket.send({
      address: "/trigger/synth",
      args: [
        {
          type: "f",
          value: inputValue,
        },
      ],
    });
  }
}
```

マウスの縦方向の座標について、以前、以下の記事で見た [constrain()](https://p5js.org/reference/#/p5/constrain) を試してみたくて、使ってみています。

●p5.jsで「mouseYで追従させてるけどこのライン越えると困るんだよな…」みたいな時はconstrainを使ってみよう : だらっと学習帳
　http://blog.livedoor.jp/reona396/archives/55903475.html

動かしてみたところ、以下のようになりました。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">p5.js Web Editor の <a href="https://twitter.com/hashtag/p5js?src=hash&amp;ref_src=twsrc%5Etfw">#p5js</a> のプログラムから osc.js を使った OSC通信（OSC over WebSocket を利用）、 さらに送り側の処理を変えたものでテスト。<br><br>マウス操作とキー操作で、送る値をいろいろ変える形のものにしてみた。<br>（この後にやろうとしていることの準備的な実装） <a href="https://t.co/U5NvM1y4aC">pic.twitter.com/U5NvM1y4aC</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1462298934584360961?ref_src=twsrc%5Etfw">November 21, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>　

## おわりに
冒頭の記事を書いた際、osc.js による OSC over WebSocket を利用した通信に対応したことで、p5.js でも簡単に OSC通信を用いることができました。

また、今後活用していければと思います。