let thumbTipObj

let indexTipObj

let middleTipObj

let ringTipObj

let pinkyTipObj

​

// 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 more and change stuff

                   }

​

function preload() {

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

  frameRate(10)

}

​

​

function setup() {

  canvas = createCanvas(800, 600);

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

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

}

​

function draw() {

  background(220);

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

  drawPoints()

  noStroke()

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

    keyPointObjs[i].isSelected()

  }

  // fill(255, 60, 100);

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

  // stroke(0);

}

​

function drawPoints(){

  // fill("red")

  // ellipse(37,274, 14, 14)

  // fill("orange")

  // ellipse(126,80,13,13)

}

​

function mousePressed(){

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

    keyPointObjs[i].clicked(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)

    }

  }

  clicked(px, py){

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

    if (d<this.r){

      this.selected = !this.selected

      this.isSelected()

      console.log("success")

    }

  }

}

​