p5.jsでleapmotionと連携する

概要

leapmotionをp5環境で動かしていく手順を記していきます。

環境設定

leap motionのアプリをインストールしてpcとleap motionが繋がるかの確認をしましょう
アプリをインストールしたら手順通りに進んでいって、

メニューバーにこのような緑のアイコンが出ていれば成功です。

繋がっていない場合はこのように黒く表示されます。

手順

1 p5.editorを開く

p5 editorにアクセスして新しいプロジェクトを作ります。

2 leapmotion読み込み設定

sketch.jsの左に見える矢印みたいなところからindex.htmlを探してください

7行目の最初を選択してEnterキーを押しましょう。
ここにleapmotionのCDNを読み込んでいきます。

    <script src="https://cdnjs.cloudflare.com/ajax/libs/leapjs/0.6.1/leap.js"></script>

この一行を追加していってください。

よくサンプルをみるとhttp://js.leapmotion.com/leap-0.6.3.min.js
から読み込んでいるのが多いのですが、サーバーが停止しているようで読み込めませんので
もし他のサンプルコードを動かす際にはこのコードから上のコードに書き換えてあげると動く可能性が高いです。

3 実装

以下のコードを書いてみましょう

sketch.js

// https://editor.p5js.org/dansakamoto/sketches/S1G0seZ0mのコードを参考にしています。

function setup() {
  // キャンバスの作成
  createCanvas(800,800);
  //色の設定
  fill(255);
  // 枠線なし
  noStroke();

  // leapを描画する設定
  Leap.loop(drawHand);  
  // leapの描画微調整
  translate(width/2, 2*height/3); 
}

// 毎フレームでこの関数が呼ばれる
function drawHand(frame) {
  // 背景は黒
  background(0); 
  // handの数だけそれぞれの関節の位置を描画します
  frame.hands.forEach(drawBrush);
}

function drawBrush(hand){

    // 親指
    fill(255, 255, 255);
    ellipse(hand.thumb.tipPosition[0], -hand.thumb.tipPosition[1], 10);
    ellipse(hand.thumb.dipPosition[0], -hand.thumb.dipPosition[1], 10);
    ellipse(hand.thumb.pipPosition[0], -hand.thumb.pipPosition[1], 10);
    ellipse(hand.thumb.tipPosition[0], -hand.thumb.tipPosition[1], 10);
    ellipse(hand.thumb.mcpPosition[0], -hand.thumb.mcpPosition[1], 10);
    ellipse(hand.thumb.carpPosition[0], -hand.thumb.carpPosition[1], 10);

    // 人差し指
    fill(255, 0, 0);
    ellipse(hand.indexFinger.tipPosition[0], -hand.indexFinger.tipPosition[1], 10);
    ellipse(hand.indexFinger.dipPosition[0], -hand.indexFinger.dipPosition[1], 10);
    ellipse(hand.indexFinger.pipPosition[0], -hand.indexFinger.pipPosition[1], 10);
    ellipse(hand.indexFinger.tipPosition[0], -hand.indexFinger.tipPosition[1], 10);
    ellipse(hand.indexFinger.mcpPosition[0], -hand.indexFinger.mcpPosition[1], 10);
    ellipse(hand.indexFinger.carpPosition[0], -hand.indexFinger.carpPosition[1], 10);

    // 中指
    fill(255, 255, 0);
    ellipse(hand.middleFinger.tipPosition[0], -hand.middleFinger.tipPosition[1], 10);
    ellipse(hand.middleFinger.dipPosition[0], -hand.middleFinger.dipPosition[1], 10);
    ellipse(hand.middleFinger.pipPosition[0], -hand.middleFinger.pipPosition[1], 10);
    ellipse(hand.middleFinger.tipPosition[0], -hand.middleFinger.tipPosition[1], 10);
    ellipse(hand.middleFinger.mcpPosition[0], -hand.middleFinger.mcpPosition[1], 10);
    ellipse(hand.middleFinger.carpPosition[0], -hand.middleFinger.carpPosition[1], 10);

    // 薬指
    fill(0, 255, 0);
    ellipse(hand.ringFinger.tipPosition[0], -hand.ringFinger.tipPosition[1], 10);
    ellipse(hand.ringFinger.dipPosition[0], -hand.ringFinger.dipPosition[1], 10);
    ellipse(hand.ringFinger.pipPosition[0], -hand.ringFinger.pipPosition[1], 10);
    ellipse(hand.ringFinger.tipPosition[0], -hand.ringFinger.tipPosition[1], 10);
    ellipse(hand.ringFinger.mcpPosition[0], -hand.ringFinger.mcpPosition[1], 10);
    ellipse(hand.ringFinger.carpPosition[0], -hand.ringFinger.carpPosition[1], 10);

    // 小指
    fill(0, 0, 255);
    ellipse(hand.pinky.tipPosition[0], -hand.pinky.tipPosition[1], 10);
    ellipse(hand.pinky.dipPosition[0], -hand.pinky.dipPosition[1], 10);
    ellipse(hand.pinky.pipPosition[0], -hand.pinky.pipPosition[1], 10);
    ellipse(hand.pinky.tipPosition[0], -hand.pinky.tipPosition[1], 10);
    ellipse(hand.pinky.mcpPosition[0], -hand.pinky.mcpPosition[1], 10);
    ellipse(hand.pinky.carpPosition[0], -hand.pinky.carpPosition[1], 10);
}

こんな感じで出てきます。

　感想

以上で簡単にleapmotionと連携できる設定を行いました。
p5 editorとCDNってマジで便利ですね。。