* 👋 Hello! This is an ml5.js example made and shared with ❤️.

 * Learn more about the ml5.js project: https://ml5js.org/

 * ml5.js license and Code of Conduct: https://github.com/ml5js/ml5-next-gen/blob/main/LICENSE.md

 *

 * This example demonstrates the detectStart and detectStop API of ml5.handPose.

 */

​

let handPose;

let video;

let hands = [];

let isDetecting = false;

​

function preload() {

  // Load the handPose model

  handPose = ml5.handPose();

}

​

function setup() {

  createCanvas(640, 480);

  // Create the webcam video and hide it

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

}

​

function draw() {

  // Draw the webcam video

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

​

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

    }

  }

​

  fill(255, 0, 0);

  textSize(25);

  text("Press mouse to toggle detection", 10, 30);

  if (isDetecting) {

    text("Detecting", 10, 60);

  } else {

    text("Not detecting", 10, 60);

  }

}

​

// Toggle detection when mouse is pressed

function mousePressed() {

  toggleDetection();

}

​

// Call this function to start and stop detection

function toggleDetection() {

  if (isDetecting) {

    handPose.detectStop();

    isDetecting = false;

  } else {

    handPose.detectStart(video, gotHands);

    isDetecting = true;

  }

}

​

// Callback function for when handPose outputs data

function gotHands(results) {

  // Save the output to the hands variable

  hands = results;

}

​