* 👋 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 pose tracking on live video through ml5.bodyPose with BlazePose model

 */

​

let handPose;

let hands = [];

let bodyPose;

let poses = [];

let video;

​

function preload() {

  // Load the bodyPose model

  bodyPose = ml5.bodyPose("BlazePose");

  // Load the handPose model

  handPose = ml5.handPose();

}

​

function setup() {

  createCanvas(640, 480);

​

  // Create the video and hide it

  video = createCapture(VIDEO);

  video.size(640, 480);

  video.hide();

  // Start detecting hands from the webcam video

  handPose.detectStart(video, gotHands);

  // Start detecting poses in the webcam video

  bodyPose.detectStart(video, gotPoses);

}

​

function draw() {

  // Draw the webcam video

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

​

  // If there are two hands

  if (hands.length > 1) {

    // Find the index finger tip of hand 1

    let finger01 = hands[0].index_finger_tip;

​

    // Find the index finger tip of hand 2

    let finger02 = hands[1].index_finger_tip;

​

    let pose = poses[0];

​

    let nose = pose.keypoints[0];

​

​

    stroke(0);

    strokeWeight(5);

    strokeJoin(ROUND);

    fill(255, 0, 0, 40);

    beginShape();

    vertex(nose.x, nose.y);

    vertex(finger01.x, finger01.y);

    vertex(finger02.x, finger02.y);

    endShape(CLOSE);

  }

  fill(0);

  noStroke();

  text("hold up two fingers and show your nose", 30, 30);

}

​

// Callback function for when bodyPose outputs data

function gotPoses(results) {

  // Save the output to the poses variable

  poses = results;

}

​

// Callback function for when handPose outputs data

function gotHands(results) {

  // Save the output to the hands variable

  hands = results;

}

​