​

​

function setup() {

​

  createCanvas(windowWidth, windowHeight); // create Main Canvas

  poseViz = new PoseViz();

  frameRate(60);

  background(0);

  stroke(255);

}

​

function draw() {

  poseViz.drawSVG();

}

​

function restart() {

    // poseViz.clearSVG();

    background(0);

    poseViz.toggle = true;

    poseViz.X = 50;

    poseViz.Y = 50;

}

​

class PoseViz {

  constructor() {

​

    this.s = 15;

    this.X = 50;

    this.Y = 50;

    this.capture = createCapture(VIDEO);

    // this.capture.size(camX2, camY2);

    this.capture.hide();

    let options = {

  architecture: 'MobileNetV1',

  // imageScaleFactor: 2,

  minConfidence: 0.9,

  // outputStride: 8,

  // flipHorizontal: false,

  // minConfidence: 0.5,

  maxPoseDetections: 1,

  // scoreThreshold: 0.7,

  // nmsRadius: 20,

  // detectionType: 'single',

  // inputResolution: 801,

  // multiplier: 1,

  // quantBytes: 4

};

    this.poseNet = ml5.poseNet(this.capture, options, this.modelLoaded);

​

    let callback = this.gotPoses.bind(this); // bind the "this" to the callback

    this.poseNet.on("pose", callback);

    // this.clearSVG();

    this.toggle = true;

  }

​

  gotPoses(poses) {

    if (poses.length > 0) {

      // maybe add a condition to take only a high confidence pose

      this.pose = poses[0].pose; // take the first pose and put in the global variable

    }

  }

​

  modelLoaded() {

    console.log("poseNet ready");

​

  }

    drawPoseSVG(pose, s, v=createVector(0,0)) {

    if (pose) {

      // get distance by getting distance between two shoulder

      let R = pose.leftEye;

      let L = pose.rightEye;

      const d = dist(R.x, R.y, L.x, L.y); // i can then use d to handle size of dots

      const circleSize = d / s;

​

      // Keypoints 

      ellipse(pose.nose.x / s , pose.nose.y / s , circleSize * 3);

      ellipse(pose.leftShoulder.x / s, pose.leftShoulder.y / s , circleSize);

      ellipse(pose.rightShoulder.x / s, pose.rightShoulder.y / s , circleSize);

      ellipse(pose.leftElbow.x / s, pose.leftElbow.y / s , circleSize);

      ellipse(pose.rightElbow.x / s, pose.rightElbow.y / s  , circleSize);

      ellipse(pose.leftWrist.x / s, pose.leftWrist.y / s , circleSize);

      ellipse(pose.rightWrist.x / s, pose.rightWrist.y / s , circleSize);

      ellipse(pose.leftHip.x / s, pose.leftHip.y / s , circleSize);

      ellipse(pose.rightHip.x / s, pose.rightHip.y / s , circleSize);

      ellipse(pose.leftKnee.x / s, pose.leftKnee.y / s , circleSize);

      ellipse(pose.rightKnee.x / s, pose.rightKnee.y / s , circleSize);

      ellipse(pose.leftAnkle.x / s, pose.leftAnkle.y / s , circleSize);

      ellipse(pose.rightAnkle.x / s, pose.rightAnkle.y / s , circleSize);

      // Bones

      line(pose.leftAnkle.x / s,pose.leftAnkle.y / s,pose.leftKnee.x / s,pose.leftKnee.y / s);

      line(pose.leftKnee.x / s,pose.leftKnee.y / s,pose.leftHip.x / s,pose.leftHip.y / s);

      line(pose.leftHip.x / s,pose.leftHip.y / s,pose.leftShoulder.x / s,pose.leftShoulder.y / s);

      line(pose.leftShoulder.x / s,pose.leftShoulder.y / s,pose.leftElbow.x / s,pose.leftElbow.y / s);

      line(pose.leftElbow.x / s,pose.leftElbow.y / s,pose.leftWrist.x / s,pose.leftWrist.y / s);

      line(pose.rightAnkle.x / s,pose.rightAnkle.y / s,pose.rightKnee.x / s,pose.rightKnee.y / s);

      line(pose.rightKnee.x / s,pose.rightKnee.y / s,pose.rightHip.x / s,pose.rightHip.y / s);

      line(pose.rightHip.x / s,pose.rightHip.y / s,pose.rightShoulder.x / s,pose.rightShoulder.y / s);

      line(pose.rightShoulder.x / s,pose.rightShoulder.y / s,pose.rightElbow.x / s,pose.rightElbow.y / s);

      line(pose.rightElbow.x / s,pose.rightElbow.y / s,pose.rightWrist.x / s,pose.rightWrist.y / s);

      line(pose.leftHip.x / s,pose.leftHip.y / s,pose.rightHip.x / s,pose.rightHip.y / s);

      line(pose.leftShoulder.x / s,pose.leftShoulder.y / s,pose.rightShoulder.x / s,pose.rightShoulder.y / s);

    }

  }

  clearSVG(){

    clear();

    // background(20,80,250);

  }

​

  drawSVG() {

    if (this.toggle && frameCount % 3 == 0) {

​

      let padding = 30;

      let stepX = 25;

      let stepY = 60;

      noFill();

      strokeWeight(1);

      push();

      let v = createVector(this.X, this.Y)

      translate(v.x, v.y)

      this.drawPoseSVG(this.pose, this.s, v);

      pop();

​

      this.X += stepX;

​

      if (this.X > windowWidth - padding * 2 ) {

        this.X = padding;

        this.Y += stepY;

      }

      if (this.Y > windowHeight - padding) {

        this.X = padding;

        this.Y = padding;

        this.toggle = false;

        restart();

      }

​

    }

  }

}

​