如何移动一组 posenet 点？

Question

我是使用 p5.js 的初学者，但我目前正在尝试创建这样的画笔素描 ellipse brush

虽然使用计算机视觉和 posenet 鼻子跟踪（本质上是鼻刷）

问题是，虽然它没有指出任何错误，但它不起作用。

这是我的椭圆笔刷代码，没有 posenet 和相机视觉

let mousePosition = [];

function setup() { 
  createCanvas(400, 400);
} 

function draw() { 
  background(0);
  
//Every frame of animation
  //storing the mouse position in an array
  mousePosition.push({x: mouseX, y: mouseY});
  
  //shift the array so that the older ones deletes itself
  if(mousePosition.length > 100) mousePosition.shift();
  //loop
  for(let i = 0; i < mousePosition.length; i++) {
    //if the variable is less than 50, loop function
    let x = mousePosition[i].x;
    let y = mousePosition[i].y;
    ellipse(x, y, r,r);
    var r = 20
  }
}

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

这是一款具有计算机视觉和鼻子跟踪功能的 posenet

let capture;
let poseNet;
let pose;
let text;
let pg;
let nosePosition = []


function setup() {
  createCanvas(700, 700);
  capture = createCapture(VIDEO);
  capture.hide();

  pg = createGraphics(width, height);

  poseNet = ml5.poseNet(capture, modelLoaded);
  poseNet.on('pose', gotPoses);
  // background(255)

  // color picker
}

function gotPoses(poses) {

  //console.log(poses);
  if (poses.length > 0) {
  pose = poses[0].pose;
  }
}

function modelLoaded() {
  console.log('poseNet.ready');
}

function draw() {

  translate(width, 0); // move to far corner
  scale(-1.0, 1.0); // flip x-axis backwards
  image(capture, 0, 0, width, width * capture.height /
  capture.width);
  image(pg, 0, 0, width, height);

  if (pose) {
nosePosition.push({x:pose.nose.x ,y: pose.nose.y});
    
 if(nosePosition.length > 100) nosePosition.shift(); {
}
    for(let i = 0; i < nosePosition.length; i++) {
    //if the variable is less than 50, loop function
    let x = nosePosition[i].x;
    let y = nosePosition[i].y;
    pg.ellipse(x, y, i/5,i/5);
      
    var r = 20 //how big the ellipse is
    pg.fill(255)
    

    pg.noStroke();


  }
}
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"></script>
    <script src="https://unpkg.com/ml5@latest/dist/ml5.min.js" type="text/javascript"></script>
    
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <script src="sketch.js"></script>
  </body>
</html>

第二个本质上与第一个非常相似，因为我只是将 mouseX/Ys 更改为 posenet Nose 关键点。

任何 insight/solution 将不胜感激！

谢谢:)

Answer 1

您移动正确，但您忘记清除 pg 图形，这有点像忘记将 background(0) 放入原始草图中。因此，您不是在空白背景上绘制所有椭圆，而是在 上一帧 上绘制它们。

在 draw() 中的任何位置添加 pg.clear() 在 canvas 上显示 pg 之后 (image(pg, ...)) 并且在绘制省略号之前 (for (...) {... ellipse(nosePosition[i].x...)}) 应该可以解决问题。这是我放的地方：

image(pg, 0, 0, width, height);
pg.clear();//HERE
if (pose) {//...

如何移动一组 posenet 点？

How to shift an array of posenet points?

javascript

arrays

computer-vision

p5.js