Posenet Face (mousePressed)

mySketch
xxxxxxxxxx
 
// Challenge: 
//
// Complete the two functions:
// drawOneKeypoint(keypoint)
// drawOneSkeleton(skeleton)
// You don't have to change anything else except those functions!
​
// Challenge URL (hints, solutions, data model documentation, etc): 
// https://www.notion.so/neillzero/PoseNet-decorate-a-face-6fe0965939f04d6d81a9c4eb9939688e
​
//You don't need to change this
let video; // the webcam video capture we will analyse
let latestPoses = []; // an array of {pose, skeleton} objects we will refresh frequently.
​
//You don't need to change this
function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.size(width, height);
  video.hide();
​
  //You don't need to change this
  // Create a new poseNet which will repeatedly study the video capture
  let poseNet = ml5.poseNet(video, function() {
    //console.log("The posenet model has been loaded!");
  });
​
  //You don't need to change this
  // Register for posenet to call this function when new possible poses are detected.
  // The function will store the array of these possible poses in a global var for access on each draw frame.
  function storeLatestPoses(results) {
    latestPoses = results;
  }
  poseNet.on("pose", storeLatestPoses);
}
​
// You don't need to change this
function draw() {
  //draw the video image in the background
  image(video, 0, 0, width, height);
  drawKeypointsForAllPoses(latestPoses);
  drawSkeletonForAllPoses(latestPoses);
}
​
​
// You don't need to change this
// A function to draw ellipses over the detected keypoints
function drawKeypointsForAllPoses(poses) {
  // Loop through all the poses detected
  for (let poseAndSkeleton of poses) {
    // For each pose detected, draw all of its
    // a keypoint is object describing a body part (like rightArm or leftShoulder)
    for (let keypoint of poseAndSkeleton.pose.keypoints) {
      // Only display something at this keypoint
      // IF we have some confidence (> 40%?) that it's really there!
      if (keypoint.score > 0.4) {
        drawOneKeypoint(keypoint);
      }
    }
  }
}
​
// You don't need to change this
function drawSkeletonForAllPoses(poses) {
  // Loop through all the poses detected
  for (let poseAndSkeleton of poses) {
    let skeleton = poseAndSkeleton.skeleton;
    drawOneSkeleton(skeleton);
  }
}
​
​
function drawOneKeypoint(keypoint) {
​
  if (keypoint.part === "leftEye") {
    rectMode(CENTER)
    fill(30)
    square(keypoint.position.x, keypoint.position.y, 30)
  } else {
    circle(keypoint.position.x, keypoint.position.y, 20);
  }
  fill(255)
  textSize(20);
  text(`${keypoint.part}`, keypoint.position.x, (keypoint.position.y - 10));
}
​
​
//Task: In this function, draw lines between each pair of keypoints
// which are in the skeleton.
function drawOneSkeleton(skeleton) {
  // console.log(skeleton)
  // Notes:
  // A SKELETON is an array of connections
  // Each CONNECTION is an array with exactly two KEYPOINT objects  
}
​
function mousePressed() {
  if (isLooping()) {
    noLoop()
  } else {
    loop()
  }
​
}
​
​
//Here is an (unused) example of one connection in the skeleton.
// Always an array with exactly two objects.
​
const exampleSkeletalConnection = [{
    part: "rightElbow",
    position: {
      x: 147.69276592017567,
      y: 350.9276456611101
    },
    score: 0.7046376466751099
  },
  {
    part: "rightWrist",
    position: {
      x: 272.48046185337216,
      y: 201.58923481785973
    },
    score: 0.9238564372062683
  }
];
​
//Credit: Modified from the example at https://github.com/ml5js/ml5-examples/blob/master/p5js/PoseNet/PoseNet_webcam/sketch.js