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