posenet decorated face challenge: start

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);
  //delete once you start
  drawStartChallengeMessage();
}
​
// Delete this function when you start!
function drawStartChallengeMessage() {
  textSize(32);
  fill("red");
  text("The challenge is in the code!", 100, height / 2);
}
​
// 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);
  }
}
​
​
// Task: In this function, 
// draw a circle at each keypoint's position, 
// and a nearby text label with the bodypart-name.
function drawOneKeypoint(keypoint) {  
  // A KEYPOINT object is a simple object with these properties:
  //    "part" (e.g. "rightElbow")
  //    "position" (e.g. {x: 147.65, y: 352.21})
  //    "score" (e.g. 0.71) - this is an indication of confidence.
}
​
​
//Task: In this function, draw lines between each pair of keypoints
// which are in the skeleton.
function drawOneSkeleton(skeleton) {
  // Notes:
  // A SKELETON is an array of connections
  // Each CONNECTION is an array with exactly two KEYPOINT objects  
}
​
​
​
//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
​