LEAPtest - OpenProcessing

mySketch.js
style.css
index.html
xxxxxxxxxx
 
//https://qiita.com/asadsexyimp/items/15d00bb52ace1d7d134aより
​
// 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);
}
​