1

是否可以对 p5.js 中的点列表进行编号？现在我正在使用 ml5.pj 进行面部网格检测，它输出一组 465 个点的 x 和 y 坐标。我想选几个。为此，我需要知道相应的索引是什么。有什么可能的方法吗？

不相关，但在 Grasshopper 3D 上，它是一个名为“点列表”的组件

在此处输入图像描述

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

1 回答 1

1

好的，如果我理解正确，您想为每个点添加标签。您可以通过跟踪光标坐标并将其用作访问对象 val 的键来使其变得复杂并使其悬停。然而，既然你说你在编程方面并不全面——我将在这里保持这个超级简单......

我们只是将文本添加到点所在的位置，并使其垂直偏移 5px。您可以在 p5.js 文档中阅读更多关于文本的信息：https ://p5js.org/reference/#/p5/text

这是 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
    }
  }
}

高级：在悬停时显示文本。

  1. 创建一个对象以显示基于 xy:ij key:vals 的值
  2. 检测鼠标 X、Y 坐标
  3. 悬停时显示

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

我还没有测试过上述内容，但您知道应该是使用对象并将坐标设置为关键值的正确方法，然后能够对其进行真实匹配以显示 ij 值。在 javascript 中查看对象。

于 2022-02-21T05:36:33.847 回答