let download = false;

​

let poseFrames = 0; //!edit line 24 if you want to hardcode a stop point

let data = {};

let frame = 0;

let hue = 0;

​

​

function preload() {

  data = loadJSON('combined.json');

}

​

function setup() {

  if(download){

    frameRate(5) // This needs to be slow enough that Chrome can keep up, 5 or less is a good idea!

  } else {

    frameRate(fps)

  }

  createCanvas(852, 480);

  colorMode(HSB);

  //example of pose coordinates

  poseFrames = Object.keys(data).length;

  //console.log(data[0][1][0]['pose_keypoints_2d'])

  noStroke();

  background(0,0,0);

}

​

function draw() {

  background(0,0,0,1);

  //drawPose((frameCount-1) % poseFrames)

  drawSkeleton25B((frameCount-1) % poseFrames)

  // filter(BLUR, 2);

  if(frameCount <= poseFrames && download){

    save(`step${nf((frameCount-1), 4)}`);

  }

}

​

function drawPose(frame) {

  noStroke();

  fill(hue,100,80);

  let hue2 = (hue +120) % 360;

  if(data[frame][1].length > 0){

    let d = data[frame][1][0]['pose_keypoints_2d']

    for(p = 0; p < d.length; p+=3){

    //for(p = 12; p < 15; p+=3){

      if(round(d[p]) + round(d[p+1]) != 0 ){

        circle(round(d[p]), round(d[p+1]), 10);

      }

    }

  }

  hue = (hue + 4) % 360;

}

​

function drawSkeleton(frame) {

  if(data[frame][1].length > 0){

    let d = data[frame][1][0]['pose_keypoints_2d']

    //see for key: https://colab.research.google.com/drive/1tDSZOS3facPUYme2n48yHMeB1v86s2-Q?authuser=4#scrollTo=dJIjTRi_6ZmQ

    nose = createVector(round(d[0]), round(d[1])); //0

    noseExists = (nose.x + nose.y != 0) ? true : false;

    neck = createVector(round(d[3]), round(d[4])); //1

    neckExists = (neck.x + neck.y != 0) ? true : false;

    rightShoulder = createVector(round(d[6]), round(d[7])); //2

    rightShoulderExists = (rightShoulder.x + rightShoulder.y != 0) ? true : false;

    rightElbow = createVector(round(d[9]), round(d[10])); //3

    rightElbowExists = (rightElbow.x + rightElbow.y != 0) ? true : false;

    rightWrist = createVector(round(d[12]), round(d[13])); //4

    rightWristExists = (rightWrist.x + rightWrist.y != 0)

    leftShoulder = createVector(round(d[15]), round(d[16])); //5

    leftShoulderExists = (leftShoulder.x + leftShoulder.y != 0) ? true : false;

    leftElbow = createVector(round(d[18]), round(d[19])); //6

    leftElbowExists = (leftElbow.x + leftElbow.y != 0) ? true : false;

    leftWrist = createVector(round(d[21]), round(d[22])); //7

    leftWristExists = (leftWrist.x + leftWrist.y != 0) ? true : false;

    midHip = createVector(round(d[24]), round(d[25])); //8 

    midHipExists = (midHip.x + midHip.y != 0) ? true : false;

    rightHip = createVector(round(d[27]), round(d[28])); //9 

    rightHipExists = (rightHip.x + rightHip.y != 0) ? true : false;

    rightKnee = createVector(round(d[30]), round(d[31])); //10 

    rightKneeExists = (rightKnee.x + rightKnee.y != 0) ? true : false;

    rightAnkle = createVector(round(d[33]), round(d[34])); //11 

    rightAnkleExists = (rightAnkle.x + rightAnkle.y != 0) ? true : false;

    leftHip = createVector(round(d[36]), round(d[37])); //12 

    leftHipExists = (leftHip.x + leftHip.y != 0) ? true : false;

    leftKnee = createVector(round(d[39]), round(d[40])); //13 

    leftKneeExists = (leftKnee.x + leftKnee.y != 0) ? true : false;

    leftAnkle = createVector(round(d[42]), round(d[43])); //14 

    leftAnkleExists = (leftAnkle.x + leftAnkle.y != 0) ? true : false;

    rightEye = createVector(round(d[45]), round(d[46])); //15 

    rightEyeExists = (rightEye.x + rightEye.y != 0) ? true : false;

    leftEye = createVector(round(d[48]), round(d[49])); //16 

    leftEyeExists = (leftEye.x + leftEye.y != 0) ? true : false;

    rightEar = createVector(round(d[51]), round(d[52])); //17 

    rightEarExists = (rightEar.x + rightEar.y != 0) ? true : false;

    leftEar = createVector(round(d[54]), round(d[55])); //18 

    leftEarExists = (leftEar.x + leftEar.y != 0) ? true : false;

    leftBigToe = createVector(round(d[57]), round(d[58])); //19

    leftBigToeExists = (leftBigToe.x + leftBigToe.y != 0) ? true : false;

    leftSmallToe = createVector(round(d[60]), round(d[61])); //20

    leftSmallToeExists = (leftSmallToe.x + leftSmallToe.y != 0) ? true : false;

    leftHeel = createVector(round(d[63]), round(d[64])); //21

    leftHeelExists = (leftHeel.x + leftHeel.y != 0) ? true : false;

    rightBigToe = createVector(round(d[66]), round(d[67])); //22

    rightBigToeExists = (rightBigToe.x + rightBigToe.y != 0) ? true : false;

    rightSmallToe = createVector(round(d[69]), round(d[70])); //23

    rightSmallToeExists = (rightSmallToe.x + rightSmallToe.y != 0) ? true : false;

    rightHeel = createVector(round(d[72]), round(d[73])); //24

    rightHeelExists = (rightHeel.x + rightHeel.y != 0) ? true : false;

    noStroke();

    fill(255);

    //if(noseExists) {circle(nose.x, nose.y, 5);}

    //if(neckExists) {circle(neck.x, neck.y, 5);}

    //if(rightShoulderExists) {circle(rightShoulder.x, rightShoulder.y, 5);}

    /*if(rightElbowExists) {circle(rightElbow.x, rightElbow.y, 5);}*/

    /*if(rightWristExists) {circle(rightWrist.x, rightWrist.y, 5);}*/

    /*if(leftShoulderExists) {circle(leftShoulder.x, leftShoulder.y, 5);}*/

    /*if(leftElbowExists) {circle(leftElbow.x, leftElbow.y, 5);}*/

    /*if(leftWristExists) {circle(leftWrist.x, leftWrist.y, 5);}*/

    /*if(midHipExists) {circle(midHip.x, midHip.y, 5);}*/

    /*if(rightHipExists) {circle(rightHip.x, rightHip.y, 5);}*/

    /*if(rightKneeExists) {circle(rightKnee.x, rightKnee.y, 5);}*/

    /*if(rightAnkleExists) {circle(rightAnkle.x, rightAnkle.y, 5);}*/

    /*if(leftHipExists) {circle(leftHip.x, leftHip.y, 5);}*/

    /*if(leftKneeExists) {circle(leftKnee.x, leftKnee.y, 5);}*/

    /*if(leftAnkleExists) {circle(leftAnkle.x, leftAnkle.y, 5);}*/

    /*if(rightEyeExists) {circle(rightEye.x, rightEye.y, 5);}*/

    /*if(leftEyeExists) {circle(leftEye.x, leftEye.y, 5);}*/

    /*if(rightEarExists) {circle(rightEar.x, rightEar.y, 5);}*/

    /*if(leftEarExists) {circle(leftEar.x, leftEar.y, 5);}*/

    //if(leftBigToeExists) {circle(leftBigToe.x, leftBigToe.y, 5);}

    //if(leftSmallToeExists) {circle(leftSmallToe.x, leftSmallToe.y, 5);}

    //if(leftHeelExists) {circle(leftHeel.x, leftHeel.y, 5);}

    //if(rightBigToeExists) {circle(rightBigToe.x, rightBigToe.y, 5);}

    //if(rightSmallToeExists) {circle(rightSmallToe.x, rightSmallToe.y, 5);}

    //if(rightHeelExists) {circle(rightHeel.x, rightHeel.y, 5);}

    // stroke(255);

    // strokeWeight(3);

    //if(noseExists && neckExists){ line(nose.x, nose.y, neck.x, neck.y); }

    // if(neckExists && rightShoulderExists){ line(neck.x, neck.y, rightShoulder.x, rightShoulder.y); }

    // if(rightShoulderExists && rightElbowExists){ line(rightShoulder.x, rightShoulder.y, rightElbow.x, rightElbow.y); }

    // if(rightElbowExists && rightWristExists){ line(rightElbow.x, rightElbow.y, rightWrist.x, rightWrist.y); }

  }

}

​

function drawSkeleton25B(frame) {

  if(data[frame][1].length > 0){

    let d = data[frame][1][0]['pose_keypoints_2d']

    //see for key: https://colab.research.google.com/drive/1tDSZOS3facPUYme2n48yHMeB1v86s2-Q?authuser=4#scrollTo=dJIjTRi_6ZmQ

    //0,1,2 return empty vectors for 25B

    rightEye = createVector(round(d[9]), round(d[10])); //?3

    rightEyeExists = (rightEye.x + rightEye.y != 0) ? true : false;

    leftEye = createVector(round(d[12]), round(d[13])); //?4 

    leftEyeExists = (leftEye.x + leftEye.y != 0) ? true : false;

    rightShoulder = createVector(round(d[15]), round(d[16])); //?5

    rightShoulderExists = (rightShoulder.x + rightShoulder.y != 0) ? true : false;

    leftShoulder = createVector(round(d[18]), round(d[19])); //?6

    leftShoulderExists = (leftShoulder.x + leftShoulder.y != 0) ? true : false;

    rightElbow = createVector(round(d[21]), round(d[22])); //?7

    rightElbowExists = (rightElbow.x + rightElbow.y != 0) ? true : false;

    leftElbow = createVector(round(d[24]), round(d[25])); //?8

    leftElbowExists = (leftElbow.x + leftElbow.y != 0) ? true : false;

    rightWrist = createVector(round(d[27]), round(d[28])); //?9

    rightWristExists = (rightWrist.x + rightWrist.y != 0)

    leftWrist = createVector(round(d[30]), round(d[31])); //?10

    leftWristExists = (leftWrist.x + leftWrist.y != 0) ? true : false;

    rightHip = createVector(round(d[33]), round(d[34])); //?11 

    rightHipExists = (rightHip.x + rightHip.y != 0) ? true : false;

    leftHip = createVector(round(d[36]), round(d[37])); //?12 

    leftHipExists = (leftHip.x + leftHip.y != 0) ? true : false;

    rightKnee = createVector(round(d[39]), round(d[40])); //?13 

    rightKneeExists = (rightKnee.x + rightKnee.y != 0) ? true : false;

    leftKnee = createVector(round(d[42]), round(d[43])); //?14 

    leftKneeExists = (leftKnee.x + leftKnee.y != 0) ? true : false;

    rightAnkle = createVector(round(d[45]), round(d[46])); //?15 

    rightAnkleExists = (rightAnkle.x + rightAnkle.y != 0) ? true : false;

    leftAnkle = createVector(round(d[48]), round(d[49])); //?16 

    leftAnkleExists = (leftAnkle.x + leftAnkle.y != 0) ? true : false;

    bottomHead = createVector(round(d[51]), round(d[52])); //?17

    bottomHeadExists = (bottomHead.x + bottomHead.y != 0) ? true : false;

    topHead = createVector(round(d[54]), round(d[55])); //?18

    topHeadExists = (topHead.x + topHead.y != 0) ? true : false;

    rightBigToe = createVector(round(d[57]), round(d[58])); //?19

    rightBigToeExists = (rightBigToe.x + rightBigToe.y != 0) ? true : false;

    rightSmallToe = createVector(round(d[60]), round(d[61])); //?20

    rightSmallToeExists = (rightSmallToe.x + rightSmallToe.y != 0) ? true : false;

    rightHeel = createVector(round(d[63]), round(d[64])); //?21

    rightHeelExists = (rightHeel.x + rightHeel.y != 0) ? true : false;

    leftBigToe = createVector(round(d[66]), round(d[67])); //?22

    leftBigToeExists = (leftBigToe.x + leftBigToe.y != 0) ? true : false;

    leftSmallToe = createVector(round(d[69]), round(d[70])); //?23

    leftSmallToeExists = (leftSmallToe.x + leftSmallToe.y != 0) ? true : false;

    leftHeel = createVector(round(d[72]), round(d[73])); //?24

    leftHeelExists = (leftHeel.x + leftHeel.y != 0) ? true : false;

    noStroke();

    fill(255);

    //dots

    //if(topHeadExists) {circle(topHead.x, topHead.y, 5);}

//     if(bottomHeadExists) {circle(bottomHead.x, bottomHead.y, 5);}

//     if(rightShoulderExists) {circle(rightShoulder.x, rightShoulder.y, 5);}

//     if(rightElbowExists) {circle(rightElbow.x, rightElbow.y, 5);}

//     if(rightWristExists) {circle(rightWrist.x, rightWrist.y, 5);}

//     if(leftShoulderExists) {circle(leftShoulder.x, leftShoulder.y, 5);}

//     if(leftElbowExists) {circle(leftElbow.x, leftElbow.y, 5);}

//     if(leftWristExists) {circle(leftWrist.x, leftWrist.y, 5);}

//     if(rightHipExists) {circle(rightHip.x, rightHip.y, 5);}

//     if(rightKneeExists) {circle(rightKnee.x, rightKnee.y, 5);}

//     if(rightAnkleExists) {circle(rightAnkle.x, rightAnkle.y, 5);}

//     if(leftHipExists) {circle(leftHip.x, leftHip.y, 5);}

//     if(leftKneeExists) {circle(leftKnee.x, leftKnee.y, 5);}

//     if(leftAnkleExists) {circle(leftAnkle.x, leftAnkle.y, 5);}

//     if(rightEyeExists) {circle(rightEye.x, rightEye.y, 5);}

//     if(leftEyeExists) {circle(leftEye.x, leftEye.y, 5);}

//     if(leftBigToeExists) {circle(leftBigToe.x, leftBigToe.y, 5);}

//     if(leftSmallToeExists) {circle(leftSmallToe.x, leftSmallToe.y, 5);}

//     if(leftHeelExists) {circle(leftHeel.x, leftHeel.y, 5);}

//     if(rightBigToeExists) {circle(rightBigToe.x, rightBigToe.y, 5);}

//     if(rightSmallToeExists) {circle(rightSmallToe.x, rightSmallToe.y, 5);}

//     if(rightHeelExists) {circle(rightHeel.x, rightHeel.y, 5);}

    stroke(255);

    strokeWeight(3);

    if(topHeadExists && bottomHeadExists) { line(topHead.x, topHead.y, bottomHead.x, bottomHead.y) } 

    if(rightEyeExists && leftEyeExists) { line(rightEye.x, rightEye.y, leftEye.x, leftEye.y) }

    if(rightShoulderExists && leftShoulderExists) { line(rightShoulder.x, rightShoulder.y, leftShoulder.x, leftShoulder.y) }

    if(rightShoulderExists && rightElbowExists){ line(rightShoulder.x, rightShoulder.y, rightElbow.x, rightElbow.y); }

    if(rightElbowExists && rightWristExists){ line(rightElbow.x, rightElbow.y, rightWrist.x, rightWrist.y); }

    if(leftShoulderExists && leftElbowExists){ line(leftShoulder.x, leftShoulder.y, leftElbow.x, leftElbow.y); }

    if(leftElbowExists && leftWristExists){ line(leftElbow.x, leftElbow.y, leftWrist.x, leftWrist.y); }

    if(leftShoulderExists && leftHipExists){ line(leftShoulder.x, leftShoulder.y, leftHip.x, leftHip.y); }

    if(rightShoulderExists && rightHipExists){ line(rightShoulder.x, rightShoulder.y, rightHip.x, rightHip.y); }

    if(leftHipExists && rightHipExists){ line(leftHip.x, leftHip.y, rightHip.x, rightHip.y); }

    if(leftHipExists && leftKneeExists){ line(leftHip.x, leftHip.y, leftKnee.x, leftKnee.y); }

    if(leftKneeExists && leftAnkleExists){ line(leftKnee.x, leftKnee.y, leftAnkle.x, leftAnkle.y); }

    if(rightHipExists && rightKneeExists){ line(rightHip.x, rightHip.y, rightKnee.x, rightKnee.y); }

    if(rightKneeExists && rightAnkleExists){ line(rightKnee.x, rightKnee.y, rightAnkle.x, rightAnkle.y); }

    if(leftBigToeExists && leftSmallToeExists){ line(leftBigToe.x, leftBigToe.y, leftSmallToe.x, leftSmallToe.y); }

    if(leftBigToeExists && leftHeelExists){ line(leftBigToe.x, leftBigToe.y, leftHeel.x, leftHeel.y); }

    if(leftSmallToeExists && leftHeelExists){ line(leftSmallToe.x, leftSmallToe.y, leftHeel.x, leftHeel.y); }

    if(leftBigToeExists && leftAnkleExists){ line(leftBigToe.x, leftBigToe.y, leftAnkle.x, leftAnkle.y); }

    if(leftSmallToeExists && leftAnkleExists){ line(leftSmallToe.x, leftSmallToe.y, leftAnkle.x, leftAnkle.y); }

    if(leftAnkleExists && leftHeelExists){ line(leftAnkle.x, leftAnkle.y, leftHeel.x, leftHeel.y); }

    if(rightBigToeExists && rightSmallToeExists){ line(rightBigToe.x, rightBigToe.y, rightSmallToe.x, rightSmallToe.y); }

    if(rightBigToeExists && rightHeelExists){ line(rightBigToe.x, rightBigToe.y, rightHeel.x, rightHeel.y); }

    if(rightSmallToeExists && rightHeelExists){ line(rightSmallToe.x, rightSmallToe.y, rightHeel.x, rightHeel.y); }

    if(rightBigToeExists && rightAnkleExists){ line(rightBigToe.x, rightBigToe.y, rightAnkle.x, rightAnkle.y); }

    if(rightSmallToeExists && rightAnkleExists){ line(rightSmallToe.x, rightSmallToe.y, rightAnkle.x, rightAnkle.y); }

    if(rightAnkleExists && rightHeelExists){ line(rightAnkle.x, rightAnkle.y, rightHeel.x, rightHeel.y); }

  }

}

​