ml5-handPose-2024

// Copyright (c) 2024 ml5

// This software is released under the MIT License.

// https://opensource.org/licenses/MIT

// Requires: https://unpkg.com/ml5@1/dist/ml5.js

// Documentation: https://docs.ml5js.org/#/reference/handpose

​

let handpose;

let video;

let hands = [];

let options = { maxHands: 2, flipHorizontal: true, runtime: "mediapipe" };

​

function preload() {

  // Load the handPose model.

  handpose = ml5.handPose(options);

}

​

function setup() {

  createCanvas(800, 600);

  // Create the webcam video and hide it

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

  // start detecting hands from the webcam video

  handpose.detectStart(video, gotHands);

}

​

function draw() {

  // Draw the webcam video

  background(255);

  push();

  if (options.flipHorizontal){

    translate(width,0); 

    scale(-1,1);

  }

  let transparency = 255; // reduce this to make video transparent

  tint(255,255,255,transparency); 

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

  pop();

  push();

  // Cope with difference between capture size and canvas size

  scale(width/640, height/480); 

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

    }

    let whichHand = hand.handedness;

    let wx = hand.keypoints[ML5HAND_WRIST].x;

    let wy = hand.keypoints[ML5HAND_WRIST].y;

    textSize(24); 

    text(whichHand, wx,wy-50); 

  }

  pop(); 

}

​

// Callback function for when handpose outputs data

function gotHands(results) {

  // save the output to the hands variable

  hands = results;

}

​

​

// The following index labels may be helpful:

const ML5HAND_WRIST = 0; 

const ML5HAND_THUMB_CMC = 1; 

const ML5HAND_THUMB_MCP = 2; 

const ML5HAND_THUMB_IP = 3; 

const ML5HAND_THUMB_TIP = 4; 

const ML5HAND_INDEX_FINGER_MCP = 5; 

const ML5HAND_INDEX_FINGER_PIP = 6; 

const ML5HAND_INDEX_FINGER_DIP = 7; 

const ML5HAND_INDEX_FINGER_TIP = 8; 

const ML5HAND_MIDDLE_FINGER_MCP = 9; 

const ML5HAND_MIDDLE_FINGER_PIP = 10; 

const ML5HAND_MIDDLE_FINGER_DIP = 11; 

const ML5HAND_MIDDLE_FINGER_TIP = 12; 

const ML5HAND_RING_FINGER_MCP = 13; 

const ML5HAND_RING_FINGER_PIP = 14; 

const ML5HAND_RING_FINGER_DIP = 15; 

const ML5HAND_RING_FINGER_TIP = 16; 

const ML5HAND_PINKY_MCP = 17; 

const ML5HAND_PINKY_PIP = 18; 

const ML5HAND_PINKY_DIP = 19; 

const ML5HAND_PINKY_TIP = 20; 

​