//

// This software is released under the MIT License.

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

​

/* ===

ml5 Example

PoseNet example using p5.js

=== */

​

let video;

let poseNet;

let poses = [];

​

let noseX=0,noseY=0,wristLX=0,wristLY=0,wristRX=0,wristRY=0,elbowLX=0,elbowLY=0,elbowRX=0,elbowRY=0, shoLX=0,shoLY=0,shoRX=0,shoRY=0,kneeLX=0,kneeLY=0,kneeRX=0,kneeRY=0,ankleLX=0,ankleLY=0,ankleRX=0,ankleRY=0,hipLX=0,hipLY=0,hipRX=0,hipRY=0;

​

let elbowL1X, elbowL1Y,elbowL2X,elbowL2Y,elbowR1X, elbowR1Y, elbowR2X, elbowR2Y,kneeL1X, kneeL1Y,kneeL2X,kneeL2Y,kneeR1X, kneeR1Y, kneeR2X, kneeR2Y;

​

let perc1=0,perc2=1,phase=1, change=1;

let stage = 1;

​

//SETTINGS WE MIGHT WANT TO FUCK WITH

let timer = 0.0;

let mps = 1.5;

let prog = mps / 50;

let margin = 15;

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  //video.size(width, height);

  video.hide();

​

  // 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', gotPoses);

  // Hide the video element, and just show the canvas

  createButton('next stage').mousePressed(function() {stage++});

  elbowL1X = width-230;

  elbowL1Y = height-280;

  elbowL2X = elbowL1X+30;

  elbowL2Y = elbowL1Y-30;

  elbowR1X = width-370;

  elbowR1Y = height-280;

  elbowR2X = elbowR1X-30;

  elbowR2Y = elbowR1Y-30;

  kneeL1X = width-260;

  kneeL1Y = height-80;

  kneeL2X = kneeL1X;

  kneeL2Y = kneeL1Y-40;

  kneeR1X = width-340;

  kneeR1Y = height-80;

  kneeR2X = kneeR1X;

  kneeR2Y = kneeR1Y-40;

  setInterval(progressTimer,10);

}

​

function gotPoses(poses) {

  // console.log(poses);

  if (poses.length > 0) {

    let nX = poses[0].pose.keypoints[0].position.x;

    let nY = poses[0].pose.keypoints[0].position.y;

    let slX = poses[0].pose.keypoints[5].position.x;

    let slY = poses[0].pose.keypoints[5].position.y;

    let srX = poses[0].pose.keypoints[6].position.x;

    let srY = poses[0].pose.keypoints[6].position.y;  

    let elX = poses[0].pose.keypoints[7].position.x;

    let elY = poses[0].pose.keypoints[7].position.y;

    let erX = poses[0].pose.keypoints[8].position.x;

    let erY = poses[0].pose.keypoints[8].position.y;

    let wlX = poses[0].pose.keypoints[9].position.x;

    let wlY = poses[0].pose.keypoints[9].position.y;

    let wrX = poses[0].pose.keypoints[10].position.x;

    let wrY = poses[0].pose.keypoints[10].position.y;

    let hlX = poses[0].pose.keypoints[11].position.x;

    let hlY = poses[0].pose.keypoints[11].position.y;

    let hrX = poses[0].pose.keypoints[12].position.x;

    let hrY = poses[0].pose.keypoints[12].position.y;

    let klX = poses[0].pose.keypoints[13].position.x;

    let klY = poses[0].pose.keypoints[13].position.y;

    let krX = poses[0].pose.keypoints[14].position.x;

    let krY = poses[0].pose.keypoints[14].position.y;

    let alX = poses[0].pose.keypoints[15].position.x;

    let alY = poses[0].pose.keypoints[15].position.y;

    let arX = poses[0].pose.keypoints[16].position.x;

    let arY = poses[0].pose.keypoints[16].position.y;

    noseX = lerp(noseX, nX, 0.5); noseY = lerp(noseY, nY, 0.5);

    console.log(noseX,noseY)

​

    shoLX = lerp(shoLX, slX, 0.5); 

    shoLY = lerp(shoLY, slY, 0.5); 

    shoRX = lerp(shoLX, srX, 0.5); 

    shoRY = lerp(shoRY, srY, 0.5);

    elbowLX = lerp(elbowLX, elX, 0.5); 

    elbowLY = lerp(elbowLY, elY, 0.5); 

    elbowRX = lerp(elbowRX, erX, 0.5); 

    elbowRY = lerp(elbowRY, erY, 0.5);

    wristLX = lerp(wristLX, wlX, 0.5); 

    wristLY = lerp(wristLY, wlY, 0.5); 

    wristRX = lerp(wristRX, wrX, 0.5); 

    wristRY = lerp(wristRY, wrY, 0.5);

    hipRX = lerp(hipRX, hrX,0.5); 

    hipRY = lerp(hipRY, hrY,0.5); 

    hipLX = lerp(hipLX, hlX,0.5); 

    hipLY = lerp(hipLY, hlY,0.5);

    kneeRX = lerp(kneeRX, krX,0.5); 

    kneeRY = lerp(kneeRY, krY,0.5); 

    kneeLX = lerp(kneeLX, klX,0.5); 

    kneeLY = lerp(kneeLY, klY,0.5);

    ankleRX = lerp(ankleRX, arX,0.5); 

    ankleRY = lerp(ankleRY, arY,0.5); 

    ankleLX = lerp(ankleLX, alX,0.5); 

    ankleLY = lerp(ankleLY, alY,0.5);

  }

}

​

function modelReady() {

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

}

​

function draw() {

  stroke(255, 220, 150);

  fill(255,220,150);

  strokeWeight(2);

  translate(width,0); // move to far corner

  scale(-1.0,1.0);    // flip x-axis backwards

  image(video, 0, 0, width, height); //video on canvas, position, dimensions

  // We can call both functions to draw all keypoints and the skeletons

  // drawKeypoints();

  // drawSkeleton();

  arrowLoop(elbowRX,elbowRY, wristRX, wristRY);

  arrowLoop(elbowLX,elbowLY, wristLX, wristLY);

  arrowLoop(ankleLX,ankleLY, kneeLX,kneeLY);

  arrowLoop(ankleRX,ankleRY, kneeRX,kneeRY);

  arrowLoop(hipLX,hipLY,kneeLX,kneeLY);

  arrowLoop(hipRX,hipRY,kneeRX,kneeRY);

  noStroke();

  drawShape(elbowL1X,elbowL1Y,elbowL2X,elbowL2Y,elbowLX,elbowLY,4);

  drawShape(elbowR1X,elbowR1Y,elbowR2X,elbowR2Y,elbowRX,elbowRY,4);

  drawShape(kneeL1X,kneeL1Y,kneeL2X,kneeL2Y,kneeLX,kneeLY,5);

  drawShape(kneeR1X,kneeR1Y,kneeR2X,kneeR2Y,kneeRX,kneeRY,5);

  text(timer,30,20)

}

​

function arrowLoop(x1,y1,x2,y2){

  if(timer<0.5){

    perc1 = 0;

    perc2 = 1 - timer*2;

  }

  if(timer>=0.5){

    perc1 = timer*2 - 1;

    perc2 = 0;

  }

  let xstart,ystart,xend,yend;

  if(prog>0){

    xstart = x1 + (x2-x1) * perc1;

    ystart = y1 + (y2-y1) * perc1;

    xend = x2 - (x2-x1) * perc2;

    yend = y2 - (y2-y1) * perc2;

  } 

  if(prog<0){

    xend = x1 + (x2-x1) * perc1;

    yend = y1 + (y2-y1) * perc1;

    xstart = x2 - (x2-x1) * perc2;

    ystart = y2 - (y2-y1) * perc2;

  }

  drawArrow(xstart,ystart,xend,yend);

}

​

function drawArrow(x1,y1,x2,y2){

  line(x1,y1,x2,y2);

  translate(x2,y2);

  let angle = PI/2 + atan((y1-y2)/(x1-x2));

  if(x1>x2){

    angle = angle + PI;

  }

  //console.log(angle);

  rotate(angle);

  triangle(-5, 0, 0, -10, 5, 0);

  //reset translations

  rotate(-angle);

  translate(-x2,-y2);

}

​

function progressTimer(){

  if(timer>1||timer<0){

    prog *= -1;

  }

  timer += prog;

}

​

function drawShape(xTarget1,yTarget1,xTarget2,yTarget2,xKey,yKey,npoints){

  let xTarget = xTarget1 + (xTarget2-xTarget1) * timer;  

  let yTarget = yTarget1 + (yTarget2-yTarget1) * timer;

  if (xKey < xTarget-margin || xKey > xTarget+margin || yKey < yTarget-margin || yKey > yTarget+margin){

    fill(255, 245, 123);

    polygon(xTarget,yTarget,30,npoints);

    fill(254, 204, 81);

    polygon(xTarget, yTarget,20,npoints);

    polygon(xKey,yKey,30,npoints);

  }

  //else{

  //  noFill();

  //}

}

​

function polygon(x, y, radius, npoints) {

  let angle = TWO_PI / npoints;

  beginShape();

  for (let a = 0; a < TWO_PI; a += angle) {

    let sx = x + cos(a) * radius;

    let sy = y + sin(a) * radius;

    vertex(sx, sy);

  }

  endShape(CLOSE);

}

​

​

/*

// A function to draw ellipses over the detected keypoints

function drawKeypoints()  {

  // Loop through all the poses detected

  for (let i = 0; i < poses.length; i++) {

    // For each pose detected, loop through all the keypoints

    let pose = poses[i].pose;

    for (let j = 0; j < pose.keypoints.length; j++) {

      // A keypoint is an object describing a body part (like rightArm or leftShoulder)

      let keypoint = pose.keypoints[j];

      // Only draw an ellipse is the pose probability is bigger than 0.2

      if (keypoint.score > 0.2) {

        fill(255, 0, 0);

        noStroke();

        ellipse(keypoint.position.x, keypoint.position.y, 10, 10);

      }

    }

  }

}

​

// A function to draw the skeletons

function drawSkeleton() {

  // Loop through all the skeletons detected

  for (let i = 0; i < poses.length; i++) {

    let skeleton = poses[i].skeleton;

    // For every skeleton, loop through all body connections

    for (let j = 0; j < skeleton.length; j++) {

      let partA = skeleton[j][0];

      let partB = skeleton[j][1];

      stroke(255, 0, 0);

      line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);

    }

  }

}

*/