let modelHand;

let thumbTip;

let indexTip;

let middleTip;

let ringTip;

let pinkyTip;

let locations = [

  [36, 323],

  [126, 130],

  [205, 94],

  [275, 145],

  [336, 228],

]; // stores keypoint coordinates

// let pointColors = ["red", "orange", "pink", "green", "blue"];

let ml5Color = "#a256ff"

let pointColors = [ml5Color, ml5Color, ml5Color, ml5Color, ml5Color];

let keyPointObjs = []; // stores 

​

​

​

// sketch functions

let resultPoints = { // TODO Change all places using this to instead use the selector attrib of the keyPointObj class

  thumbTip: "result[0].thumb_tip",

  indexTip: "result[0].index_finger_tip",

  middleTip: "result[0].middle_finger_tip",

  ringTip: "result[0].ring_finger_tip",

  pinkyTip: "result[0].pinky_finger_tip",

  // add in rest and get correct selectors for handpose sketches

};

​

function preload() {

  modelHand400 = loadImage("modelImages/modelHand400.png");

  modelHand2 = loadImage("modelImages/modelHand2.png");

  //frameRate(10);

}

​

function setup() {

  noStroke()

  canvas = createCanvas(900, 700);

  //console.log(locations.thumbCoords[0])

  //image(modelHand, 0, 0, modelHand.width, modelHand.height);

​

  // create a 'keyPointObj' object for each finger and push to 'keyPointObjs' dictionary

  //translateSkeletonAndLocations()

  setLocations(21,0) // these vals should be roughly equal to the ones for translateSkeleton

  initiateKeypointObjs()

  //setButtonText()

}

​

function draw() {

  background("#f0f0f0");

  //fill("white")

  // rect(-5, 40, modelHand400.width + 15, modelHand400.height + 15, 20);

  // image(modelHand400, 0, 50, modelHand400.width, modelHand400.height);

  translateSkeleton(20,0)

  drawEmptyPoints();

  drawResultContainer()

  noStroke();

  createResultsString()

  textFont("Inconslata")

  for (let i = 0; i < keyPointObjs.length; i++) {

    keyPointObjs[i].drawCircle();

  }

  mouseOver();

  setAndDisplaySelected()

}

​

function mousePressed() {

  for (let i = 0; i < keyPointObjs.length; i++) {

    keyPointObjs[i].clicked(mouseX, mouseY);

  }

}

​

function mouseOver() {

  for (let i = 0; i < keyPointObjs.length; i++) {

    keyPointObjs[i].hovering(mouseX, mouseY);

  }

}

​

class keyPointObj {

  constructor(x, y, id, selected, hovered, color, r, selector) {

    this.id = id;

    this.selected = selected;

    this.hovered = hovered;

    this.color = color;

    this.x = x;

    this.y = y;

    this.r = r;

    this.selector = selector

  }

​

  drawCircle() {

    if (this.selected || this.hovered) {

      fill(this.color);

      ellipse(this.x, this.y, this.r * 2+1, this.r * 2+1);

    } else {

      // fill("white");

      // ellipse(this.x, this.y, this.r * 2, this.r * 2);

    }

  }

  // class function to control what happens when obj instance is clicked

  clicked(px, py) {

    let d = dist(px, py, this.x, this.y);

    if (d < this.r) {

      this.selected = !this.selected;

      this.drawCircle();

      console.log(resultPoints.thumbTip);

      setAndDisplaySelected()

    }

  }

  hovering(px, py) {

    let d = dist(px, py, this.x, this.y);

    if (d < this.r) {

      this.hovered = true;

      //console.log("hovering");

      hoverCoords(resultPoints[this.id]);

    } else {

      this.hovered = false;

    }

    this.drawCircle();

  }

}

​

function setAndDisplaySelected(){

  selectedString = "selected:\n"

  for(let i = 0; i<keyPointObjs.length;i++){

      if (keyPointObjs[i].selected){

        selectedString += `${keyPointObjs[i].id} = `

        selectedString += `${keyPointObjs[i].selector} \n`

        // selectedString += "\n"

        //console.log(keyPointObjs[i].selector)

      }

    }

    textSize(20)

    fill("black")

    text(selectedString, 500, 100)

  }

​

//utility functions below

function hoverCoords(keyPointSelector) { // change this name to be for making the interactive hover results

  //code for finding coords

  fill(255, 60, 100);

  //text("(" + mouseX + ", " + mouseY + ")", mouseX, mouseY);

  fill("#d4c8bb");

  rect(mouseX + 20, mouseY -60, 250, 60, 20)

  //ellipse(mouseX + 65, mouseY - 30, 120, 50);

  textSize(20)

  //fill("white");

  text(keyPointSelector, mouseX + 35, mouseY - 25);

  noStroke();

}

​

function drawEmptyPoints() {

  // instead of drawing a bunch of white ellipses in the else statement of the drawCircle function inside the keyPointsObj class, use this to return the diagram to have empty circles when unhovering

  for (let curr_point = 0; curr_point < locations.length; curr_point++) {

    fill(pointColors[curr_point]);

    //console.log(point);

    // console.log(locations[curr_point])

    // console.log(locations[curr_point][0])

    ellipse(locations[curr_point][0], locations[curr_point][1], 27, 27);

    //fill("white")

    drawDeselect()

  }

}

​

function drawDeselect(){

  for (let curr_point = 0; curr_point < locations.length; curr_point++) {

    fill("#f0f0f0")

    noStroke()

    ellipse(locations[curr_point][0], locations[curr_point][1], 20, 20);

  }

}

​

function initiateKeypointObjs(){

  keyPointObjs.push(

    new keyPointObj(locations[0][0], locations[0][1], "thumbTip", false, false, pointColors[0], 10, "result[0].thumb_tip")

  );

  keyPointObjs.push(

    new keyPointObj(locations[1][0], locations[1][1], "indexTip", false, false, pointColors[1], 10, "result[0].index_finger_tip")

  );

  keyPointObjs.push(

    new keyPointObj(locations[2][0], locations[2][1], "middleTip", false, false, pointColors[2], 10, "result[0].middle_finger_tip")

  );

  keyPointObjs.push(

    new keyPointObj(locations[3][0], locations[3][1], "ringTip", false, false, pointColors[3], 10, "result[0].ring_finger_tip")

  );

  keyPointObjs.push(

    new keyPointObj(locations[4][0], locations[4][1], "pinkyTip", false, false, pointColors[4], 10, "result[0].pinky_finger_tip")

  ); 

}

​

function drawResultContainer(){

  fill("white")

  rect(width/2, 40, modelHand400.width + 15, modelHand400.height + 15, 20);

}

​

function setButtonText(){

  button.innnerHTML="New Button Text using innerHTML";

}

​

function createResultsString(){

  let drawKeyPointsString = 

      "function drawKeyPoints(result) {\n" +

      "  let left_hand = result[0]\n" +

      "  let left_hand = result[1]\n"

  // let drawKeyPointsString = 

  //     "function drawKeyPoints(result) {\n"

  //     "  let left_hand = result[0]\n" +

  //     "  let left_hand = result[1]\n"

  // fill("black")

   text(drawKeyPointsString, 500, 500)

  }

​

function translateSkeleton(x, y){

  //rect(-5+x, 40+y, modelHand400.width + 15+x, modelHand400.height + 15 + y, 20);

  // image(modelHand400, 0+x, 50+y, modelHand400.width, modelHand400.height);

  image(modelHand2, 0+x, 50+y, modelHand2.width, modelHand2.height);

}

​

function setLocations(x,y){

  // for(let i=0; i<locations.length;i++){

  //   locations[i] = [locations[i[0]+x], locations[i[0]+y]]

  locations = [

  [38 + x, 310 + y],

  [126 + x, 130 + y],

  [205 + x, 94 + y],

  [275 + x, 145 + y],

  [336 + x, 228 + y],

];

}

​

function drawEmoji(hand) {

  if(!hand) return;

  const thumb = hand.thumb_tip;

  const index = hand.index_finger_tip;

  const middle = hand.middle_finger_tip;

  const ring = hand.ring_finger_tip;

  const pinky = hand.pinky_finger_tip;

  if (!myParticles){

    myParticles = new ParticleSystem(createVector(index.x, index.y));

  }else{

    myParticles.origin = createVector(index.x, index.y)

    myParticles.addParticle();

    myParticles.run()

  }

}