​

let handpose;

let video;

let prediction = [];

​

let drawColor;

let dotSystem;

​

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  video.size(width, height);

  dotSystem = new DotSystem();

  handpose = ml5.handpose(video, modelReady);

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

    prediction = results;

  });

  video.hide();

  drawColor = color(0);

}

​

function modelReady() {

  console.log("Model ready!");

}

​

function draw() {

  translate(width, 0);

  scale(-1, 1);

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

  drawKeypoints();

  dotSystem.display();

​

}

​

function drawKeypoints() {

  // Check camera detected a hand

  if(prediction.length > 0) {

    // Only able to detect 1 hand

    // Therefore, only 0 index is valid

    // 0 - palm, 4 - tip of thumb, 8 - tip of index

    // 12 - tip of middle, 16 - tip of ring, 20 - tip of pinky

    const tPoint = prediction[0].landmarks[4];

    const iPoint = prediction[0].landmarks[8];

    const mPoint = prediction[0].landmarks[12];

    const rPoint = prediction[0].landmarks[16];

    const pPoint = prediction[0].landmarks[20];

    const palmPoint = prediction[0].landmarks[0];

    const tpDist = dist(tPoint[0], tPoint[1], pPoint[0], pPoint[1]);

    if(tpDist <= 80) {

      // console.log("call color changing");

      // dotSystem.changeColor();

      drawColor = color(random(0, 255), random(0, 255), random(0, 255));

    }

    dotSystem.addDot(iPoint[0], iPoint[1], drawColor);

​

    const tPalmDist = dist(tPoint[0], tPoint[1], palmPoint[0], palmPoint[1]) <= 150 ? true : false;

    const iPalmDist = dist(iPoint[0], iPoint[1], palmPoint[0], palmPoint[1]) <= 70 ? true : false;

    const mPalmDist = dist(mPoint[0], mPoint[1], palmPoint[0], palmPoint[1]) <= 70 ? true : false;

    const rPalmDist = dist(rPoint[0], rPoint[1], palmPoint[0], palmPoint[1]) <= 70 ? true : false;

    const pPalmDist = dist(pPoint[0], pPoint[1], palmPoint[0], palmPoint[1]) <= 70 ? true : false;    

    // Set finger points color as green

    fill(0, 255, 0);

    noStroke();

​

    ellipse(tPoint[0], tPoint[1], 5, 5);

    ellipse(iPoint[0], iPoint[1], 5, 5);    

    ellipse(mPoint[0], mPoint[1], 5, 5);

    ellipse(rPoint[0], rPoint[1], 5, 5);

    ellipse(pPoint[0], pPoint[1], 5, 5);    

    ellipse(palmPoint[0], palmPoint[1], 5, 5);    

​

    if(tPalmDist && iPalmDist && mPalmDist && rPalmDist && pPalmDist) {

      dotSystem = new DotSystem();

    }

  }

}