let video;

let predictions = [];

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

  handpose = ml5.handpose(video, modelReady);

​

  // This sets up an event that fills the global variable "predictions"

  // with an array every time new hand poses are detected

  handpose.on("predict", results => {

    predictions = results;

  });

​

  // Hide the video element, and just show the canvas

  video.hide();

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  // note: ビデオ映像を反転します

  const flippedVideo = ml5.flipImage(video);

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

​

  // We can call both functions to draw all keypoints and the skeletons

  drawKeypoints();

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

  for (let i = 0; i < predictions.length; i += 1) {

    const prediction = predictions[i];

    for (let j = 0; j < prediction.landmarks.length; j += 1) {

      const keypoint = prediction.landmarks[j];

      // note: 推論結果の座標は反転されていないため、座標を変換する。

      keypoint[0] = width - keypoint[0];

      if(j>=5 && j<=8){

        fill(0, 255, 0);

        noStroke();

        ellipse(keypoint[0], keypoint[1], 10, 10);

        fill(255, 0, 0);

        textSize(32);

        text(j, keypoint[0], keypoint[1]);

        fill(0, 0, 0);

        textSize(20);

        const point_x = Math.floor(keypoint[0]);

        const point_y = Math.floor(keypoint[1]);

        text("x:"+point_x+",y:"+point_y,keypoint[0]+20,keypoint[1]);

      }

    }

  }

}

​