How can I number a point list in p5.js

Question

is it possible to number a list of points in p5.js? Right now I am using ml5.pj for face mesh detections, which outputs x and y coordinates for a set of 465 points. I want to select a few. In order to do that, I need to know what are the corresponding indexes. Any possible way to do this?

Not relevant, but on Grasshopper 3D, it is a component called "point list"

let facemesh;
let video;
let predictions = [];

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.size(width, height);

  facemesh = ml5.facemesh(video, modelReady);

  // This sets up an event that fills the global variable "predictions"
  // with an array every time new predictions are made
  facemesh.on("predict", results => {
    predictions = results;
  });

  // Hide the video element, and just show the canvas
  video.hide();
}

function modelReady() {
  console.log("Model ready!");
}

function draw() {
//   image(video, 0, 0, width, height);
background(255);

  // We can call both functions to draw all keypoints
  drawKeypoints();
}

// A function to draw ellipses over the detected keypoints
function drawKeypoints() {
  for (let i = 0; i < predictions.length; i += 1) {
    const keypoints = predictions[i].scaledMesh;

    // Draw facial keypoints.
    for (let j = 0; j < keypoints.length; j += 1) {
      const [x, y] = keypoints[j];
    
      fill(0, 255, 0);
      ellipse(x, y, 3, 3);
    }
  }
}

Answer 1

Okay, if I understand you correctly you want to add labeling to each point. You could get sophisticated with this and have it on hover via tracking the cursor coordinates and using those as a key to access an object val. However, since you say you are not well rounded in programming -- I'm going to keep this super simple here...

We are just going to add text to where the point is and have it offset vertically by 5px. You can read more about text here in the p5.js documentation: https://p5js.org/reference/#/p5/text

Here's a link on template literals in js: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

// A function to draw ellipses over the detected keypoints
function drawKeypoints() {
  for (let i = 0; i < predictions.length; i += 1) {
    const keypoints = predictions[i].scaledMesh;

    // Draw facial keypoints.
    for (let j = 0; j < keypoints.length; j += 1) {
      const [x, y] = keypoints[j];
    
      fill(0, 255, 0);
      ellipse(x, y, 3, 3);
      text(`${i}-${j}`, x, y+5); // Draw Text with Index Labelling
    }
  }
}

Advanced: Showing the text on hover.

1. Create an Object to show the values based on x-y:i-j key:vals
2. Detect Mouse X, Y Coordinates
3. Display on Hover

const hoverCoords = {}

function draw() {
  background(255);
  drawKeypoints();
  hoverCoords[`${mouseX}-${mouseY}`] && text(hoverCoords[`${mouseX}-${mouseY}`], x, y+5)
}

// A function to draw ellipses over the detected keypoints
function drawKeypoints() {
  for (let i = 0; i < predictions.length; i += 1) {
    const keypoints = predictions[i].scaledMesh;

    // Draw facial keypoints.
    for (let j = 0; j < keypoints.length; j += 1) {
      const [x, y] = keypoints[j];
      hoverCoords[`${x}-${y}`] = `${i}-${j}` // Create object key val
    
      fill(0, 255, 0);
      ellipse(x, y, 3, 3);
    }
  }
}

I haven't tested the above but you know should be the right approach using an object and setting coordinates as key vals and then being able to do a truthy match on that to display the i-j vals. Look into objects in javascript.