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

Question

So, when I use

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

to set the center of camera to my sprite, the code doesn't work as intended to. It's slightly hard to explain so i made this video( https://youtu.be/afCamx_wB_4 ) in which I show how it should work and the difference/problem when using camera.position

Also, as you can see, the sprite starts vibrating when it reaches the mouse pointer even when not using camera.position, which is another bug. If possible please tell how to fix it as well. The code related to this is:

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;

Also if you notice, when using camera.position, the vibration happens at specific distance of the sprite from the mouse, and the patter is that the distance is 0 right at the center of the canvas and keeps increasing as you move away from the center.

Answer 1

The vibration effect happens because the position of the player object changes incrementally and is, practically, never going to match the position of the mouse:

 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>

But you can check if the distance between the player and the mouse is less than the increment and force the position to be the same as the mouse's:

 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>

As per the "vibration happens at specific distance of the sprite from the mouse" I can't see anything related to it in the code you posted; but, by the description and the video, I'd think is a translation issue.