Created
September 30, 2018 01:43
-
-
Save golanlevin/701cec4696b61715879ccdb64855c155 to your computer and use it in GitHub Desktop.
PoseNet skeletons with ml5.js & p5.js, using a pre-loaded video
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
// Copyright (c) 2018 ml5 | |
// | |
// This software is released under the MIT License. | |
// https://opensource.org/licenses/MIT | |
/* === | |
ml5 Example | |
PoseNet example using p5.js | |
=== */ | |
// PoseNet with a pre-recorded video, modified from: | |
// https://github.com/ml5js/ml5-examples/blob/master/p5js/PoseNet/sketch.js | |
let poseNet; | |
let poses = []; | |
let video; | |
var videoIsPlaying; | |
function setup() { | |
videoIsPlaying = false; | |
createCanvas(640, 360); | |
video = createVideo('dancing.mp4', vidLoad); | |
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 modelReady() { | |
select('#status').html('Model Loaded'); | |
} | |
function mousePressed(){ | |
vidLoad(); | |
} | |
function draw() { | |
image(video, 0, 0, width, height); | |
// We can call both functions to draw all keypoints and the skeletons | |
drawKeypoints(); | |
drawSkeleton(); | |
} | |
// 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) { | |
noStroke(); | |
fill(255, 0, 0); | |
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); | |
} | |
} | |
} | |
// This function is called when the video loads | |
function vidLoad() { | |
video.stop(); | |
video.loop(); | |
videoIsPlaying = true; | |
} | |
function keyPressed(){ | |
if (videoIsPlaying) { | |
video.pause(); | |
videoIsPlaying = false; | |
} else { | |
video.loop(); | |
videoIsPlaying = true; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment