My Sketch

let currentSampleState = 1;

​

let screen_width = 1600;

let screen_height = 900;

​

let universe_side = 800;

let box_side = 400;

​

​

let xUniv1 = screen_width/2 - 400 - universe_side/2;

let xUniv2 = xUniv1 + universe_side;

let yUniv1 = screen_height/2 - universe_side/2;

let yUniv2 = yUniv1 + universe_side;

​

let xBox1 = (xUniv2 - xUniv1)/2 - box_side/2;

let xBox2 = xBox1 + box_side;

let yBox1 = (yUniv2 - yUniv1)/2 - box_side/2;

let yBox2 = yBox1 + box_side;

​

let TP, TN, FP, FN;

let coordinates = [];

let states = [];

​

let sample_mode = 0;

​

TP = TN = FP = FN = 0;

​

function setup() {

    // createCanvas must be the first statement

    createCanvas(screen_width, screen_height);

    rectMode(CENTER);

    stroke(255); // Set line drawing color to white

    strokeWeight(1);

    frameRate(30);

}

​

​

function draw() {

  background(128);

  fill(0); // Set fill to gray

  strokeWeight(3);

  rect(xUniv1 + universe_side/2, screen_height/2, universe_side, universe_side);

  rect(xBox1 + box_side/2, yBox1 + box_side/2, box_side, box_side);

  strokeWeight(1);

  let precision = TP / (TP + FP);

  let recall = TP / (TP + FN);

  let accuracy = (TP + TN) / (TP + TN + FP + FN);

  let ROC = (TP / (TP + FN)) / (TN / (TN + FP));

  // if (isNaN(precision) || precision == 0)

  //  precision = 1e-5;

  // if (isNaN(recall) || recall == 0)

  //  recall = 1e-5;

  // if (isNaN(accuracy) || acc)

  //  accuracy = 1e-5;

  // if (isNaN(ROC))

  //  ROC = 1e-5;

  drawPoints(coordinates);

  drawMetric("Precision", precision, 950, 200);

  drawMetric("Recall", recall, 1200, 200);

  drawMetric("F1", 2/(1/precision + 1/recall), 1450, 200);

  drawMetric("Accuracy", accuracy, 950, 600);

  drawMetric("ROC", ROC, 1200, 600);

  if (sample_mode == 1) {

  if ((mouseX >= xUniv1 && mouseX <= xUniv2) && (mouseY >= yUniv1 && mouseY <= yUniv2))

    {

      coordinates.push([mouseX, mouseY]);

      states.push(currentSampleState);

      determinePoint(mouseX, mouseY, currentSampleState);

    }

  }

  textSize(25);

  fill(255, 0, 255);

  stroke(255, 0, 255);

  text("Samples that I have seen", 210, 100);

  text("Samples which I think are positive", 210, 250);

  stroke(255);

  fill(0);

}

​

function drawMetric(name, amount, x, y) {

  if (isNaN(amount) || amount == 0)

    amount = 1e-5;

​

  textSize(32);

  fill(255);

  stroke(0);

  text(name, x-7*name.length, y-120);

  text(round(1000*amount)/1000, x-30, y+150);

  fill(0);

​

  stroke(0);

​

  strokeWeight(3);

  fill(170, 0, 0)

  ellipse(x, y, 200, 200);

  fill(0, 170, 0);

  arc(x, y, 200, 200, 3*PI/2, 3*PI/2 + amount*2*PI, PIE);

  strokeWeight(1);

  stroke(255);

  fill(0);

}

​

function mousePressed() {

  sample_mode = 1;

}

​

function mouseReleased() {

  sample_mode = 0;

}

​

function drawPoints(points) {

  if (points.length > 0) {

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

    if (states[i] == 0)

      fill(255, 0, 0);

    else

      fill(0, 255, 0);

​

    ellipse(points[i][0], points[i][1], 10, 10);

    }

  }

}

​

function determinePoint(x, y, currentState) {

  if ((x >= xBox1) && (x <= xBox2) && (y >= yBox1) && (y <= yBox2)) {

    if (currentState == 0)

      FP += 1;

    else

      TP += 1;

  }

  else {

    if (currentState == 0)

      TN += 1;

    else

      FN += 1;

  }

}

​

function keyPressed() {

  if (keyCode == 32)

  {

    currentSampleState = 1 - currentSampleState;

  }

  if (keyCode == 13) {

    currentSampleState = 1;

    TP = TN = FP = FN = 0;

    currentState = 0;

    coordinates = [];

    states = [];

  }

}