​

let detections = {};

​

const videoElement = document.getElementById("video");

​

function gotHands(results) {

  detections = results;

  console.log(detections);

}

​

const hands = new Hands({

  locateFile: (file) => {

    return `https://cdn.jsdelivr.net/npm/@mediapipe/hands/${file}`;

  },

});

hands.setOptions({

  maxNumHands: 2,

  modelComplexity: 1,

  minDetectionConfidence: 0.5,

  minTrackingConfidence: 0.5,

});

hands.onResults(gotHands);

​

const camera = new Camera(videoElement, {

  onFrame: async () => {

    await hands.send({ image: videoElement });

  },

  width: 640,

  height: 480,

});

camera.start();

​

function setup() {

  const canvas = createCanvas(640, 480);

  canvas.id("canvas");

​

  colorMode(HSB);

  // MIDI 

  WebMidi

    .enable()

    .then(onEnabled)

    .catch(function(err) { alert(err); });

}

​

function draw() {

  clear();

  if (detections != undefined) {

    if (detections.multiHandLandmarks != undefined) {

      // drawHands();

      // drawParts();

​

      drawLines([0, 5, 9, 13, 17, 0]); //palm

      drawLines([0, 1, 2, 3, 4]); //thumb

      drawLines([5, 6, 7, 8]); //index finger

      drawLines([9, 10, 11, 12]); //middle finger

      drawLines([13, 14, 15, 16]); //ring finger

      drawLines([17, 18, 19, 20]); //pinky

​

      drawLandmarks([0, 1], 0); //palm base

      drawLandmarks([1, 5], 60); //thumb

      drawLandmarks([5, 9], 120); //index finger

      drawLandmarks([9, 13], 180); //middle finger

      drawLandmarks([13, 17], 240); //ring finger

      drawLandmarks([17, 21], 300); //pinky

    }

  }

}

​

function drawHands() {

  for (let i = 0; i < detections.multiHandLandmarks.length; i++) {

    for (let j = 0; j < detections.multiHandLandmarks[i].length; j++) {

      let x = detections.multiHandLandmarks[i][j].x * width;

      let y = detections.multiHandLandmarks[i][j].y * height;

      let z = detections.multiHandLandmarks[i][j].z;

      // strokeWeight(0);

      // textFont('Helvetica Neue');

      // text(j, x, y);

      stroke(255);

      strokeWeight(10);

      point(x, y);

    }

  }

}

​

function drawLandmarks(indexArray, hue) {

  noFill();

  strokeWeight(8);

  for (let i = 0; i < detections.multiHandLandmarks.length; i++) {

    for (let j = indexArray[0]; j < indexArray[1]; j++) {

      let x = detections.multiHandLandmarks[i][j].x * width;

      let y = detections.multiHandLandmarks[i][j].y * height;

      // let z = detections.multiHandLandmarks[i][j].z;

      stroke(hue, 40, 255);

      point(x, y);

    }

  }

}

​

function drawLines(index) {

  stroke(0, 0, 255);

  strokeWeight(3);

  for (let i = 0; i < detections.multiHandLandmarks.length; i++) {

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

      let x = detections.multiHandLandmarks[i][index[j]].x * width;

      let y = detections.multiHandLandmarks[i][index[j]].y * height;

      // let z = detections.multiHandLandmarks[i][index[j]].z;

​

      let _x = detections.multiHandLandmarks[i][index[j + 1]].x * width;

      let _y = detections.multiHandLandmarks[i][index[j + 1]].y * height;

      // let _z = detections.multiHandLandmarks[i][index[j+1]].z;

      line(x, y, _x, _y);

    }

  }

}

​