最近だと、昨年末に以下の記事を書いたりして扱った「Leap Motion」の話題です。

●【p5.js 2021（2つ目）】 Leap Motion（leap.js）を p5.js Web Editor上（JavaScript）で扱う - Qiita
　https://qiita.com/youtoy/items/3fa599ed872dfe7ab1da

↓ Leap Motion はこちら

そして上記の記事と同じで、JavaScript で扱う話です。しかし、今回の内容が上記の記事と違っている点は公式ライブラリ「leap.js」を利用せずに情報を取得する部分です。

Leap Motion の情報を WebSocket で取得するための接続先

冒頭の記事でも少し触れていた部分があったのですが、PC向けの Leap Motion用アプリをインストールしてから、PC に Leap Motion をつなぐと、Leap Motion で取得された情報が WebSocket で取得できるようです。
Leap Motion用アプリの中に、WebSocketサーバーとして動作する処理が含まれている感じだと思われます。

Leap Motion の情報を WebSocket で取得する際の接続先

Leap Motion の情報を WebSocket で取得する際の、WebSocketサーバーの接続先アドレス・ポートは
ws://【IPアドレスなど】:6437
になるようです。
ローカルで動かしてアクセスする場合は、例えば ws://localhost:6437 を指定してやれば OK です。

Leap Motion の情報を WebSocket で取得する

それでは、簡単なプログラムを使って、情報を取得してみます。

HTML＋JavaScript で情報取得

まずは、HTML＋JavaScript のファイルをブラウザで動かす方法でやってみます。具体的には以下の内容です。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <script>
      const URL = "ws://localhost:6437";
      const exampleSocket = new WebSocket(URL);
      exampleSocket.onopen = function (event) {
        console.log("open!");
      };
      exampleSocket.onmessage = function (event) {
        console.log(event);
      };
    </script>
  </body>
</html>

WebSocketサーバーに接続する処理を行い、その後の WebSocket によるメッセージ受信のイベント発生時に、受信した内容をログに書き出すだけというシンプルなものです。これを実行した結果、コンソールに以下のような情報がどんどん出力されてきました。

今回は情報が取得できることを確認するだけにして、中身の細かな部分は、また後で見ていこうと思います。

p5.js（p5.js Web Editor上）で情報取得

次は、p5.js Web Editor上の p5.js のプログラムでの情報取得です。以下は、p5.js Web Editor上で動かした sketch.js の内容です。

const WSURL = "ws://localhost:6437";
let exampleSocket, eventLeapMotion;

function setup() {
  createCanvas(500, 500);

  let exampleSocket = new WebSocket(WSURL);
  exampleSocket.onopen = function (event) {
    console.log("open!");
  };
  exampleSocket.onmessage = function (event) {
    eventLeapMotion = event;
    console.log(eventLeapMotion);
  };
}

function draw() {
  background(220);
  // ここで、 eventLeapMotion を使う何かの処理を実行すると良さそう？
}

上記のプログラムを動かして、p5.js Web Editor のコンソールに情報が随時出力されるのを確認できました。

おわりに

今回、Leap Motion の情報を WebSocketサーバー経由で取得するのを試しました。
ブラウザ上で JavaScript のプログラムを使うなら、ライブラリを使うほうが情報取得の後の処理を進めるのには良さそうな気がしますが、一方、何らか Leap Motion を接続した PC にネットワーク経由で接続している別デバイスなどで、この　Leap Motion の情報を取得したいという場合などは、この仕組みが便利に使えそうです。