​

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 multiple detection

  poseNet = ml5.poseNet(video, 'multiple', 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() {

  // reverse the canvas context to mirror your image

  push();

  translate(width, 0);

  scale(-1, 1);

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

  strokeWeight(2);

​

  if (poses.length > 1) {

​

    // pose information for 1st person

    let person0 = poses[0].pose;

    // Draw a red ellipse for key point

    fill(240, 0, 0);

    let point0 = person0.rightWrist;

    ellipse(point0.x, point0.y, 40, 40);

​

    // pose information for 2nd person

    let person1 = poses[1].pose;

    // Draw a blue ellipse for key point

    fill(0, 0, 240);

    let point1 = person1.rightWrist;

    ellipse(point1.x, point1.y, 40, 40);

​

    if (point0.y < height / 2 && point1.y < height / 2) {

      console.log("a - in sync! above midline")

      background(255, 255, 0, 100);

    } else if (point0.y > height / 2 && point1.y > height / 2) {

      console.log("b - in sync! below midline");

      background(0, 255, 255, 100);

    } else {

      console.log("c - NOT in sync");

      background(255, 0, 0, 220);

    }

​

  }

  pop();

}