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)

}

​

​

​

​

​

​

​