How move the fake cursor randomly?

Question

I want to have 2 fakes cursors, i tried this one for creating 2 cursors.

// get the fake cursor by is id
var xyMirror = document.getElementById('fakeCursor');
var xyMirror2 = document.getElementById('fakeCursor2');
// listen for mouse movements
window.onmousemove = function(event) {  
// get the user's mouse position
var X = event.clientX;
var Y = event.clientY;
// get the browser window dimensions
windowHeight = window.innerHeight;
windowWidth = window.innerWidth;
// create an inversion of the mouse X, Y position
// subtract mouse X position from window width
// subtract mouse Y position from window height
var fakeX = windowWidth - X;
var fakeY = windowHeight - Y;

// use those numbers to update the fake cursor position
xyMirror.style.top = fakeY+'px';
xyMirror.style.left = fakeX+'px';
xyMirror2.style.top =  10  + fakeY+'px' ;
xyMirror2.style.left =  20 + fakeX+'px'; 
}

now their movement depend on original cursor, my question is How can move them randomly?

Answer 1

You can do some thing like that

// get the fake cursor by is id
var xyMirror = document.getElementById('fakeCursor');
var xyMirror2 = document.getElementById('fakeCursor2');
xyMirror.style.position = "absolute";
xyMirror2.style.position = "absolute";
var xMax = 0;var yMax = 0;
// listen for mouse movements
window.onmousemove = function(event) {  
	// Use event X and Y to set max value
	if (event.clientX > xMax) xMax = event.clientX;
	if (event.clientY > yMax) yMax = event.clientY;
	// Random position for fakeCursor
	xyMirror.style.left = getRandomArbitrary(0, xMax) +'px';
	xyMirror.style.top = getRandomArbitrary(0, yMax)+'px';
	// Random position for fakeCursor2
	xyMirror2.style.left = getRandomArbitrary(0, xMax) +'px';
	xyMirror2.style.top = getRandomArbitrary(0, yMax) +'px';
}

function getRandomArbitrary(min, max) {
	return Math.random() * (max - min) + min;
}

<div id="fakeCursor">fake1</div>
<div id="fakeCursor2">fake2</div>