// Uses p5.js  v.0.9.0

// Uses ml5.js v.0.3.1

// September 2019

​

let video;

let poseNet;

let poses = [];

​

let mostRecentKeypoints = [];

let numKeypoints = 17;

​

//---------------------------------------------

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);

​

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

  background(255);

  tint(255, 60);

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

  updateKeypoints();

  drawKeypoints();

}

​

//---------------------------------------------

function updateKeypoints() {

  if (poses.length <= 0) {

    // If there are no poses, ignore.

    return; 

  } else {

    // Otherwise, update the points. 

    var pose = poses[0].pose;

    var keypoints = pose.keypoints;

    for (var i = 0; i < keypoints.length; i++) {

      var ithNewKeypoint = keypoints[i].position;

      mostRecentKeypoints[i] = ithNewKeypoint;

    }

  }

}

​

//---------------------------------------------

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

  fill(255, 0, 0);

  for (var i = 0; i < mostRecentKeypoints.length; i++) {

    keypoint = mostRecentKeypoints[i];

    ellipse(keypoint.x, keypoint.y, 9, 9);

  }

}