let handPose;

let video;

let hands = [];

let classification = "";

let isModelLoaded = false;

​

function preload() {

  // Load the handPose model

  handPose = ml5.handPose({ flipped: true });

}

​

function setup() {

  createCanvas(640, 480);

  textAlign(CENTER);

  // Create the webcam video and hide it

  video = createCapture(VIDEO, { flipped: true });

  video.size(640, 480);

  video.hide();

​

  // For this example to work across all browsers

  // "webgl" or "cpu" needs to be set as the backend

  ml5.setBackend("webgl");

​

  // Set up the neural network

  let classifierOptions = {

    task: "classification",

  };

  classifier = ml5.neuralNetwork(classifierOptions);

​

  const modelDetails = {

    model: "model/shapes_trained.json",

    metadata: "model/shapes_trained_meta.json",

    weights: "model/shapes_trained.weights.bin",

  };

​

  classifier.load(modelDetails, modelLoaded);

​

  // Start the handPose detection

  handPose.detectStart(video, gotHands);

}

​

function draw() {

  //Display the webcam video

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

​

  /* Draw the handPose keypoints */

  /*

  if (hands.length > 0) {

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

      let hand = hands[i];

      let inputs = [];

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

        let keypoint = hand.keypoints[j];

        let x = keypoint.x;

        let y = keypoint.y;

        noStroke();

        circle(x, y, 10);

      }

    }

  }

  */

​

  // If the model is loaded, make a classification and display the result

  if (isModelLoaded && hands[0]) {

    let inputData = flattenHandData();

    classifier.classify(inputData, gotClassification);

    textSize(32);

    if (classification == "circle") {

      noFill();

      strokeWeight(3);

      stroke(0, 255, 0);

      circle(width / 2, height / 2, width / 2);

      noStroke();

      fill(0, 255, 0);

      text(classification, width/2, height/2);

    } else if (classification == "triangle") {

      noFill();

      strokeWeight(3);

      stroke(0, 255, 0);

      triangle(

        width / 2,

        height / 4,

        width / 2 + width / 4,

        height / 2 + height / 4,

        width / 4,

        height / 2 + height / 4

      );

      noStroke();

      fill(0, 255, 0);

      text(classification, width/2, height/2);

    }

  } else {

    noStroke();

    fill(0, 255, 0);

    text("loading...", width/2, height/2);

  }

}

​

function flattenHandData() {

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

    let hand = hands[i];

    let handData = [];

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

      let keypoint = hand.keypoints[j];

      handData.push(keypoint.x);

      handData.push(keypoint.y);

    }

    return handData;

  }

}

​

// Callback function for when handPose outputs data

function gotHands(results) {

  hands = results;

}

​

// Callback function for when the classifier makes a classification

function gotClassification(results) {

  classification = results[0].label;

}

​

// Callback function for when the pre-trained model is loaded

function modelLoaded() {

  isModelLoaded = true;

}

​