xxxxxxxxxx
131
let handPose;
let myVideo;
let myResults;
let myParticles;
let columnWidth;
let rectRadius = 100
let colors = ["#11826e", "#edd92a", "#e957b2","#3161a3", "#f7583a","#95c531", "#5b37cb", "#f8943e", "#a247be"]
const options = {
flipHorizontal: true
}
function preload(){
pop1 = createAudio("sounds/pop1.wav")
pop3 = createAudio("sounds/pop2.wav")
pop4 = createAudio("sounds/pop3.wav")
boink = createAudio("sounds/boink.wav")
click1 = createAudio("sounds/click1.wav")
click2 = createAudio("sounds/click2.mp3")
drop = createAudio("sounds/drop.wav")
plop = createAudio("sounds/plop.wav")
// popSound = createAudio("toggle_sounds/pop.mp3");
// clickSound = createAudio("toggle_sounds/click.mp3");
// cursor = loadImage("cursors/cursor1.png");
}
function setup() {
createCanvas(800, 800);
columnWidth = width / 4;
canvasHeight = height / 2;
myVideo = createCapture(VIDEO);
myVideo.size(width, height);
myVideo.hide();
handPose = ml5.handpose(options);
handPose.detectStart(myVideo, gotResults);
}
function gotResults(results) {
// console.log(results);
myResults = results;
}
function draw() {
//image(myVideo, 0, 0, width, height);
background(240);
noStroke();
if (myResults) {
playSounds();
}
}
function playSounds() {
const leftHand = myResults[0];
const rightHand = myResults[1];
if (!leftHand && !rightHand) {
return;
}
playIt(leftHand);
playIt(rightHand);
}
function playIt(hand){
if (!hand) return;
const index = hand.index_finger_tip;
xPos = index.x
yPos = index.y
if (xPos < columnWidth * 1 && yPos < canvasHeight*1) {
fill(colors[0])
pop1.play()
console.log(xPos)
rect(columnWidth * 0, 0, columnWidth, height/2, rectRadius);
} else if (xPos < columnWidth * 1 && yPos < canvasHeight*2) {
fill(colors[1])
pop3.play()
rect(columnWidth * 0, height/2, columnWidth, height/2, rectRadius);
// col 2
} else if (xPos < columnWidth * 2 && yPos < canvasHeight*1) {
fill(colors[2]);
pop4.play()
rect(columnWidth * 1, 0, columnWidth, height/2, rectRadius);
} else if (xPos < columnWidth * 2 && yPos < canvasHeight*2) {
fill(colors[3])
boink.play()
rect(columnWidth * 1, height/2, columnWidth, height/2, rectRadius);
// col 3
}else if (xPos < columnWidth * 3 && yPos < canvasHeight*1) {
fill(colors[4])
plop.play()
rect(columnWidth * 2, 0, columnWidth, height/2, rectRadius);
} else if (xPos < columnWidth * 3 && yPos < canvasHeight*2) {
fill(colors[5])
click1.play()
rect(columnWidth * 2, height/2, columnWidth, height/2, rectRadius);
// col 4
}else if (xPos < columnWidth * 4 && yPos < canvasHeight *1) {
fill(colors[6])
click2.play()
rect(columnWidth * 3, 0, columnWidth, height/2, rectRadius);
}else if (xPos < columnWidth * 4 && yPos < canvasHeight*2) {
fill(colors[7])
drop.play()
rect(columnWidth * 3, height/2, columnWidth, height/2, rectRadius);
}
fill("black")
ellipse(xPos, yPos, 20, 20)
}