如何移动一系列posenet点？答案

【问题标题】：How to shift an array of posenet points?如何移动一系列posenet点？
【发布时间】：2021-05-01 10:26:36
【问题描述】：

我是使用 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鼻子关键点。

任何见解/解决方案将不胜感激！

谢谢你:)

【问题讨论】：

标签： javascript arrays computer-vision p5.js

【解决方案1】：

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

在画布上显示 pg (image(pg, ...)) 和绘制椭圆 (for (...) {... ellipse(nosePosition[i].x...)}) 之前，在 draw() 的任何位置添加 pg.clear() 应该可以解决问题。这是我放的地方：

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

【讨论】：

完美运行，谢谢！