如何修复精灵在使用 camera.position 设置为中心时向鼠标移动的随机振动？

Question

所以，当我使用

camera.position.x = player.x; 
camera.position.y = player.y;

为了将相机中心设置为我的精灵，代码无法按预期工作。这有点难以解释，所以我制作了这个视频 (https://youtu.be/afCamx_wB_4)，其中展示了它应该如何工作以及使用 camera.position

时的 difference/problem

此外，如您所见，即使不使用 camera.position，精灵到达鼠标指针时也会开始振动，这是另一个错误。如果可能，请告知如何修复它。与此相关的代码是：

function setup() {
  createCanvas(displayWidth,displayHeight);
  level = new Level;
  player = createSprite(100,100,10,10);
  edge = createEdgeSprites();
  player.speed = 5;
}

function draw() {
  background(255);  
  level.play();
  player.rotation = Math.atan2(mouseY-player.y, mouseX-player.x) * 180/PI;
  drawSprites();
}

player.collide(edge); //this part is from level.play()
var run = mouseX - player.x;
var rise = mouseY - player.y;
var length = sqrt((rise*rise) + (run*run));
var unitX = run / length;
var unitY = rise / length;
player.x += unitX * player.speed;
player.y += unitY * player.speed;

此外，如果您注意到，当使用 camera.position 时，振动发生在精灵与鼠标的特定距离处，并且模式是 [=28= 的中心距离为 0 ] 并随着您远离中心而不断增加。

Answer 1

振动效果的发生是因为播放器对象的位置逐渐变化，实际上永远不会与鼠标的位置匹配：

let player = {
  x: 100,
  y: 100,
  speed: 5,
  size: 10
}

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

function draw() {
  background(150)
  movePlayer()
  rect(player.x, player.y, player.size)
}

function movePlayer(){
  var run = mouseX - player.x;
  var rise = mouseY - player.y;
  var length = sqrt((rise*rise) + (run*run));
  var unitX = run / length;
  var unitY = rise / length;
  player.x += unitX * player.speed;
  player.y += unitY * player.speed;
}

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

但是你可以检查玩家和鼠标之间的距离是否小于增量并且强制位置与鼠标相同:

let player = {
  x: 100,
  y: 100,
  speed: 5,
  size: 10
}

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

function draw() {
  background(150)
  movePlayer()
  rect(player.x, player.y, player.size)
}

function movePlayer(){
  var run = mouseX - player.x;
  var rise = mouseY - player.y;

  //Check if the distance is less than the increment
  if(Math.abs(run) < player.speed && Math.abs(rise) < player.speed){
    player.x = mouseX
    player.y = mouseY
    return
  }

  var length = sqrt((rise*rise) + (run*run));
  var unitX = run / length;
  var unitY = rise / length;
  player.x += unitX * player.speed;
  player.y += unitY * player.speed;
}

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

根据 "vibration happens at specific distance of the sprite from the mouse" 我在您发布的代码中看不到任何相关内容；但是，根据描述和视频，我认为是 translation 问题。

如何修复精灵在使用 camera.position 设置为中心时向鼠标移动的随机振动？

How can I fix sprite vibrating randomly which is moving towards the mouse while using camera.position set to the sprite as the center?

javascript

debugging

rotation

p5.js