//

// This software is released under the MIT License.

// https://opensource.org/licenses/MIT

​

/* ===

ml5 Example

PoseNet example using p5.js

​

Id  Part

0   nose

1   leftEye

2   rightEye

3   leftEar

4   rightEar

5   leftShoulder

6   rightShoulder

7   leftElbow

8   rightElbow

9   leftWrist

10  rightWrist

11  leftHip

12  rightHip

13  leftKnee

14  rightKnee

15  leftAnkle

16  rightAnkle

​

​

=== */

​

let video;

let poseNet;

let poses = [];

​

function setup() {

  createCanvas(640, 480);

  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 modelReady() {

  select('#status').html('Model Loaded');

}

​

function mousePressed(){

  console.log(JSON.stringify(poses))

}

​

function draw() {

  image(video, 0, 0, width, height);

  strokeWeight(2);

​

  // For one pose only (use a for loop for multiple people!)

  if (poses.length > 0) {

    let pose = poses[0].pose; //Pick the first person only

​

    // Create a pink ellipse for the nose

    fill(213, 0, 143);

    let nose = pose['nose'];

    ellipse(nose.x, nose.y, 20, 20);

​

    // Create a yellow ellipse for the right eye

    fill(255, 215, 0);

    let rightEye = pose['rightEye'];

    ellipse(rightEye.x, rightEye.y, 20, 20);

​

    // Create a yellow ellipse for the right eye

    fill(255, 215, 0);

    let leftEye = pose['leftEye'];

    ellipse(leftEye.x, leftEye.y, 20, 20);

  }

}

​