let video;

let hands = [];

let showFire = false;

let scalar = 1;

let translateX = 0;

let translateY = 0;

let thumbX;

let thumbY;

let indexX;

let indexY;

const options = {

  flipHorizontal: false,

};

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

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

​

  // This sets up an event that fills the global variable "predictions"

  // with an array every time new hand poses are detected

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

    hands = results;

  });

​

  // Hide the video element, and just show the canvas

  video.hide();

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  background(220);

  translate(video.width + translateX, 0 + translateY);

  scale(-scalar, scalar);

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

​

  // We can call both functions to draw all keypoints and the skeletons

  drawKeypoints();

  hand = hands[0]

  //console.log(hand)

  if (hand){

    k = hand.landmarks

    console.log("x",k[8][0])

    console.log("y", k[8][1])

  }

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

    const hand = hands[i];

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

      const keypoint = hand.landmarks[j];

      fill(0, 255, 0);

      noStroke();

      if (j == 4 || j == 8) {

        fill(255, 0, 0);

        if (j == 4) {

          thumbX = keypoint[0];

          thumbY = keypoint[1];

        }

        if (j == 8) {

          indexX = keypoint[0];

          indexY = keypoint[1];

        }

        const size = dist(thumbX, thumbY, indexX, indexY);

        // console.log(size);

        if (size >= 100) {

          scalar += 0.001;

        }

        if (size <= 40) {

          scalar -= 0.001;

        }

        if (indexX >= width/2) {

          translateX -= 0.25;

        }

        if (indexX < width/2) {

          translateX += 0.25;

        }

        if (indexY >= height/2) {

          translateY += 0.25;

        }

        if (indexY < height/2) {

          translateY -= 0.25;

        }

      }

      ellipse(keypoint[0], keypoint[1], 10, 10);

    }

  }

}