Realistic mouse coordinates in javascript?

Question

Is there a way in javascript to create a variable and function that "mimics" the smooth movement of the mouse? that is, a function that simulates a user starts from the lower left corner of the browser window, and then slowly moves the mouse in a random direction ...

The function will return the x and y values ​​of the next position at which the mouse will move every time it is called (it will probably use something like setInterval to continue to call it to get the next mouse position). Movement should be limited by the width and height of the screen, assuming that the mouse never moves away from it.

What I don't want is that the mouse skips super fast everywhere. I like smooth movements / positions.

Answer 1

“Realistic mouse movement” means nothing without context:

Each mouse user has different types of behavior with this device, and they won’t even make the same gestures, given what they have on their screen.

If you take the FPS game, the movements will in most cases be in a small vertical range throughout the horizontal screen.
Here is the “drip picture” that I made by recording the movements of the mouse while playing FPS.

If we take the Google homepage , I don’t even use a mouse. The input is already focused, and I just use my keyboard.

- - .

, , , .

, , (, "" SO) .

, , Math.random() requestAnimationFrame(), , .

// Canvas is here only to show the output of  function
var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
document.body.appendChild(canvas);
var maxX = canvas.width = window.innerWidth;
var maxY = canvas.height = window.innerHeight;

window.onresize = function(){  
  maxX = canvas.width = window.innerWidth;
  maxY = canvas.height = window.innerHeight;
  }
gc.onclick = function(){
  var coords = mouse.getCoords();
  out.innerHTML = 'x : '+coords.x+'<br>y : '+coords.y;
  }

var Mouse = function() {
  var that = {},
    size = 15,
    border = size / 2,
    maxSpeed = 50, // pixels per frame
    maxTimePause = 5000; // ms

  that.draw = function() {
    if (that.paused)
      return;
    that.update();
    // just for the example
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if(show.checked){
      ctx.drawImage(that.img, that.x - border, that.y - border, size, size)
      }
    // use requestAnimationFrame for smooth update
    requestAnimationFrame(that.draw);
  }

  that.update = function() {
    // take a random position, in the same direction
    that.x += Math.random() * that.speedX;
    that.y += Math.random() * that.speedY;
    // if we're out of bounds or the interval has passed
    if (that.x <= border || that.x >= maxX - border || that.y <= 0 || that.y >= maxY - border || ++that.i > that.interval)
      that.reset();
  }
  that.reset = function() {
    that.i = 0; // reset the counter
    that.interval = Math.random() * 50; // reset the interval
    that.speedX = (Math.random() * (maxSpeed)) - (maxSpeed / 2); // reset the horizontal direction
    that.speedY = (Math.random() * (maxSpeed)) - (maxSpeed / 2); // reset the vertical direction
    // we're in one of the corner, and random returned farther out of bounds
    if (that.x <= border && that.speedX < 0 || that.x >= maxX - border && that.speedX > 0)
    // change the direction
      that.speedX *= -1;
    if (that.y <= border && that.speedY < 0 || that.y >= maxY - border && that.speedY > 0)
      that.speedY *= -1;
    // check if the interval was complete
    if (that.x > border && that.x < maxX - border && that.y > border && that.y < maxY - border) {
      if (Math.random() > .5) {
        // set a pause and remove it after some time
        that.paused = true;
        setTimeout(function() {
          that.paused = false;
          that.draw();
        }, (Math.random() * maxTimePause));

      }
    }
  }

  that.init = function() {
    that.x = 0;
    that.y = 0;
    that.img = new Image();
    that.img.src ="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAABJUlEQVRIic2WXbHEIAyFI6ESKgEJkVIJlYCTSqiESIiESqiEb19gL9Od3f5R5mbmPPHwBTgnIPJfChiAGbCkCQgtG7BpmgAWIALaDDyOI2bGuq40BasqIoKZATgwNAWHEEjHbkBsBhYRVJUYIwBNwVlFaVOwiDDPMylmQ1OwquY7d0CBrglYkuEeidoeOKt61I6Cq0ftKFhqR+0MOKuo2BQsInnndvnOr4JvR+0qWO5G7Q44K0XtOXDf96jqh9z9WXAy1FJ8l0qd+zbtvU7lWs7wIzkuh8SvpqqDi3zGndPQauDkzvdESm8xZvbh4mVZ7k8ud/+aR0C3YPk7mVvgkCZPVrdZV3dHVem6bju1roMPNmbAmq8kG+/ynD7ZwNsAVVz9dL0AhBrZq7F+CSQAAAAASUVORK5CYII=";
    that.reset();
  }
  that.getCoords = function(){
    return {x: that.x, y:that.y};
  }
  that.init()
  return that;
}
var mouse = new Mouse()
mouse.draw();

html,body {margin: 0}
canvas {position: absolute; top:0; left:0;z-index:-1}
#out{font-size: 0.8em}

<label for="show">Display cursor</label><input name="show" type="checkbox" id="show" checked="true"/><br>
<button id="gc">get cursor Coords</button>
<p id="out"></p>

Hide result

Answer 2

, JavaScript, " ". . , , . , , .

Answer 3

- . , , , . , div , div 10% :

http://jsfiddle.net/hpp0qb0d/

var p = document.getElementById('nextmove')
var lastX,lastY,cursorX,cursorY;

window.addEventListener('mousemove', function(e){
    cursorX = e.pageX;
    cursorY = e.pageY;
})
setInterval(function(){
    var newX = p.offsetLeft + (cursorX - lastX)/10
    var newY = p.offsetTop + (cursorY - lastY)/10

    p.style.left = newX+'px'
    p.style.top = newY+'px'

    lastX = p.offsetLeft
    lastY = p.offsetTop
},20)