人の骨格を取得する（Posenet）

// Copyright (c) 2019 ml5

//

// This software is released under the MIT License.

// https://opensource.org/licenses/MIT

// Japanese comment added by Oz 2022/10/15

/* ===

ml5 Example

PoseNet example using p5.js

=== */

let video;

let poseNet;

let poses = [];

function setup() {

  createCanvas(640, 480); //描画領域の設定

  video = createCapture(VIDEO); //カメラ画像の取り込みの設定

  video.size(width, height); //カメラ画像サイズを描画サイズに合わせる

  // Create a new poseNet method with a single detection

  poseNet = ml5.poseNet(video, modelReady); //ml5のPosenetを使う設定です。入力にカメラ画像、ロード後に実行される関数としてmodelReadyを指定

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

  // with an array every time new poses are detected

  poseNet.on("pose", function(results) { //poseが検出されるごとに配列posesに新しいデータが入る

    poses = results;

  });

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

  video.hide();

}

function modelReady() {

  select("#status").html("Model Loaded");

}

function draw() {

  image(video, 0, 0, width, height); //カメラ画像の表示。

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

  drawKeypoints(); //関節位置の表示

  drawSkeleton(); //関節間のリンクの表示

}

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

  // Loop through all the poses detected

  for (let i = 0; i < poses.length; i += 1) { //検出されている人数分繰り返す。

    // For each pose detected, loop through all the keypoints

    const pose = poses[i].pose; //検出されたposesの中のposeに関節位置情報keypointsが入っている

    for (let j = 0; j < pose.keypoints.length; j += 1) { //keypoints毎にループ

      // A keypoint is an object describing a body part (like rightArm or leftShoulder)

      const keypoint = pose.keypoints[j]; //j番目のkeypointsを取り出し。

      // Only draw an ellipse is the pose probability is bigger than 0.2

      if (keypoint.score > 0.2) { //信頼度が0.2以上なら円を描画

        fill(255, 0, 0);

        noStroke();

        ellipse(keypoint.position.x, keypoint.position.y, 10, 10); //keypoints関節位置のｘ、ｙ座標値を使って円を描画

      }

    }

  }

}

// A function to draw the skeletons

function drawSkeleton() {

  // Loop through all the skeletons detected

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

    const skeleton = poses[i].skeleton; //skeletonは繋がっている関節の連続した並び。

//下記のskeleton[j][0]とskeleton[j][1]が繋がっている２つの関節の座標値。対応するkeypointと同じ値となる。

    // For every skeleton, loop through all body connections

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

      const partA = skeleton[j][0];

      const partB = skeleton[j][1];

      stroke(255, 0, 0);

      line(partA.position.x, partA.position.y, partB.position.x, partB.position.y);

    }

  }

}

// Copyright (c) 2019 ml5

//

// This software is released under the MIT License.

// https://opensource.org/licenses/MIT

// flip the image horizontally by Oz 2022/10/15

/* ===

ml5 Example

PoseNet example using p5.js

=== */

let video;

let poseNet;

let poses = [];

// let flippedVideo;

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

  // Create a new poseNet method with a single detection

  poseNet = ml5.poseNet(video, modelReady);

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

  // with an array every time new poses are detected

  poseNet.on("pose", function(results) {

    poses = results;

  });

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

  video.hide();

}

function modelReady() {

  select("#status").html("Model Loaded");

}

let count = 0;

function draw() {

// const flippedVideo = ml5.flipImage(video);

// image(flippedVideo, 0, 0, width, height); //これだと何故か数分で落ちるので下記のようにしました。

  scale(-1,1);

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

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

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

  drawKeypoints();

  drawSkeleton();

}

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

  // Loop through all the poses detected

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

    // For each pose detected, loop through all the keypoints

    const pose = poses[i].pose;

    for (let j = 0; j < pose.keypoints.length; j += 1) {

      // A keypoint is an object describing a body part (like rightArm or leftShoulder)

      const keypoint = pose.keypoints[j];

      // Only draw an ellipse is the pose probability is bigger than 0.2

      if (keypoint.score > 0.2) {

        fill(255, 0, 0);

        noStroke();

        ellipse(keypoint.position.x-width, keypoint.position.y, 10, 10);

      }

    }

  }

}

// A function to draw the skeletons

function drawSkeleton() {

  // Loop through all the skeletons detected

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

    const skeleton = poses[i].skeleton;

    // For every skeleton, loop through all body connections

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

      const partA = skeleton[j][0];

      const partB = skeleton[j][1];

      stroke(255, 0, 0);

      line(partA.position.x-width, partA.position.y, partB.position.x-width, partB.position.y);

    }

  }

}