0
279
Vistas¿Cómo puedo numerar una lista de puntos en p5.js?
¿Es posible numerar una lista de puntos en p5.js? En este momento estoy usando ml5.pj para las detecciones de mallas faciales, que generan coordenadas x e y para un conjunto de 465 puntos. Quiero seleccionar algunos. Para hacer eso, necesito saber cuáles son los índices correspondientes. ¿Alguna forma posible de hacer esto?
No es relevante, pero en Grasshopper 3D, es un componente llamado "lista de puntos"
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); } } }1 Respuestas
Responde la pregunta0
De acuerdo, si te entiendo correctamente, quieres agregar etiquetas a cada punto. Puede volverse sofisticado con esto y mantenerlo en el aire rastreando las coordenadas del cursor y usándolas como una clave para acceder a un valor de objeto. Sin embargo, dado que dices que no eres muy completo en programación, voy a mantener esto muy simple aquí...
Solo vamos a agregar texto donde está el punto y lo compensaremos verticalmente en 5px. Puede leer más sobre el texto aquí en la documentación de p5.js: https://p5js.org/reference/#/p5/text
Aquí hay un enlace sobre literales de plantilla en 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 } } }Avanzado: Mostrar el texto al pasar el mouse.
- Cree un Objeto para mostrar los valores basados en xy:ij key:vals
- Detectar coordenadas X, Y del mouse
- Mostrar al pasar el mouse
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); } } }No he probado lo anterior, pero sabe que debería ser el enfoque correcto usar un objeto y establecer las coordenadas como valores clave y luego poder hacer una coincidencia real en eso para mostrar los valores ij. Busque objetos en javascript.