let video;

let handResults = [];

​

function setup() {

  createCanvas(640, 480);

​

  video = createCapture(VIDEO);

  video.size(width, height);

​

  // Initialize MediaPipe Hands

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

​

  const camera = new Camera(video.elt, {

    onFrame: async () => {

      await hands.send({image: video.elt});

    },

    width: 640,

    height: 480

  });

​

  camera.start();

}

​

function onResults(results) {

  handResults = results;

}

​

function draw() {

  background(255);

​

  if (handResults.multiHandLandmarks) {

    for (const landmarks of handResults.multiHandLandmarks) {

      drawHand(landmarks);

    }

  }

}

​

function drawHand(landmarks) {

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

    const x = landmarks[i].x * width;

    const y = landmarks[i].y * height;

    ellipse(x, y, 5, 5);

  }

}

​