javascript - Javascript: 冗長性なしで、2 つの円を独立してカーソルに追従させる

Question

以下の js フィドルの円を取得してカーソルを個別に追跡しようとしていますが、このコードをyellow一般化して、円の div を追加した場合に冗長なコードをコピーする必要がないようにするにはどうすればよいですか?red

http://jsfiddle.net/fhmkf/218/

コードには多くの冗長性があります。

// first circle variables
var center = {
    x: $(".container").width()/2 - 15, 
    y: $(".container").height()/2 - 15
};
var distanceThreshold = $(".container").width()/2 - 15;
var mouseX = 0, mouseY = 0;

// second circle variables
var center2 = {
    x2: $(".container2").width()/2 - 25, 
    y2: $(".container2").height()/2 - 25
};
var distanceThreshold2 = $(".container2").width()/2 - 25;
var mouseX2 = 0, mouseY2 = 0;


$(window).mousemove(function(e){ 
   var d = {
        x: e.pageX - center.x,
        y: e.pageY - center.y
   };
   var distance = Math.sqrt(d.x*d.x + d.y*d.y);
   if (distance < distanceThreshold) {
     mouseX = e.pageX;
     mouseY = e.pageY;
   } else {
     mouseX = d.x / distance * distanceThreshold + center.x;
     mouseY = d.y / distance * distanceThreshold + center.y;
   }

   var d2 = {
        x2: e.pageX - 200 - center2.x2,
        y2: e.pageY - 200 - center2.y2
   };
   var distance2 = Math.sqrt(d2.x2*d2.x2 + d2.y2*d2.y2);
   if (distance2 < distanceThreshold2) {
     mouseX2 = e.pageX - 200;
     mouseY2 = e.pageY - 200;
   } else {
     mouseX2 = d2.x2 / distance2 * distanceThreshold2 + center2.x2;
     mouseY2 = d2.y2 / distance2 * distanceThreshold2 + center2.y2;
   }
});

// cache the selector
var follower = $("#follower");
var xp = 0, yp = 0;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 2;
    yp += (mouseY - yp) / 2;
    follower.css({left:xp, top:yp});

}, 30);

// cache the selector
var follower2 = $("#follower2");
var xp2 = 0, yp2 = 0;
var loop2 = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp2 += (mouseX2 - xp2) / 2;
    yp2 += (mouseY2 - yp2) / 2;
    follower2.css({left:xp2, top:yp2});

}, 30);