複数のDivsは可変速度のすべてのカーソルに従います

Question

私はdiv /グラフィックスをカーソルに従う方法についていくつかの研究を行っています - Resource Here - 私は各divが独自のランダムな速度を持っている複数のdivのこのエフェクトを作成しようとしていますいくつかの要素が他の要素より遅れている。私は現在の進捗状況を示すためにJS Fiddleを作成しました。あなたはそれをいくつか拡張することができます。しかし、私は現在のものよりも劇的な効果を得ることを望んでいます。

JS Fiddle

コードHTML

<div class="container"> 
    <div class="following blue"></div> 
    <div class="following red"></div> 
    <div class="following yellow"></div> 
    <div class="following orange"></div> 
    <div class="following green"></div> 
    <div class="following purple"></div> 
    <div class="following pink"></div> 
</div> 

コードJS

var mouseX = 0, 
    mouseY = 0, 
    limitX = 400 - 15, 
    limitY = 550 - 15; 

$(window).mousemove(function(e) { 
    // with the math subtractnig the boundary 
    mouseX = Math.min(e.pageX, limitX); 
    mouseY = Math.min(e.pageY, limitY); 
}); 

// cache the selector 
var followers = $(".following"); 
var x_pixels = 0, 
    y_pixels = 0; 
var loop = setInterval(function() { 

    // Loop through each follower to move and have random speeds 
    followers.each(function() { 
     // Set a max Number to allow for the randomIntFromInterval 
     // function to work 
     var max = followers.length * 15; 
     var min = followers.length; 

     x_pixels += (mouseX - x_pixels)/randomIntFromInterval(min, max); 
     y_pixels += (mouseY - y_pixels)/randomIntFromInterval(min, max); 

    $(this).css({ 
     left: x_pixels, 
     top: y_pixels 
    }); 

    }); 

}, 40); 

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

これを行う方法上の任意のアドバイスは大歓迎です。ありがとう！

Answer 1

まず、あまりにもランダムではないから始めましょう。まず、これらの計算を40msごとに各ドットに対して実行します。これには興味深い結果があります。

x_pixels += (mouseX - x_pixels)/randomIntFromInterval(min, max); 
y_pixels += (mouseY - y_pixels)/randomIntFromInterval(min, max); 

青いドット乱数{1、4、7、8、4、3、10、6、6}のセットを取得し言うと、赤い点は乱数{8,7のセットを取得します、5、4、5、7、9、4、3}。問題は、これらの平均が同じになることです（それぞれ5.44と5.77）。動きは非常に速く起こっているので、少しジッタがありますが、動きが大きくなる傾向があります。

2番目の問題は、各ドットに同じx_pixelsとy_pixelsを使用していることです。あなたは上にこれを宣言します：

var x_pixels = 0, 
y_pixels = 0; 

しかし、あなたは今のところドットから現在の値を戻すことはありません。 + =でリサイクルしますが、各ドットは同じ位置を共有します。

私はこの問題がかなり広く、複数の方法で解釈できるため、2つの解決方法があります。これらの解決法は両方とも、ドットと一緒に残る摩擦係数を割り当てることによって上記の問題に対処している。最初の例は、ドットの存続期間の間ランダム摩擦を維持し、2番目は摩擦係数を頻繁に変更します。

jsfiddle.net/e3495jmj/1 - 最初のソリューション

jsfiddle.net/e3495jmj/2 - 第二の溶液

乾杯！