let video;

let segmentation;

let touched = true;

let centerX;

let centerY;

let score = 0;

​

let handPose;

let hands = [];

​

​

let options = {

  maskType: "parts",

};

​

function preload() {

  bodySegmentation = ml5.bodySegmentation("BodyPix", options);

  // Load the handPose model

  handPose = ml5.handPose();

  block = loadImage("NoteBlockFlip.png");

  cursor = loadImage("Cursor.png");

}

​

function randomBlock() {

  bxPos = random (50, 540);

  byPos = random (50, 380);

}

​

function setup() {

  createCanvas(640, 480);

  // Create the video

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

​

  bodySegmentation.detectStart(video, gotResults);

  handPose.detectStart(video, gotHands);

}

​

function draw() {

  background(255);

  push()

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

  //move image by the width of image to the left

  translate(video.width, 0);

  //then scale it by -1 in the x-axis

  //to flip the image

  scale(-1, 1);

  //draw video capture feed as image inside p5 canvas

  image(video, 0, 0);

  image(video, 0, 0);

  if (segmentation) {

    image(segmentation.mask, 0, 0, width, height);

  }

  if (touched == true){

    randomBlock();

    touched = false;

  }

  image(block, bxPos, byPos, 50, 50);

  // If there is at least one hand

  if (hands.length > 0) {

    // Find the index finger tip and thumb tip

    let finger = hands[0].index_finger_tip;

​

    // Draw circles at finger positions

    centerX = finger.x;

    centerY = finger.y;

    image(cursor, round(centerX) - 20, round(centerY) - 15, 50, 50);

  }

  print(bxPos, byPos, centerX, centerY);

  if (bxPos <= centerX && centerX <= (bxPos + 50) && byPos <= centerY && centerY <= (byPos + 50)){

    print("Hello");

    touched = true;

    score ++;

  }

  else{

    print("No");

  }

  pop();

  textFont('Verdana');

  textSize(20);

  text("Blocks Hit: " + score, 20, 30);

  /*

  // Draw all the tracked hand points

  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);

    }

  }

  */

}

​

// callback function for body segmentation

function gotResults(result) {

  segmentation = result;

}

​

// Callback function for when handPose outputs data

function gotHands(results) {

  // save the output to the hands variable

  hands = results;

}

​