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

var loopNum = 0;

var LS = {x: 0, y: 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";

     var dat = "data/" + buf + (i+1) + ".png";

     images[i] = loadImage(dat);

     //console.log(dat);//you can change the name, these are placeholders

   }

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

  images[67] = loadImage("0002.png");

  images[68] = loadImage("0006.png");

  images[69] = loadImage("0011.png");

  images[70] = loadImage("0016.png");

  images[71] = loadImage("0022.png");

  images[72] = loadImage("0030.png");

  images[73] = loadImage("0038.png");

  images[74] = loadImage("0044.png");

  images[75] = loadImage("0049.png");

  images[76] = loadImage("0055.png");

  images[77] = loadImage("0060.png");

  images[78] = loadImage("0066.png");

  //images[66].tint(255, 127);

  //images[67].tint(255, 180);

  //images[68].tint(255, 220);

  //images[0] = loadImage("data/0001.png");

 }

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

  console.log(drawIndex);

​

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

    //image(images[drawIndex % images.length], LS.x, LS.y);

    console.log(drawIndex);

    if(drawIndex == 66) tint(255, 127);

    if(drawIndex == 67) tint(255, 180);

    if(drawIndex == 68) tint(255, 220);

    if(drawIndex > 69) noTint();

    image(images[drawIndex], LS.x-50, LS.y-50);

    drawIndex++;

​

    if (drawIndex == 79) {

      loopNum++;

      drawIndex = 66;

    }

​

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

      activate = false;

      drawIndex = 66;

      loopNum = 0;

    }

  //}

}