p5.jsでleapmotionと連携する

# 概要

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

# 環境設定
[leap motion](https://www.leapmotion.com/setup/desktop/)のアプリをインストールしてpcとleap motionが繋がるかの確認をしましょう
アプリをインストールしたら手順通りに進んでいって、
<img width="197" alt="Screen Shot 2019-09-26 at 14.20.20.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/d1e9d89b-4571-995c-b63d-7a5eeefa23c4.png">
メニューバーにこのような緑のアイコンが出ていれば成功です。
![Screen Shot 2019-10-02 at 10.25.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/a569b086-44ad-566d-b189-7a01df66bc0b.png)
繋がっていない場合はこのように黒く表示されます。

# 手順
## 1 p5.editorを開く
[p5 editor](https://editor.p5js.org/)にアクセスして新しいプロジェクトを作ります。

## 2 leapmotion読み込み設定
<img width="1680" alt="Screen Shot 2019-09-26 at 13.48.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/5a27ce3f-5e84-896e-14ea-90a797e537ee.png">
sketch.jsの左に見える矢印みたいなところからindex.htmlを探してください
<img width="1680" alt="Screen Shot 2019-09-26 at 13.49.09.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/73038101-7729-db03-f877-27d36274db0b.png">

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);
}
```
<img width="489" alt="Screen Shot 2019-09-26 at 14.16.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/181534/f0276a78-0a9e-35e2-90c9-b14cf16d79e5.png">
こんな感じで出てきます。

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