let video;

let predictions = [];

​

let img=[];

​

function preload(){

  img[0] = loadImage("./finger0.png");    //画像の読み込み

  img[1] = loadImage("./finger1.png");    //画像の読み込み

  img[2] = loadImage("./finger2.png");    //画像の読み込み

  img[3] = loadImage("./finger3.png");    //画像の読み込み

}

​

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() {  

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

​

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

  drawKeypoints();

}

​

​

function oneFinger(prediction){

    // note: 使う座標を用意

    const oyayubiTipPos = prediction.landmarks[4];// 親指の先

    const hitosashiyubiTipPos = prediction.landmarks[8];// 人差し指の先

    const nakayubiTipPos = prediction.landmarks[12];// 中指の先

    const kusuriyubiTipPos = prediction.landmarks[16];// 薬指の先

    const koyubiTipPos = prediction.landmarks[20];// 小指の先

    // note: フラグを用意

    // note: 左から右、上から下につれて値が大きくなることに注意！

    const isOyayubi_Hitosashiyubi = oyayubiTipPos[1] > hitosashiyubiTipPos[1];

    const isNakayubi_Hitosashiyubi =  nakayubiTipPos[1] > hitosashiyubiTipPos[1];

    const isKusuriyubi_Hitosashiyubi =  kusuriyubiTipPos[1] > hitosashiyubiTipPos[1];

    const isKoyubi_Hitosashiyubi =  koyubiTipPos[1] > hitosashiyubiTipPos[1];

    const isFingerOne = 

          isOyayubi_Hitosashiyubi && isNakayubi_Hitosashiyubi && isKusuriyubi_Hitosashiyubi && isKoyubi_Hitosashiyubi;

    return isFingerOne;

}

​

function twoFinger(prediction){

    // note: 使う座標を用意

    const oyayubiTipPos = prediction.landmarks[4];// 親指の先

    const hitosashiyubiTipPos = prediction.landmarks[8];// 人差し指の先

    const nakayubiTipPos = prediction.landmarks[12];// 中指の先

    const kusuriyubiTipPos = prediction.landmarks[16];// 薬指の先

    const koyubiTipPos = prediction.landmarks[20];// 小指の先

    // note: フラグを用意

    // note: 左から右、上から下につれて値が大きくなることに注意！

    const isOyayubi_Nakayubi = oyayubiTipPos[1] > nakayubiTipPos[1];

    const isKusuriyubi_Nakayubi =  kusuriyubiTipPos[1] > nakayubiTipPos[1];

    const isKoyubi_Nakayubi =  koyubiTipPos[1] > nakayubiTipPos[1];

    // note: 人差し指-中指と判定を除き、指1本のときと同じ

    const isOyayubi_Hitosashiyubi = oyayubiTipPos[1] > hitosashiyubiTipPos[1];

    const isKusuriyubi_Hitosashiyubi =  kusuriyubiTipPos[1] > hitosashiyubiTipPos[1];

    const isKoyubi_Hitosashiyubi =  koyubiTipPos[1] > hitosashiyubiTipPos[1];

    const isFingerTwo = 

          isOyayubi_Hitosashiyubi &&  isKusuriyubi_Hitosashiyubi && isKoyubi_Hitosashiyubi &&

          isOyayubi_Nakayubi &&  isKusuriyubi_Nakayubi && isKoyubi_Nakayubi;

    return isFingerTwo;

}

​

function threeFinger(prediction){

    // note: 使う座標を用意

    const oyayubiTipPos = prediction.landmarks[4];// 親指の先

    const hitosashiyubiTipPos = prediction.landmarks[8];// 人差し指の先

    const nakayubiTipPos = prediction.landmarks[12];// 中指の先

    const kusuriyubiTipPos = prediction.landmarks[16];// 薬指の先

    const koyubiTipPos = prediction.landmarks[20];// 小指の先

    // note: フラグを用意

    // note: 左から右、上から下につれて値が大きくなることに注意！

    const isOyayubi_Kusuriyubi = oyayubiTipPos[1] > kusuriyubiTipPos[1];

    const isKoyubi_Kusuriyubi =  koyubiTipPos[1] > kusuriyubiTipPos[1];

  // note: 薬指-中指と判定を除き、指2本のときと同じ

    const isOyayubi_Nakayubi = oyayubiTipPos[1] > nakayubiTipPos[1];

    const isKoyubi_Nakayubi =  koyubiTipPos[1] > nakayubiTipPos[1];

    // note: 薬指-人差し指と判定を除き、指2本のときと同じ

    const isOyayubi_Hitosashiyubi = oyayubiTipPos[1] > hitosashiyubiTipPos[1];

    const isKoyubi_Hitosashiyubi =  koyubiTipPos[1] > hitosashiyubiTipPos[1];

    const isFingerThree = 

          isOyayubi_Hitosashiyubi  && isKoyubi_Hitosashiyubi &&

          isOyayubi_Nakayubi && isKoyubi_Nakayubi &&

          isOyayubi_Kusuriyubi && isKoyubi_Kusuriyubi;

    return isFingerThree;

}

​

​

// 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];

      fill(0, 255, 0);

      noStroke();

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

      fill(255, 0, 0);

      textSize(32);

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

    }

​

    const isFingerOne = oneFinger(prediction);

    const isFingerTwo = twoFinger(prediction);

    const isFingerThree = threeFinger(prediction);

    if(isFingerOne){

      image(img[1], 0, 0);

    }else if(isFingerTwo){

      image(img[2], 0, 0);

    }else if(isFingerThree){

      image(img[3], 0, 0);

    }else{

      image(img[0], 0, 0);

    }

  }

}

​