xxxxxxxxxx
92
let handPose;
let myVideo;
let myResults;
// Divide the canvas into columns.
// Make each column turn red when you hover over it.
let columnWidth;
let rectRadius = 100
let colors = ["#11826e", "#edd92a", "#e957b2","#3161a3", "#f7583a","#95c531", "#5b37cb", "#f8943e", "#a247be"]
function setup() {
createCanvas(800, 800);
columnWidth = width / 4;
canvasHeight = height / 2;
myVideo = createCapture(VIDEO);
myVideo.size(width, height);
myVideo.hide();
handPose = ml5.handpose();
handPose.detectStart(myVideo, gotResults);
}
function gotResults(results) {
console.log(results);
myResults = results;
}
function draw() {
background(240);
noStroke();
if (myResults) {
playSounds();
}
}
function playSounds(){
const rightHand = myResults[1];
if (!leftHand && !rightHand) {
return;
}
const rightIndexTip = rightHand.index_finger_tip;
xPos = rightIndexTip.x
yPos = rightIndexTip.y
if (xPos < columnWidth * 1 && yPos < canvasHeight*1) {
fill(colors[0])
rect(columnWidth * 0, 0, columnWidth, height/2, rectRadius);
} else if (xPos < columnWidth * 1 && yPos < canvasHeight*2) {
fill(colors[1])
rect(columnWidth * 0, height/2, columnWidth, height/2, rectRadius);
// col 2
} else if (xPos < columnWidth * 2 && yPos < canvasHeight*1) {
fill(colors[2]);
rect(columnWidth * 1, 0, columnWidth, height/2, rectRadius);
} else if (xPos < columnWidth * 2 && yPos < canvasHeight*2) {
fill(colors[3])
rect(columnWidth * 1, height/2, columnWidth, height/2, rectRadius);
// col 3
}else if (xPos < columnWidth * 3 && yPos < canvasHeight*1) {
fill(colors[4])
rect(columnWidth * 2, 0, columnWidth, height/2, rectRadius);
} else if (xPos < columnWidth * 3 && yPos < canvasHeight*2) {
fill(colors[5])
rect(columnWidth * 2, height/2, columnWidth, height/2, rectRadius);
// col 4
}else if (xPos < columnWidth * 4 && yPos < canvasHeight *1) {
fill(colors[6])
rect(columnWidth * 3, 0, columnWidth, height/2, rectRadius);
}else if (xPos < columnWidth * 4 && yPos < canvasHeight*2) {
fill(colors[7])
rect(columnWidth * 3, height/2, columnWidth, height/2, rectRadius);
}
// col 5
else if (xPos < columnWidth * 5 && yPos < canvasHeight*1) {
fill(colors[8])
rect(columnWidth * 4, 0, columnWidth, height/2, rectRadius);
} else if (xPos < columnWidth * 5 && yPos < canvasHeight*2) {
fill(colors[8])
rect(columnWidth * 4, height/2, columnWidth, height/2, rectRadius);
}
}