let video;

let hands = [];

let w;

let webbing = [];

let keypointL, keypointR;

​

function preload() {

  // Load the handPose model

  handPose = ml5.handPose({ flipped: true });

}

​

function setup() {

  createCanvas(640, 480);

  // Create the webcam video and hide it

  video = createCapture(VIDEO, { flipped: true });

  video.size(640, 480);

  video.hide();

  // start detecting hands from the webcam video

  handPose.detectStart(video, gotHands);

​

  for (let i = 0; i < 21; i++) {

    w = new Webbing();

    webbing.push(w);

  }

}

​

function draw() {

  // Draw the webcam video

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

  let other = createVector(width/2, height/2)

  circle(other.x, other.y, 20);

​

  if (hands[0] != undefined && hands[0].handedness == "Left") {

    noStroke();

    fill(255, 0, 0);

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

      let hand = hands[i];

      for (let j = 0; j < hand.keypoints.length; j++) {

        keypointL = hand.keypoints[j];

        w.display(keypointL.x, keypointL.y);

      }

    }

​

    if (hands[1] != undefined && hands[1].handedness == "Right") {

      noStroke();

      fill(0, 255, 0);

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

        let hand = hands[i];

        for (let j = 0; j < hand.keypoints.length; j++) {

          keypointR = hand.keypoints[j];

          w.display(keypointR.x, keypointR.y);

        }

      }

    } 

  }

​

  if (hands[0] != undefined && hands[0].handedness == "Right") {

    noStroke();

    fill(0, 255, 0);

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

      let hand = hands[i];

      for (let j = 0; j < hand.keypoints.length; j++) {

        keypointR = hand.keypoints[j];

        w.display(keypointR.x, keypointR.y);

      }

    }

​

    if (hands[1] != undefined && hands[1].handedness == "Left") {

      noStroke();

      fill(255, 0, 0);

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

        let hand = hands[i];

        for (let j = 0; j < hand.keypoints.length; j++) {

          keypointL = hand.keypoints[j];

          w.display(keypointL.x, keypointL.y);

        }

      }

    }

  }

}

​

// Callback function for when handPose outputs data

function gotHands(results) {

  // save the output to the hands variable

  hands = results;

}

​