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

var images = [];

var activate = false;

var drawIndex = 0;

var loopNum = 0;

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

​

//add images to the data folder, make sure they're transparent

function preload() {

   for (var i = 0; i < 66; i++) {

     var buf = (i < 9) ? "000" : "00";

     images[i] = loadImage(buf + (i+1) + ".png");

     //images[i] = images[i].resize(96, 0);//you can change the name, these are placeholders

   }

  images[66] = loadImage("rsz_1rsz_0001.png");

 }

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

  console.log(width);

  //console.log(images[0].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);

  //scale (-1.0,1.0);

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

​

  updateKeypoints();

  drawKeypoints();

  drawStand();

}

​

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

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

  if (mostRecentKeypoints.length >= 12) {

    head = mostRecentKeypoints[0];

    LS = mostRecentKeypoints[5];

    LE = mostRecentKeypoints[7];

    LH = mostRecentKeypoints[9];

    RS = mostRecentKeypoints[6];

    RE = mostRecentKeypoints[8];

    RH = mostRecentKeypoints[10];

    hip = mostRecentKeypoints[12];

​

    A = dist(LE.x, LE.y, LS.x, LS.y);

    B = dist(LS.x, LS.y, LH.x, LH.y);

​

    C = dist(RE.x, RE.y, RH.x, RH.y);

    D = dist(RH.x, RH.y, hip.x, hip.y);

​

    ratioAB = B / A;

    ratioCD = D / C;

​

    if (ratioCD < 0.6 && ratioAB < 0.8) {

      fill(179, 255, 135);

      activate = true;

    } else {

      fill(255, 0, 0);

    }

​

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

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

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

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

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

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

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

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

  }

}

​

function drawStand() {

  //if (activate == true) {

    //var x = LS.x;

    //var y = LS.y;

    //for(loopNum = 0; loopNum < 5; loopNum++) {

     // for(drawIndex = 0; drawIndex < images.length; drawIndex++) {

      image(images[66], 0, 0);

      //  image(images[drawIndex % images.length], 0, 0);

      //}

      drawIndex++;

​

    if (drawIndex % images.length == images.length - 1) {

      loopNum++;

    }

​

    if (loopNum == 5) { //stop looping, change if needed

      activate = false;

      drawIndex = 0;

      loopNum = 0;

    }

 // }

  //activate = false;

}