// Adapted from the ml5 PoseNet example for p5.js. 

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

​

let RAtop;

let RAbot;

let LAtop;

let LAbot;

​

let switchImg = false;

​

function preload(){

  RAtop = loadImage('RAtop.png');

  RAbot = loadImage('RAbot.png');

  LAtop = loadImage('LAtop.png');

  LAbot = loadImage('LAbot.png');

  LLtop = loadImage('LLtop.png');

  LLbot = loadImage('LLbot.png');

  RLtop = loadImage('RLtop.png');

  RLbot = loadImage('RLbot.png');

  skirt = loadImage('skirt.png');

  coat = loadImage('coat.png');

  face = loadImage('face.png');

  bg1 = loadImage('ad01.jpg');

  bg2 = loadImage('ad02.jpg');

  bg3 = loadImage('ad04.jpg');

  bg4 = loadImage('ad05.jpg');

  bg5 = loadImage('ad06.jpg');

  bg6 = loadImage('ad07.jpg');

  bg7 = loadImage('ad08.jpg');

  bg8 = loadImage('ad09.jpg');

}

​

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

function setup() {

  createCanvas(720, 720);

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

 updateBackground();

  imageMode(CORNER);

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

  updateKeypoints();

  drawKeypoints();

  //print(switchImg);

  //  tint(255, 20);

}

let i = 0;

function updateBackground(){

  bgs = [bg1,bg2,bg3,bg4,bg5,bg6,bg7,bg8]

  if (switchImg == true && i <bgs.length){

    i+=1

    switchImg = false;

  }

  if (i>=bgs.length){ i=0 }

  bgImg = bgs[i]

   // print(i)

  image(bgImg, 0,0, 720,720);

}

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

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

  let size;

  let size1;

  let size2;

  let size3;

  let size4;

  let size5;

  let size6;

  let size7; 

  let size8;

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

    keypoint = mostRecentKeypoints[i];

    head = mostRecentKeypoints[0]

    earL = mostRecentKeypoints[4] 

    earR = mostRecentKeypoints[3]

    leftEar = mostRecentKeypoints[4]

    leftShoulder = mostRecentKeypoints[6]

    leftElbow = mostRecentKeypoints[8]

    leftHand = mostRecentKeypoints[10]

    rightShoulder = mostRecentKeypoints[5]

    rightElbow = mostRecentKeypoints[7]

    rightHand = mostRecentKeypoints[9]

    leftHip = mostRecentKeypoints[12]

    leftKnee = mostRecentKeypoints[14]

    leftFoot = mostRecentKeypoints[16]

    rightHip = mostRecentKeypoints[11]

    rightKnee = mostRecentKeypoints[13]

    rightFoot = mostRecentKeypoints[15]

    //head location

    push();

    let faceSize = (earR.x-earL.x)*1.7

    let fx =  (rightShoulder.x + leftShoulder.x)/2 - faceSize/2

    let fy = head.y

    translate(fx,fy);

    image(face, 0,0, faceSize, faceSize);

    pop();

    // left hip to knee

    push();

    translate (leftHip.x, leftHip.y);

    let llx = leftKnee.x - leftHip.x

    let lly = leftKnee.y - leftHip.y

    let llRot = 0;

    size5 = sqrt(sq(llx)+sq(lly))//c = sgrt(a^2+b^2)

    if (lly != 0) {

      if (lly > 0) {

        llRot = -atan(llx / lly)

      } else {

        llRot = -atan(llx / lly)

      }

      rotate(llRot);

      image(LLtop, 0,0, size5/4, size5);

    }

    pop();

    //left knee to foot

    push();

    let lfx = leftFoot.x - leftKnee.x;

    let lfy = leftFoot.y - leftKnee.y;

    let lfRot = 0;

    size6 = sqrt(sq(lfx)+sq(lfy))

    translate (leftKnee.x, leftKnee.y);

    if (lfx != 0) {

      if (lfy > 0) {

        lfRot = -atan(lfx / lfy)

      } else {

        lfRot = -atan(lfx / lfy)

      }

      rotate(lfRot);

      image(LLbot, 0,0, size5/4, size6);

    }

    pop();

    //right hip to knee

    push();

    translate (rightHip.x, rightHip.y);

    let rlx = rightKnee.x - rightHip.x

    let rly = rightKnee.y - rightHip.y

    let rlRot = 0;

    size7 = sqrt(sq(rlx)+sq(rly))//c = sgrt(a^2+b^2)

    if (rly != 0) {

      if (rly > 0) {

        rlRot = -atan(rlx / rly)

      } else {

        rlRot = -atan(rlx / rly)

      }

      rotate(rlRot);

      image(LLtop, 0,0, size5/4, size7);

    }

    pop();

    //right knee to foot

    push();

    let rfx = rightFoot.x - rightKnee.x;

    let rfy = rightFoot.y - rightKnee.y;

    let rfRot = 0;

    size8 = sqrt(sq(rfx)+sq(rfy))

    translate (rightKnee.x, rightKnee.y);

    if (rfx != 0) {

      if (rfy > 0) {

        rfRot = -atan(rfx / rfy)

      } else {

        rfRot = -atan(rfx / rfy)

      }

      rotate(rfRot);

      image(RLbot, 0,0, size7/4, size8);

    }

    pop();

    //skirtlocation

    push();

    sizeSkirt = (rightShoulder.x - leftShoulder.x)*(2)//100;

    let slocX = (rightShoulder.x + leftShoulder.x)/2 - sizeSkirt/2

    let slocY = (rightHip.y+leftShoulder.y)/2.5;

    translate(slocX, slocY);

    image(skirt, 0,0, sizeSkirt, sizeSkirt);

    pop();

    //LEft shoulder to elbow 

    push();

    translate (leftShoulder.x, leftShoulder.y);

    let cX = leftElbow.x - leftShoulder.x

    let cY = leftElbow.y - leftShoulder.y

    let rotateAmt = 0;

    size1 = sqrt(sq(cX)+sq(cY))//c = sgrt(a^2+b^2)

    if (cY != 0) {

      if (cY > 0) {

        rotateAmt = -atan(cX / cY)

      } else {

        rotateAmt = PI+atan(cX / -cY)

      }

      rotate(rotateAmt);

      image(RAtop, 0,0, size1/4, size1);

    }

      pop();

    //left elbowTo hand

    push();

    let lcx = leftHand.x - leftElbow.x;

    let lcy = leftHand.y - leftElbow.y;

    let lhrot = 0;

    size2 = sqrt(sq(lcx)+sq(lcy))

    translate (leftElbow.x, leftElbow.y);

    if (lcx != 0) {

      if (lcy > 0) {

        lhrot = -atan(lcx / lcy)

      } else {

        lhrot = PI+atan(lcx / -lcy)

      }

      rotate(lhrot);

      image(RAbot, 0,0, size1/4, size1);

    }

    pop();

    //Right shoulder to elbow

    push();

    translate (rightShoulder.x, rightShoulder.y);

    let rcx = rightElbow.x - rightShoulder.x

    let rcy = rightElbow.y - rightShoulder.y

    let rcRot = 0;

    size3 = sqrt(sq(rcx)+sq(rcy))//c = sgrt(a^2+b^2)

    if (rcy != 0) {

      if (rcy > 0) {

        rcRot = -atan(rcx / rcy)

      } else {

        rcRot = PI+ atan(rcx / -rcy)

      }

      rotate(rcRot);

      image(LAtop, 0,0, size3/4, size3);

    }

    pop();

    //right elbow to hand

    push();

    let rhcx = rightHand.x - rightElbow.x;

    let rhcy = rightHand.y - rightElbow.y;

    let rhrot = 0;

    size4 = sqrt(sq(rhcx)+sq(rhcy))

    translate (rightElbow.x, rightElbow.y);

    if (rhcx != 0) {

      if (rhcy > 0) {

        rhrot = -atan(rhcx / rhcy)

      } else {

        rhrot = PI + atan(rhcx / -rhcy)

      }

      rotate(rhrot);

      image(LAbot, 0,0, size3/4, size4);

    }

    pop(); 

       //coat location

    push();

    let sizeCoat = (rightShoulder.x - leftShoulder.x)*1.5;

    let clocX = (rightShoulder.x + leftShoulder.x)/2 - sizeCoat/2.5

    let clocY = (leftShoulder.y + rightShoulder.y)/2 - sizeCoat*0.05;

    translate(clocX, clocY);

    image(coat, 0,0, sizeCoat, sizeCoat);

    pop();

    //CHANGE BG

    if (rightHand.x-leftHand.x < 20){

      switchImg = true;

      //print('boop')

    } else { swicthImg = false}

  }

}

​

​

​

​