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行足してください。

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

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

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

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

p5.js Web Editor の #p5js のプログラムから osc.js を使った OSC通信（OSC over WebSocket を利用）、 OSC Data Monitor で無事にデータを受信できた！

ブラウザでは、OSC over UDP が使えないので、OSC over WebSocket を使い、Node.js のプログラムが UDP へ変換をする構成。 pic.twitter.com/e8f6AN6MfL

— you (@youtoy) November 21, 2021

マウスの動きを使ってみる

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

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() を試してみたくて、使ってみています。

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

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

p5.js Web Editor の #p5js のプログラムから osc.js を使った OSC通信（OSC over WebSocket を利用）、 さらに送り側の処理を変えたものでテスト。

マウス操作とキー操作で、送る値をいろいろ変える形のものにしてみた。
（この後にやろうとしていることの準備的な実装） pic.twitter.com/U5NvM1y4aC

— you (@youtoy) November 21, 2021

　

おわりに

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

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