PoseNet demo with Ml5.js
| // A function to draw ellipses over the detected keypoints | |
| function drawKeypoints() { | |
| // Loop through all the poses detected | |
| for (let i = 0; i < poses.length; i++) { | |
| // For each pose detected, loop through all the keypoints | |
| let pose = poses[i].pose; | |
| for (let j = 0; j < pose.keypoints.length; j++) { | |
| // A keypoint is an object describing a body part (like rightArm or leftShoulder) | |
| let keypoint = pose.keypoints[j]; | |
| // Only draw an ellipse is the pose probability is bigger than 0.2 | |
| if (keypoint.score > 0.2) { | |
| fill(255, 0, 0); | |
| noStroke(); | |
| ellipse(keypoint.position.x, keypoint.position.y, 10, 10); | |
| } | |
| } | |
| } | |
| } |
| // A function to draw the skeletons | |
| function drawSkeleton() { | |
| // Loop through all the skeletons detected | |
| for (let i = 0; i < poses.length; i++) { | |
| let skeleton = poses[i].skeleton; | |
| // For every skeleton, loop through all body connections | |
| for (let j = 0; j < skeleton.length; j++) { | |
| let partA = skeleton[j][0]; | |
| let partB = skeleton[j][1]; | |
| stroke(255, 0, 0); | |
| line(partA.position.x, partA.position.y, partB.position.x, partB.position.y); | |
| } | |
| } | |
| } |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta http-equiv="X-UA-Compatible" content="ie=edge"> | |
| <!-- load p5.js --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script> | |
| <!-- load ml5.js --> | |
| <script src="https://unpkg.com/ml5@0.2.3/dist/ml5.min.js" type="text/javascript"></script> | |
| <!-- keep the video in center of browser --> | |
| <style type="text/css"> | |
| body{ | |
| text-align: center; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>PoseNet demo with Ml5.js</h1> | |
| <p id="status">Loading Model...</p> | |
| <div id="videoContainer"></div> | |
| <!-- load the posenet.js file --> | |
| <script src="posenet.js"></script> | |
| </body> | |
| </html> |
| let video; | |
| let poseNet; | |
| let poses = []; | |
| function setup() { | |
| const canvas = createCanvas(640, 480); | |
| canvas.parent('videoContainer'); | |
| // Video capture | |
| video = createCapture(VIDEO); | |
| video.size(width, height); | |
| // Create a new poseNet method with a single detection | |
| poseNet = ml5.poseNet(video, modelReady); | |
| // This sets up an event that fills the global variable "poses" | |
| // with an array every time new poses are detected | |
| poseNet.on('pose', function(results) { | |
| poses = results; | |
| }); | |
| function modelReady(){ | |
| select('#status').html('model Loaded') | |
| } |
| let video; | |
| let poseNet; | |
| let poses = []; | |
| function setup() { | |
| const canvas = createCanvas(640, 480); | |
| canvas.parent('videoContainer'); | |
| // Video capture | |
| video = createCapture(VIDEO); | |
| video.size(width, height); | |
| // Create a new poseNet method with a single detection | |
| poseNet = ml5.poseNet(video, modelReady); | |
| // This sets up an event that fills the global variable "poses" | |
| // with an array every time new poses are detected | |
| poseNet.on('pose', function(results) { | |
| poses = results; | |
| }); | |
| // Hide the video element, and just show the canvas | |
| video.hide(); | |
| } | |
| function draw() { | |
| image(video, 0, 0, width, height); | |
| // We can call both functions to draw all keypoints and the skeletons | |
| drawKeypoints(); | |
| drawSkeleton(); | |
| } | |
| function modelReady(){ | |
| select('#status').html('model Loaded') | |
| } | |
| // A function to draw ellipses over the detected keypoints | |
| function drawKeypoints() { | |
| // Loop through all the poses detected | |
| for (let i = 0; i < poses.length; i++) { | |
| // For each pose detected, loop through all the keypoints | |
| let pose = poses[i].pose; | |
| for (let j = 0; j < pose.keypoints.length; j++) { | |
| // A keypoint is an object describing a body part (like rightArm or leftShoulder) | |
| let keypoint = pose.keypoints[j]; | |
| // Only draw an ellipse is the pose probability is bigger than 0.2 | |
| if (keypoint.score > 0.2) { | |
| fill(255, 0, 0); | |
| noStroke(); | |
| ellipse(keypoint.position.x, keypoint.position.y, 10, 10); | |
| } | |
| } | |
| } | |
| } | |
| // A function to draw the skeletons | |
| function drawSkeleton() { | |
| // Loop through all the skeletons detected | |
| for (let i = 0; i < poses.length; i++) { | |
| let skeleton = poses[i].skeleton; | |
| // For every skeleton, loop through all body connections | |
| for (let j = 0; j < skeleton.length; j++) { | |
| let partA = skeleton[j][0]; | |
| let partB = skeleton[j][1]; | |
| stroke(255, 0, 0); | |
| line(partA.position.x, partA.position.y, partB.position.x, partB.position.y); | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment