let video;

let predictions = [];

let touched = true;

let bxPos;

let byPos;

let prediction;

let iFxPos;

let iFyPos;

let score = 0;

​

function preload() {

  block = loadImage("NoteBlockFlip.png");

  cursor = loadImage("Cursor.png");

}

​

function randomBlock() {

  bxPos = random (50, 540);

  byPos = random (50, 380);

}

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  handpose = ml5.handpose(video, modelReady);

​

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

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

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

    predictions = results;

  });

​

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

  video.hide();

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

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

  if (touched == true){

    randomBlock();

    touched = false;

  }

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

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

  indexFingerTrack();

  //print(prediction, iFxPos, iFyPos)

  print(bxPos, byPos, iFxPos, iFyPos);

  if (bxPos <= iFxPos && iFxPos <= (bxPos + 50) && byPos <= iFyPos && iFyPos <= (byPos + 50)){

    print("Hello");

    touched = true;

    score ++;

  }

  else{

    print("No");

  }

  pop();

  textFont('Verdana');

  textSize(20);

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

}

// A function to draw ellipses over the detected keypoints

function indexFingerTrack() {

  if (predictions.length > 0) {

    prediction = predictions[0];

    iFxPos = prediction.annotations.indexFinger[3][0]

    iFyPos = prediction.annotations.indexFinger[3][1]

    //print(prediction, iFxPos, iFyPos)

    noStroke();

    // Access the tip of the finger in the last element of the finger.points list (element with index 3) and draw the ellipse using its x-y coordinates and round them to the nearest integer

    //ellipse(round(iFxPos), round(iFyPos), 33, 33);

    image(cursor, round(iFxPos) - 25, round(iFyPos) - 10, 50, 50);

  }

}

​