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

  //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, "red", 8));

  keyPointObjs.push(new keyPointObj(126, 80, "indexTip", false, "orange", 8));

  keyPointObjs.push(new keyPointObj(205, 44, "middleTip", false, "yellow", 8));

  keyPointObjs.push(new keyPointObj(275, 95, "ringTip", false, "green", 8));

  keyPointObjs.push(new keyPointObj(335, 178, "pinkyTip", false, "blue", 8));

}

​

function draw() {

  background(220);

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

  noStroke();

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

    keyPointObjs[i].isSelected();

  }

  //getMouseCoords()

}

​

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, color, r) {

    this.id = id;

    this.selected = selected;

    this.color = color;

    this.x = x;

    this.y = y;

    this.r = r;

  }

​

  isSelected() {

    if (this.selected) {

      fill(this.color);

      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.isSelected();

      console.log(resultPoints.thumbTip);

    }

  }

  hovering(px, py) {

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

    if (d < this.r) {

      // this.selected = !this.selected;

      // this.isSelected();

      console.log("hovering",resultPoints.thumbTip);

    }

  }

}

​

//utility functions below

function getMouseCoords() {

  //code for finding coords

  fill(255, 60, 100);

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

  stroke(0);

}

​