​

let ball;

let balls = [];

let ballRadius = 20;

let space = 80;

let fingerBall;

​

let handPose;

let hands = [];

​

function preload() {

  handPose = ml5.handPose({ flipped: true });

}

​

function setup() {

  createCanvas(640, 480);

  // Create the video and hide it

  video = createCapture(VIDEO, { flipped: true });

  video.size(640, 480);

  video.hide();

​

  handPose.detectStart(video, gotHands);

​

  ellipseMode(CENTER);

​

  for (let x = 0; x <= width; x += space) {

    for (let y = 0; y <= height; y += space) {

      ball = new Ball(x, y, random(ballRadius));

      balls.push(ball);

    }

  }

}

​

function draw() {

  background(0, 0, 50);

​

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

​

  // Draw all the tracked hand points

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

    let hand = hands[i];

    for (let j = 0; j < hand.keypoints.length; j++) {

      let keypoint = hand.keypoints[8];

      fill(0, 255, 0);

      fingerBall = new Ball(keypoint.x, keypoint.y, ballRadius);

      fingerBall.show();

    }

  }

​

  for (let b of balls) {

    b.show();

​

    if (b.checkDist(fingerBall)) {

      stroke(255, 100, 100);

      let strokeDist = dist(b.x, b.y, fingerBall.x, fingerBall.y);

      let strokeThick = map(strokeDist, 0, 150, 4, 1);

      strokeWeight(strokeThick);

      line(b.x, b.y, fingerBall.x, fingerBall.y);

    }

  }

}

​

// Callback function for when handPose outputs data

function gotHands(results) {

  // Save the output to the hands variable

  hands = results;

}

​