手の骨格を取得する（Handpose）

// https://learn.ml5js.org/#/reference/handpose

let handpose; //手の骨格用変数

let video; //ビデオ用変数

let flippedVideo; //上のvideoを左右反転させた動画を表す変数

let predictions = []; //手の骨格の配列（２つ以上の手を検出する場合のため）

let ftip = new Array(5); //各指先を保存するための配列

const options = {

flipHorizontal: true, // boolean value for if the video should be flipped, defaults to false

maxContinuousChecks: Infinity, // How many frames to go without running the bounding box detector. Defaults to infinity, but try a lower value if the detector is consistently producing bad predictions.

detectionConfidence: 0.5, // Threshold for discarding a prediction. Defaults to 0.8.

scoreThreshold: 0.75, // A threshold for removing multiple (likely duplicate) detections based on a "non-maximum suppression" algorithm. Defaults to 0.75

iouThreshold: 0.3, // A float representing the threshold for deciding whether boxes overlap too much in non-maximum suppression. Must be between [0, 1]. Defaults to 0.3.

}

function setup() {

createCanvas(640, 480); //Canvasサイズの指定

video = createCapture(VIDEO); //カメラ入力をvideoという変数に代入

video.size(width, height); //ビデオのサイズを指定

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

    ftip[i] = new Array(2); // 2個

  }

flippedVideo = ml5.flipImage(video); //ビデオを左右反転

handpose = ml5.handpose(video, options, modelReady); //手の骨格検出のための準備

// 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; //結果をpredictionsという変数に入れる

});

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

video.hide(); //ビデオの表示を隠す

strokeWeight(5); //線の幅の指定

}

function modelReady() {

console.log("Model ready!"); //手の骨格検出の準備ができたらModel ready!と表示する

}

function draw() {

flippedVideo = ml5.flipImage(video); //ビデオの左右反転処理

image(flippedVideo, 0, 0, width, height); //ビデオを（0,0）の位置にwidth幅、height高さで表示

  // scale(-1,1);

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

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

drawKeypoints(); //keypoints（関節位置およびリンク）を描く

}

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

// if(frameCount % 60 == 0) console.log(predictions.length);

for (let i = 0; i < predictions.length; i += 1) { //predictions.length：検出した手の数（今のところ１のみ）

const prediction = predictions[i]; ////predictionという変数にredictionsのi番目を入れる（今のところ０のみ）

let pKeypoint;

// for (let j = 4; j < 5; j += 1) {

for (let j = 0; j < prediction.landmarks.length; j += 1) { //０から関節の数（今は２０）分ループを回す

const keypoint = prediction.landmarks[j];   //各関節の位置（ｘ、ｙ）座標値をkeypointに入れる

//keypoint[0]:keypointのx座標値、keypoint[1]：y座標値

if (j > 0 && (j != 5 && j != 9 && j != 13 && j != 17)) { //リンクを描く関節間のみ扱うため、０番、５，９，１３，１７番（手首と指先）は描かないようにする。

stroke(255, 255, 0); //リンクの色を黄色とする

line(pKeypoint[0], pKeypoint[1], keypoint[0], keypoint[1]); //関節間を線で結ぶ

}

noStroke();

fill(0, 255, 0); //fillを緑色にする

// ellipse(-keypoint[0] - width, keypoint[1], 10, 10);

ellipse(keypoint[0], keypoint[1], 10, 10); //keypointの位置に直径１０の円を描く

pKeypoint = keypoint; //現在のkeypointをpKeypointとして保存し、次回関節間を線で結ぶ時の１つ前のkeypointとして使う

}

count = 0; //指先位置のカウント

for(let i=4; i<=20; i+=4){ //指先は4, 8, 12, 16, 20番目なのでそれらの（ｘ、ｙ）座標値をftipに保存する

ftip[count][0] = prediction.landmarks[i][0];

ftip[count][1] = prediction.landmarks[i][1];

count++;

}

// for(let i=0; i<5; i++){

// for(let j=0; j<2; j++){

// print(ftip[i][j]);

// }

// }

// print("**********************");

}

}