Pinch to Zoom with Handpose

​

This example uses Handpose to let you zoom in on your webcam image by pinching your thumb and index finger. 

​

Built with Handpose model from ml5js and p5js

​

Created by Tom-Lucas Säger 2021

​

*/

​

let video;

let handpose;

let predictions = [];

let instruction = "Waiting for model";

let oldDistance = 0;

​

//Setup the canvas and initiate the webcam and Handpose

function setup() {

  createCanvas(640, 480);

  video = createCapture(VIDEO);

  handpose = ml5.handpose(video, modelReady);

  handpose.on('predict', gotResults);

  video.hide();

  textSize(32);

  textAlign(CENTER);

}

// Draw the background, the static webcam image and the instructions we give the user 

// Trigger the function distanceFinger, which will scale our image, depending on the distance of our thumb and index finger 

function draw() {

  background(255);

  text(instruction, width / 2, height / 2);

  distanceFinger();

}

// Once the model is ready, we tell the users, that they should raise their hand

function modelReady() {

  console.log("Model ready!");

  instruction = "Bring your hand into view";

}

// If we get the results we save them in our variable predictions

function gotResults(results) {

  predictions = results;

}

// First we check if the results are in 

function distanceFinger() {

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

    const prediction = predictions[i];

    // We put the 4th point, the tip, from the index finger and thumb in a variable 

    let indextip = prediction.annotations.indexFinger[3];

    let thumbtip = prediction.annotations.thumb[3]

    // We calculate the distance between the two points 

    let distance = dist(indextip[0], indextip[1], thumbtip[0], thumbtip[1]);

    // We adjust the values so they fit between 0.1 and 4, which we then can use for the scale

    distance = map(distance, 0, 200, 0.1, 4);

    //We translate the image to be in the center of our canvas 

    translate(width / 2, height / 2);

    imageMode(CENTER);

    //To prevent jumping of the scale we use lerp, which interpolates between the current and the previous value

    let lerpedistance = lerp(distance, oldDistance, 0.5);

    scale(lerpedistance);

    //We draw the scaled webcam image and set the current scale value to be the old value for the next round

    background(255);

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

    oldDistance = distance;

  }

}