Last active
February 23, 2020 12:33
-
-
Save mohdsanadzakirizvi/ce95bcb560eeae899ff6852fda8757a6 to your computer and use it in GitHub Desktop.
PoseNet demo with Ml5.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function draw() { | |
| image(video, 0, 0, width, height); | |
| // We can call both functions to draw all keypoints and the skeletons | |
| drawKeypoints(); | |
| drawSkeleton(); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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); | |
| } | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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); | |
| } | |
| } | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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') | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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