1

I have a few divs that follow the mouse position slowly. In the begenning it starts off fine but the closer it gets to the mouse position the slower it gets. I have a very efficient code below but I want to improve it so that the div will always follow the mouse with a constant speed rather than a changing one.

var xp = x, yp = y;
var loop = setInterval(function(){
xp += ((mouseX - xp) ) / 100;
yp += ((mouseY - yp)) / 100;
object.css({left:xp, top:yp});
},20);}

since its diving it by a 100 when it gets closer the math gets smaller causing the X/Y to move slower. I want it to stay the same speed regardless where its coming from.

Zakukashi
  • 566
  • 1
  • 13
  • 29
  • 1
    Do you want it to seem like the divs are attached to the mouse, or are you more interested in a tail-like behavior? Something like this answer: http://stackoverflow.com/a/3385953/74757 – Cᴏʀʏ May 08 '12 at 21:46
  • @Cory yes Im interested in a tail-like delayed kind of behavior. For instance you move the mouse and the div follows and it takes about 2 seconds or so to reach the mouse position. This code above alows that but it gets slower as it gets closer and I only want it to sustain its speed. – Zakukashi May 08 '12 at 21:52

2 Answers2

2

Here is the solution:

var loop = setInterval(
    function()
    {
        speed = 20;
        xp += (mouseX - xp)>speed ? speed : ((mouseX - xp)<-speed ? -speed : (mouseX - xp));
        yp += (mouseY - yp)>speed ? speed : ((mouseY - yp)<-speed ? -speed : (mouseY - yp));
        object.css({left:xp, top:yp});
    },20
);
mostar
  • 4,723
  • 2
  • 28
  • 45
  • This almost worked but its not as smooth as the original code. In the original the divs would follow in a smooth fashion while in this one the div's Y position are moved when its greater than mouseY – Zakukashi May 09 '12 at 11:02
  • Of course, `(mouseX-xp)` may be negative. I edited the solution. – mostar May 09 '12 at 19:13
0

Have you tried using Web workers?

Using a web worker, you can send 'heavy' tasks to complete in a background-thread, so that your UI-thread does not become sluggish and your web application stays responsive.

It's very simple to set-up.

var worker = new Worker('someWorker.js');

Have a look:

https://developer.mozilla.org/En/Using_web_workers

Ozzy
  • 8,244
  • 7
  • 55
  • 95
  • Are these available in all browsers? Very interesting if they are – Bryan May 08 '12 at 21:46
  • @BryanMoyles Chrome 3+, Firefox 3.5+, IE 10+, Opera 10.6+, Safari 4+ - its at the bottom of that link – Ozzy May 08 '12 at 21:48
  • Chrome, FireFox and Safari prompt users to update, and 99% of their users are on the later versions, so those are fine. (Together, those three make up about 85% of the browser market). I don't know much about Opera, and IE isn't supported yet, because most IE users are on IE8 and IE9. – Ozzy May 08 '12 at 21:50
  • 1
    @Ozzy Chrome/FF/Safari making up 85% of the browser market? Not sure where you got those stats from. IE hovers around 50% still (http://arstechnica.com/business/news/2012/04/internet-explorer-market-share-surges-as-version-9-wins-hearts-and-minds.ars, http://www.statowl.com/web_browser_market_share.php) – Matt May 08 '12 at 22:02
  • @Ozzy plus WebWorkers are really only applicaable when your non-UI work load is heavy, such as something computationally intensive tasks. If you're updating the DOM, such as dragging a DIV, you're having to do most of that work on the main thread anyway. And dragging elements is not that intensive anyway. – Matt May 08 '12 at 22:04
  • @Matt I guess I was wrong about the stats. All of his calculations can be done in the Worker thread, the resulting position can be posted back to the UI thread, where the receiving function just has to move it to the new position. – Ozzy May 08 '12 at 22:30