2104fingertips

let handpose;

let video;

let predictions = [];

​

var camerax = 640;

var cameray = 480;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  video = createCapture(VIDEO);

  video.size(camerax, cameray);

​

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

  background(0);

}

​

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

}

​

// A function to draw ellipses over the detected keypoints

function drawKeypoints() {

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

    const p = predictions[i];

    noStroke();

    let f, kx, ky;

    fill(255, 0, 0);

    f = p.annotations.thumb[3];

    kx = f[0]/video.width * width;

    ky = f[1]/video.height * height;

    ellipse(kx, ky, 30, 30);

    fill(255, 255, 0);

    f = p.annotations.indexFinger[3];

    kx = f[0]/video.width * width;

    ky = f[1]/video.height * height;

    ellipse(kx, ky, 30, 30);

    fill(0, 255, 0);

    f = p.annotations.middleFinger[3];

    kx = f[0]/video.width * width;

    ky = f[1]/video.height * height;

    ellipse(kx, ky, 30, 30);

    fill(0, 255, 255);

    f = p.annotations.ringFinger[3];

    kx = f[0]/video.width * width;

    ky = f[1]/video.height * height;

    ellipse(kx, ky, 30, 30);

    fill(0, 0, 255);

    f = p.annotations.pinky[3];

    kx = f[0]/video.width * width;

    ky = f[1]/video.height * height;

    ellipse(kx, ky, 30, 30);

    fill(255, 0, 255);

    f = p.annotations.palmBase[0];

    kx = f[0]/video.width * width;

    ky = f[1]/video.height * height;

    ellipse(kx, ky, 50, 50);

  }

}

​

function keyTyped()

{

  background(0);

}