xxxxxxxxxx
255
//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;
var Engine = Matter.Engine,
//Render=Matter.Render,
World = Matter.World,
Bodies = Matter.Bodies;
//variables.
var engine;
var minBox;
var world;
var ground;
var shapes = [];
var boundaries = [];
var index = 0;
var change = false;
var lastChange = false;
var bc = ["#f5fcc1", "#ffbcbc", "#fcf7bb", "#ffe2ff", "#dee3e2", "#faf4ff"];
var lc = ["#f3d1f4", "#4cd3c2", "#cbe2b0", "#7f78d2", "#de7119", "#f3c623"];
//------------------------------------------
function setup() {
createCanvas(displayWidth, displayHeight);
// Optionally, create a webcam object. It's just for show.
webcam = createCapture(VIDEO);
webcam.size(displayWidth, displayHeight);
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: 4,
// // Minimum confidence [0 - 1] for a hand to be considered detected
// minDetectionConfidence: 0.5,
// // Minimum confidence [0 - 1] for the landmark tracker to be considered detected
// // Higher values are more robust at the expense of higher latency
// minTrackingConfidence: 0.5,
// });
handsfree = new Handsfree({
showDebug: false,
hands: true,
maxNumHands: 2,
});
handsfree.start();
handsfree.start();
//boxes
// create an engine
engine = Engine.create();
engine.timing.timeScale = 0.1;
world = engine.world;
// run the engine
Engine.run(engine);
//walls
boundaries.push(
new Boundary(displayWidth / 2, displayHeight - 30, displayWidth, 30)
);
}
//------------------------------------------
function draw() {
background(255);
noStroke();
Engine.update(engine); //update 3d engine
drawVideoBackground();
drawHandPoints();
debug()
//show the shapes
for (let i = shapes.length - 1; i >= 0; i--) {
//for (var i = 0; i < shapes.length; i++) {
shapes[i].show();
}
for (var j = 0; j < boundaries.length; j++) {
boundaries[j].show();
}
//console.log(shapes.length);
if (shapes.length >= 355) {
//if more than 15 shapes
removeAll();
shapes.splice(0, shapes.length); //remove shape from array
}
}
//------------------------------------------
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) {
console.log(handsfree.data.hands)
if (handsfree.data.hands.multiHandLandmarks) {
var handLandmarks = handsfree.data.hands.multiHandLandmarks;
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
console.log(nHands)
for (var h = 0; h < nHands; h++) {
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();
*/
// Draw just the points of the hands
push();
fill("red");
circle(px, py, 10);
pop();
lastPx = px;
lastPy = py;
shapes.push(new Shape(px, py, random(10, 20)));
switch (h) {
case 0:
index = 0;
break;
case 1:
index = 1;
break;
case 2:
index = 2;
break;
case 3:
index = 3;
break;
case 4:
index = 4;
break;
}
}
}
}
}
function debug(){
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 lines connecting the parts of the fingers
noFill();
stroke('rgb(124,255,71)');
strokeWeight(2)
for (var h = 0; h < nHands; h++) {
for (var f=0; f<handVertexIndices.length; f++){ // finger
beginShape();
for (var j=0; j<handVertexIndices[f].length; j++){
var ji = handVertexIndices[f][j];
var jx = handLandmarks[h][ji].x;
var jy = handLandmarks[h][ji].y;
jx = map(jx, 0, 1, width, 0);
jy = map(jy, 0, 1, 0, height);
vertex(jx, jy);
}
endShape();
}
}
// Draw just the points of the hands
stroke('black');
fill('red');
for (var h = 0; h < nHands; h++) {
for (var i = 0; i <= 20; i++) {
var px = handLandmarks[h][i].x;
var py = handLandmarks[h][i].y;
px = map(px, 0, 1, width, 0);
py = map(py, 0, 1, 0, height);
circle(px, py, 9);
}
}
}
}
}
function removeAll() {
//print('removeMatter');
World.clear(world);
// //re-add walls
new Boundary(displayWidth / 2, displayHeight - 30, displayWidth, 30)
}
function mousePressed() {
fullscreen(true);
}