使用p5js在两个ml5jsposeNet关键点之间移动对象

Question

我正在尝试在两个身体关键点之间（即左右肩膀之间）移动一个圆圈。我从这段代码开始，使对象位于某个位置：

var rectLocation;
var x = 50;
var y = 50;

function setup() {
  createCanvas(640,400);
  rectLocation = createVector(width/2,height/2);
}

function draw() {
    background(255);
  
    var target = createVector(x,y);
    var distance = target.dist(rectLocation);
    var mappedDistance = map(distance, 100, 0, 1.5, 0.5);
  
    target.sub(rectLocation);
    target.normalize();
    target.mult(mappedDistance);  
    rectLocation.add(target);
  
    text('hello',rectLocation.x, rectLocation.y);
  
    x = x + 1 ;
  
    if (x > width) {
      x = 50;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

因此，我使用poseNet将每个关键点的x和y值转换为p5矢量，并使一个位置跟随另一个位置，但是它似乎没有移动，我也无法理解为什么。草图：line numbers at the moment和我的代码在这里：

let video;
let poseNet;
let noseX = 0;
let noseY = 0;
let eyelX = 0;
let eyelY = 0;
let shoulderX = 0;
let shoulderY = 0;
let firstLocation;
let target;

function setup() {
  createCanvas(640, 480);
  video = createCapture(VIDEO);
  video.hide();
  
  poseNet = ml5.poseNet(video, modelReady);
  poseNet.on('pose', gotPoses);
  // creating empty vectors
  firstLocation = createVector(0,0);
  target = createVector(0,0);
}


function gotPoses(poses) {
  if (poses.length > 0) {
    let nX = poses[0].pose.keypoints[0].position.x;
    let nY = poses[0].pose.keypoints[0].position.y;
    let eX = poses[0].pose.keypoints[1].position.x;
    let eY = poses[0].pose.keypoints[1].position.y;
    let sX = poses[0].pose.keypoints[5].position.x;
    let sY = poses[0].pose.keypoints[5].position.y;
    noseX = nX;
    noseY = nY;
    eyelX = eX;
    eyelY = eY;
    shoulderX = sX;
    shoulderY = sY;
  }
}


function modelReady() {
  console.log('model ready');
}


function draw() {
  image(video, 0, 0);
  fill(0,0,255);
  
  // set vectors to keypoints values 
  firstLocation.set(noseX, noseY);
  target.set(shoulderX, shoulderY)
  
  // make a circle follow target loaction 
  let distance = target.dist(firstLocation);
  let mappedDistance = map(distance, 100, 0, 1.5, 0.5);
  target.sub(firstLocation);
  // target.normalize();
  // target.mult(mappedDistance);  
  firstLocation.add(target);
  
  ellipse(firstLocation.x, firstLocation.y, 50);
  console.log(target.x);
}

我哪里出错了？