​

// Implemented

// Index/Palmpase angle

// Grab & Release

​

let handpose;

let video;

let predictions = [];

const option = {

  flipHorizontal: true,

};

let backgroundColor = 0;

let skeletonColor = 20;

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  handpose = ml5.handpose(video, option, modelReady);

​

  handpose.on("hand", (results) => {

    predictions = results;

  });

  video.hide();

  colorMode(HSB, 100);

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  // image(video, 0, 0, width, height);

  background(backgroundColor, backgroundColor, 100);

  hand();

}

​

function hand() {

  for (let i = 0; i < predictions.length; i += 1) {

    const prediction = predictions[i];

    drawSkeleton(prediction);

    update(prediction);

  }

}

​

function update(p) {

  let a = p.annotations;

  let indexFingerAngle = atan2(

    a.indexFinger[3][0] - a.palmBase[0][0],

    a.indexFinger[3][1] - a.palmBase[0][1]

  );

  backgroundColor = ((indexFingerAngle/PI)+1)*50

  let array = [

    dist(...a.indexFinger[3], ...a.palmBase[0]) <

      dist(...a.indexFinger[0], ...a.palmBase[0]),

    dist(...a.middleFinger[3], ...a.palmBase[0]) <

      dist(...a.middleFinger[0], ...a.palmBase[0]),

    dist(...a.ringFinger[3], ...a.palmBase[0]) <

      dist(...a.ringFinger[0], ...a.palmBase[0]),

    dist(...a.pinky[3], ...a.palmBase[0]) <

      dist(...a.pinky[0], ...a.palmBase[0]),

  ];

​

  // Error tolerance 1

  if (array.filter((x) => x).length >= 3) {

    backgroundColor = 100 - backgroundColor;

    // print("grab")

  }

}

​

function drawSkeleton(handPose) {

  if (!handPose) {

    return;

  }

​

  stroke(skeletonColor);

  strokeWeight(25);

  noFill();

​

  // Loop through all the skeletons detected

  const a = handPose.annotations;

​

  // For every skeleton, loop through all body connections

  for (let i = 0; i < a.thumb.length - 1; i++) {

    line(a.thumb[i][0], a.thumb[i][1], a.thumb[i + 1][0], a.thumb[i + 1][1]);

  }

  for (let i = 0; i < a.indexFinger.length - 1; i++) {

    line(

      a.indexFinger[i][0],

      a.indexFinger[i][1],

      a.indexFinger[i + 1][0],

      a.indexFinger[i + 1][1]

    );

  }

  for (let i = 0; i < a.middleFinger.length - 1; i++) {

    line(

      a.middleFinger[i][0],

      a.middleFinger[i][1],

      a.middleFinger[i + 1][0],

      a.middleFinger[i + 1][1]

    );

  }

  for (let i = 0; i < a.ringFinger.length - 1; i++) {

    line(

      a.ringFinger[i][0],

      a.ringFinger[i][1],

      a.ringFinger[i + 1][0],

      a.ringFinger[i + 1][1]

    );

  }

  for (let i = 0; i < a.pinky.length - 1; i++) {

    line(a.pinky[i][0], a.pinky[i][1], a.pinky[i + 1][0], a.pinky[i + 1][1]);

  }

​

  line(a.palmBase[0][0], a.palmBase[0][1], a.thumb[0][0], a.thumb[0][1]);

  line(

    a.palmBase[0][0],

    a.palmBase[0][1],

    a.indexFinger[0][0],

    a.indexFinger[0][1]

  );

  line(

    a.palmBase[0][0],

    a.palmBase[0][1],

    a.middleFinger[0][0],

    a.middleFinger[0][1]

  );

  line(

    a.palmBase[0][0],

    a.palmBase[0][1],

    a.ringFinger[0][0],

    a.ringFinger[0][1]

  );

  line(a.palmBase[0][0], a.palmBase[0][1], a.pinky[0][0], a.pinky[0][1]);

​

  fill(skeletonColor);

  beginShape();

  for (let p in a) {

    vertex(a[p][0][0], a[p][0][1]);

  }

  endShape(CLOSE);

}

​