xxxxxxxxxx
195
let handsfree;
let showPoints = false;
let img;
function setup() {
createCanvas(625, 370);
img = loadImage('BackGround.png')
angleMode(DEGREES)
handsfree = new Handsfree({
showDebug: true,
hands: true,
maxNumHands: 1 //Number of hands that can be used
})
handsfree.start();
}
function draw() {
//Draw background here===========
background(200);
image(img, 0, 0)
drawHand();
}
function mouseClicked() {
showPoints = !showPoints;
}
function drawHand() {
if (handsfree.data.hands) {
if (handsfree.data.hands.multiHandLandmarks) {
var landmarks = handsfree.data.hands.multiHandLandmarks;
var nHands = landmarks.length;
if (nHands > 0) {
var hand = landmarks[0];
var rescaledHand = rescaleHand(hand);
drawCreature(rescaledHand, "#b6c1ab");
}
if (showPoints) {
drawDebugPoints(landmarks);
}
}
}
fill("black");
//text("Click to show the debugging points :-)", 20, 30);
}
function drawCreature(hand, critterColor) {
//Setup Colors
fill(critterColor);
strokeWeight(10);
stroke(critterColor);
//Base of hand
var handBase = hand[0];
//Joints of INDEX finger
var baseOfIndex = hand[5];
var jointOfIndex = hand[6];
var endOfIndex = hand[8];
//Joints of PINKY finger
var baseOfPinky = hand[17];
var jointOfPinky = hand[18];
//var endOfPinky = hand[20];
//Joints of MIDDLE finger
var baseOfMiddle = hand[9];
var jointOfMiddle = hand[10];
//var endOfMiddle = hand[12];
//Joints of THUMB
var baseOfThumb = hand[2];
var jointOfThumb = hand[3];
var endOfThumb = hand[4];
//Joints of RING finger
var baseOfRing = hand[13];
var jointOfRing = hand[14];
//var endOfRing = hand[16];
//Calculates a HEIGHT for the body based on the points in the hand
var bodyHeight = baseOfPinky.y - handBase.y;
//Calculates a WIDTH for the body based on the points in the hand
var bodyWidth = baseOfThumb.x - baseOfPinky.x;
//===BODY
fill(critterColor)
noStroke()
rectMode(CENTER)
rect(jointOfMiddle.x +10, jointOfMiddle.y +50, 100, 200, 0,40, 0,40)
//===LIPS
fill("#954830")
noStroke()
//rect(endOfThumb.x -5, endOfThumb.y, 35, 35, 20,20, 0,20)
//rect(endOfIndex.x -15, endOfIndex.y, 35, 35, 20,20, 0,20)
arc(endOfThumb.x, endOfThumb.y, 60, 60, 180,360);
arc(endOfIndex.x -8, endOfIndex.y, 60, 60, 0,180);
//===FEET
fill("#6c6b3d") //Dark gray
noStroke()
rect(jointOfPinky.x -50, jointOfPinky.y +65, 60,30, 20,20,20,20)
//===HEAD
fill("#d3b38c")
noStroke()
ellipse(jointOfIndex.x +20, jointOfIndex.y +10, 130, 120)
//===BACK FINS
fill("#6c6b3d")
noStroke()
rectMode(CENTER)
rect(baseOfMiddle.x -30,baseOfMiddle.y -30, 80,80, 0,50, 0,50);
//===EYES
fill("#e3dec8");
noStroke()
ellipse(jointOfIndex.x -20, jointOfIndex.y, 35, 40)
fill("#404040")
noStroke()
ellipse(jointOfIndex.x -24, jointOfIndex.y, 25, 25)
//===PUPIL
fill("#e3dec8")
ellipse(jointOfIndex.x -20, jointOfIndex.y -5, 5, 5)
//===BLUSH
fill("#b4948c")
noStroke()
ellipse(jointOfIndex.x -15, jointOfIndex.y +33, 30, 12)
//===WING
fill("#6c6b3d")
noStroke()
rect(jointOfMiddle.x, jointOfMiddle.y +40, 30,30, 0,30, 30,30)
}
//Debugging points
function drawDebugPoints(landmarks) {
var nHands = landmarks.length;
fill("black");
noStroke();
for (var h = 0; h < nHands; h++) {
for (var i = 0; i <= 20; i++) {
var px = landmarks[h][i].x;
var py = landmarks[h][i].y;
px = map(px, 0, 1, width, 0);
py = map(py, 0, 1, 0, height);
text(i, px + 5, py);
circle(px, py, 10);
}
}
}
//YOU DONT NEED TO KNOW HOW THIS WORKS
function rescaleHand(hand) {
return hand.map(
function(point) {
return {
x: map(point.x, 0, 1, width, 0),
y: map(point.y, 0, 1, 0, height)
}
});
}