let video;

let predictions = [];

let thumb, indexFinger;

let myNN

​

const options = {

  input:4,

  output:1,

  type:'classification'

}

​

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

​

  handpose = ml5.handpose(video, modelReady);

  myNN = ml5.neuralNetwork(options);

​

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

    if (results[0]){

      thumb = results[0].annotations.thumb[3];

      indexFinger = results[0].annotations.indexFinger[3]

      console.log(results[0])

    }

  });

​

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

  video.hide();

}

​

function keyPressed(){

  if(keyCode === 79){ // 'o'

    myNN.addData([thumb[0], thumb[1]], indexFinger[0], indexFinger[1], ['open'])

  } else if(keyCode === 67){// 'c'

    myNN.addData([thumb[0], thumb[1]], indexFinger[0], indexFinger[1], ['close'])

  } else if(keyCode === 32){// space to start training

    myNN.normalizeData()

    myNN.train({

      epoch: 50

    }, doneTraining)

}

​

}

​

function doneTraining(){

  myNN.classify([thumb[0], thumb[1], indexFinger[0], indexFinger[1]], gotResults)

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

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

​

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

  drawKeypoints();

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

  if(thumb&&indexFinger){

  fill("red")

  ellipse(thumb[0], thumb[1], 20, 20)

  fill('blue')

  ellipse(indexFinger[0], indexFinger[1], 20, 20)

}

}

​