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