xxxxxxxxxx
107
//demo forked from golan levin
//https://editor.p5js.org/golan/sketches/0Sho5V1KY
// p5.js + handsfree.js (by Oz Ramos)
// Documentation: https://handsfree.js.org/
// https://unpkg.com/handsfree@8.5.1/build/lib/handsfree.js
// Note: this downloads large models the first time it's run.
let handsfree; // The handsfree.js tracker
let webcam; // A webcam video (for display only)
let lastPx = 0;
let lastPy = 0;
//------------------------------------------
function setup() {
createCanvas(640, 480);
// Optionally, create a webcam object. It's just for show.
webcam = createCapture(VIDEO);
webcam.size(640, 480);
webcam.hide();
// Configure handsfree.js to track hands, body, and/or face.
handsfree = new Handsfree({
showDebug: false /* shows or hides the camera */,
hands: true /* acquire hand data? */,
pose: false /* acquire body data? */,
facemesh: false /* acquire face data? */,
maxNumHands: 2,
});
handsfree.start();
}
//------------------------------------------
function draw() {
background(255);
// drawVideoBackground();
drawHandPoints();
noStroke();
fill("black");
text("FPS: " + int(frameRate()), 10, 20);
}
//------------------------------------------
function drawVideoBackground() {
push();
translate(width, 0);
scale(-1, 1);
tint(255, 172);
image(webcam, 0, 0, width, height);
tint(255);
pop();
}
//------------------------------------------
// HANDS: 21 2D landmarks per hand, up to 4 hands at once
// Detects pinching states, hand pointers, and gestures
function drawHandPoints() {
if (handsfree.data.hands) {
if (handsfree.data.hands.multiHandLandmarks) {
var handLandmarks = handsfree.data.hands.multiHandLandmarks;
var nHands = handLandmarks.length;
var handVertexIndices = [
[17, 0, 1, 5, 9, 13, 17] /* palm */,
[1, 2, 3, 4] /* thumb */,
[5, 6, 7, 8] /* index */,
[9, 10, 11, 12] /* middle */,
[13, 14, 15, 16] /* ring */,
[17, 18, 19, 20] /* pinky */,
];
// Draw just the points of the hands
for (var h = 0; h < nHands; h++) {
//if want more points to show
// for (var i = 0; i <= 21; i++) {
var px = handLandmarks[h][21].x;
var py = handLandmarks[h][21].y;
//join up hands
var px2 = lastPx;
var py2 = lastPy;
px = map(px, 0, 1, width, 0);
py = map(py, 0, 1, 0, height);
push();
stroke(255);
strokeWeight(3);
line(px, py, px2, py2);
pop();
push();
noStroke()
fill("#C04ABC");
circle(px, py, 55);
pop();
lastPx = px;
lastPy = py;
}
}
}
}