let video;

let hands = [];

​

let circleCoordinates = [];

let trailLife = 30;

​

function preload() {

  handpose = ml5.handpose();

}

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

  video.hide();

  handpose.detectStart(video, gotHands);

}

​

// Callback function for when handpose outputs data

function gotHands(results) {

  hands = results;

  console.log(hands);

}

​

function draw() {

  // Draw the webcam video

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

  // drawKeyPoints();

  getFingers();

}

​

function drawKeyPoints() {

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

    let hand = hands[i];

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

      let keypoint = hand.keypoints[j];

      fill(0, 255, 0);

      noStroke();

      circle(keypoint.x, keypoint.y, 10);

    }

  }

}

​

function getFingers() {

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

        let thumb = hands[i].thumb_tip;

        let index = hands[i].index_finger_tip;

        let middle = hands[i].middle_finger_tip;

        let ring = hands[i].ring_finger_tip;

        let pinky = hands[i].pinky_finger_tip;

        let wrist = hands[i].wrist;

​

        fingersCenterX = (index.x + middle.x + ring.x + pinky.x)/4;

        fingersCenterY = (index.y + middle.y+ ring.y + pinky.y)/4;

​

        circleCenterX = (fingersCenterX + wrist.x)/2;

        circleCenterY = (fingersCenterY + wrist.y)/2;

        let pinch = dist(fingersCenterX, fingersCenterY, thumb.x, thumb.y);

        drawTrails(circleCenterX, circleCenterY, pinch);

    }

}

​

function drawTrails(circleCenterX, circleCenterY, pinch) {

  circleCoordinates.push({x: circleCenterX, y: circleCenterY});

  if (circleCoordinates.length > trailLife) {

     circleCoordinates.shift();

  }

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

    noStroke();

    fill((circleCenterX%255), (circleCenterY%255), (circleCenterX+circleCenterY%255), 100);

    circle(circleCoordinates[i].x, circleCoordinates[i].y, pinch);

  }

}

​