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);

  } 

​

}

​