How to smoothen draw() function & center image under cursor

I am looking to create a random archive of images basically like this: https://tavanovincent.com/loewe

Using the draw() function does not give me a smooth style like in the example. Any idea how to fix that?

Since I am at asking anyways 2 more questions: 1.How to center the image under the cursor instead on the top left corner? (I guess the easiest is to set cursor:none; but it has its disadvantages) 2.How to make the image size responsive instead of fixed to e.g. 200?

Thanks!

<script src="javascript/p5.min.js" type="text/javascript"></script>

<div id="p5container">

</div>
<script type="text/javascript">/**
 * Continuous Lines. 
 * 
 * Click and drag the mouse to draw a line. 
 */
let x = 1;
let y = 1;
let easing = 0.04;
let img = [];
let a = 4;
let value = 0;



function setup() {
    canvas = createCanvas(windowWidth, windowHeight);
    canvas.parent("p5container");

    background( 125 );

    for (let i = 0; i < 5; i++){
        img[i] = loadImage('random' + i + '.png')
    }
}

function draw() {

let targetX = mouseX;
  let dx = targetX - x;
  x += dx * easing;

  let targetY = mouseY;
  let dy = targetY - y;
  y += dy * easing;

image(img[a], x, y, 200, 200);
}

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}
function mouseClicked() { 
    a = getRandomInt(5);
}


</script>