let thumbTip;

let indexTip;

let middleTip;

let ringTip;

let pinkyTip;

​

// thumbTip = (36,273)

// indexTip = (126,80)

// middleTip = (205,44)

// ringTip = (275,95)

// pinkyTip = (335,178)

​

// let locations = {

//   thumbCoords: [36, 273],

//   indexCoords: [126, 80],

//   middleCoords: [205, 44],

//   ringCoords: [275, 95],

//   pinkyCoords: [335, 178],

// };

let locations = [

  [36, 273],

  [126, 80],

  [205, 44],

  [275, 95],

  [335, 178],

];

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

let keyPointObjs = [];

let resultPoints = {

  thumbTip: "result[0].thumb",

  indexTip: "result[0].index_finger",

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

};

​

function preload() {

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

  //frameRate(10);

}

​

function setup() {

  canvas = createCanvas(800, 600);

  //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

  keyPointObjs.push(

    new keyPointObj(36, 273, "thumbTip", false, false, "red", 8)

  );

  keyPointObjs.push(

    new keyPointObj(126, 80, "indexTip", false, false, "orange", 8)

  );

  keyPointObjs.push(

    new keyPointObj(205, 44, "middleTip", false, false, "yellow", 8)

  );

  keyPointObjs.push(

    new keyPointObj(275, 95, "ringTip", false, false, "green", 8)

  );

  keyPointObjs.push(

    new keyPointObj(335, 178, "pinkyTip", false, false, "blue", 8)

  );

}

​

function draw() {

  background(220);

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

  drawEmptyPoints();

  noStroke();

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

    keyPointObjs[i].drawCircle();

  }

  mouseOver();

}

​

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

    this.id = id;

    this.selected = selected;

    this.hovered = hovered;

    this.color = color;

    this.x = x;

    this.y = y;

    this.r = r;

  }

​

  drawCircle() {

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

      fill(this.color);

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

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

    }

  }

  hovering(px, py) {

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

    if (d < this.r) {

      this.hovered = true;

      //console.log("hovering");

      getMouseCoords(resultPoints.thumbTip);

    } else {

      this.hovered = false;

    }

    this.drawCircle();

  }

}

​

//utility functions below

function getMouseCoords(keyPointSelector) {

  //code for finding coords

  fill(255, 60, 100);

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

  fill("cyan");

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

  textSize(15)

  fill("black");

  text(keyPointSelector, mouseX + 30, mouseY - 30);

  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], 30, 30);

  }

}

​