let keypointsPose = [];

const videoElement = document.getElementsByClassName("input_video")[0];

videoElement.style.display = "none";

​

function onPoseResults(results) {

  keypointsPose = results.poseLandmarks;

}

​

const pose = new Pose({

  locateFile: (file) => {

    return `https://cdn.jsdelivr.net/npm/@mediapipe/pose/${file}`;

  },

});

​

pose.setOptions({

  modelComplexity: 1,

  smoothLandmarks: true,

  enableSegmentation: true,

  smoothSegmentation: true,

  minDetectionConfidence: 0.5,

  minTrackingConfidence: 0.5

});

pose.onResults(onPoseResults);

​

const camera = new Camera(videoElement, {

  onFrame: async () => {

    await pose.send({ image: videoElement });

  },

  width: 640,

  height: 360,

});

camera.start();

​

let videoImage;

let lx = 0;

let w = 2;

let w2 = 2*w;

​

function setup() {

  createCanvas(640, 360); 

  videoImage = createGraphics(640, 360);

}

​

function draw() {

  stroke(0,0,255);

  strokeWeight(2);

  fill(0, 255, 0);

​

  videoImage.drawingContext.drawImage(

    videoElement,

    0,

    0,

    videoImage.width,

    videoImage.height

  );

​

  push();

  if (isFlipped) {

    translate(width, 0);

    scale(-1, 1);

  }

  displayWidth = width;

  displayHeight = (width * videoImage.height) / videoImage.width;

  image(videoImage, 0, 0, displayWidth, displayHeight);

  pop();

​

  if (keypointsPose){

    if (keypointsPose.length > 0) {

      for (let i=0; i<23; i++){

         indexTip = keypointsPose[i];

         let xx = (1-indexTip.x) * displayWidth;

         let yy = indexTip.y * displayHeight;

         ellipse(xx, yy, 20);

      }

      strokeWeight(2);

      fill(255, 0, 0, 128);

      let y1 = (1-keypointsPose[19].y) * displayHeight;

      let y2 = (1-keypointsPose[20].y) * displayHeight;

      ellipse(320,160,y1+y2,y1+y2);

    }

  }

}

​

​