​

let video;

let bodyPose;

let poses = [];

​

let pg;

let lastX = -1;

let lastY = -1;

let lastX2 = -1;

let lastY2 = -1;

​

​

function preload() {

  bodyPose = ml5.bodyPose("BlazePose");

}

​

function setup() {

  createCanvas(640, 480);

​

  // this creates a second drawing surface to draw the motion study on

  pg = createGraphics(width, height); 

  video = createCapture(VIDEO);

  video.size(width, height);

  video.hide();

​

  bodyPose.detectStart(video, gotPoses);

}

​

function gotPoses(results) {

  poses = results;

  console.log(results);

}

​

function draw() {

  // Draw the webcam video

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

​

  pg.fill(0, 2);

  pg.rect(0, 0, width, height);

​

  if (poses.length > 0) {

    let x = poses[0].right_wrist.x;

    let y = poses[0].right_wrist.y;

    let confidence = poses[0].right_wrist.confidence;

​

    if (confidence > 0.8) {

      if (lastX != -1) {

        pg.stroke("yellow");

        pg.line(lastX, lastY, x, y);

      }

      lastX = x;

      lastY = y;

    }

    let x2 = poses[0].left_wrist.x;

    let y2 = poses[0].left_wrist.y;

    let confidence2 = poses[0].left_wrist.confidence;

​

    if (confidence2 > 0.8) {

      if (lastX2 != -1) {

        pg.stroke("red");

        pg.line(lastX2, lastY2, x2, y2);

      }

      lastX2 = x2;

      lastY2 = y2;

    }

  }

​

  image(pg, 0, 0);

}

​