​

//let img;

let video;

let handPose;

let faceMesh;

let connections;

let hands = [];

let faces = [];

​

function preload() {

  // Initialize MoveNet model for body pose detection

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

  faceMesh = ml5.faceMesh({ maxFaces: 1, flipped: true });

​

  // bodyPose = ml5.bodyPose("MoveNet", { flipped: true });

  // bodyPose = ml5.bodyPose("BlazePose", { flipped: true });

}

​

function mousePressed() {

  console.log("Hand: ");

  console.log(hands);

  console.log("Face: ");

  console.log(faces);

}

​

function gotHands(results) {

  // Store detected poses in the global array

  hands = results;

}

​

function gotFaces(results) {

  // Store detected poses in the global array

  faces = results;

}

​

function setup() {

  // Create canvas matching the image dimensions

  //  createCanvas(img.width, img.height);

  createCanvas(640, 480);

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

  video.hide();

  // Start detecting poses in the loaded image

  handPose.detectStart(video, gotHands);

  faceMesh.detectStart(video, gotFaces);

​

}

​

function draw() {

  // Display the image as the background

  image(video, 0, 0);

  if (hands.length > 0) {

    let hand = hands[0];

    for (let hand of hands) {

      let index = hand.index_finger_tip;

      let thumb = hand.thumb_tip;

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

        let keypoint = hand.keypoints[i];

        if (hand.handedness == "Left") {

          fill(255, 0, 255);

        } else {

          fill(255, 255, 0);

        }

        noStroke();

        // Only draw keypoints with sufficient confidence

        if (hand.confidence > 0.1) {

          circle(keypoint.x, keypoint.y, 8);

        }

      }

    }

  }

​

  // Ensure at least one face is detected

  if (faces.length > 0) {

    let face = faces[0];

​

    // Draw keypoints on the detected face

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

      let keypoint = face.keypoints[i];

      stroke(0, 255, 0);

      strokeWeight(2);

      point(keypoint.x, keypoint.y);

    }

  }

}

​