let handpose;

let video;

​

let thumbX = 0;

let thumbY = 0;

​

function modelLoaded() {

  console.log("handpose ready");

}

​

function preload() {

  bg1 = loadImage("images/hogwarts wallpaper.jpeg");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  video = createCapture(VIDEO);

  video.size(320, 240);

  video.hide();

  handpose = ml5.handpose(video, modelLoaded);

  handpose.on("predict", gotPose);

}

​

function gotPose(results) {

  if (results.length > 0) {

    thumbX = 0.5 * results[0].annotations.thumb[3][0];

    thumbY = 0.5 * results[0].annotations.thumb[3][1];

  }

}

​

function draw() {

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

  translate(width / 2 + video.width / 2, height / 2 - video.height / 2);

  push();

  scale(-1, 1);

  image(video, 0, 0);

  circle(thumbX, thumbY, 24);

  pop();

}

​