繞着鼠標畫布對象光標

我試圖複製這種效果：http://hakim.se/experiments/html5/trail/03/繞着鼠標畫布對象光標

我有這樣的一個粒子的構造函數：

function Particle(x, y) { 
    this.x = x; 
    this.y = y; 
    this.radius = 4; 
    this.color = '#f0f'; 
    this.speed = 15; 
    this.angle = 0; 
}

而且我用這個循環的動畫所有粒子實例：

for (var i = 0, len = particles.length; i < len; i++) { 
    var dx = mouse.x - particles[i].x, 
     dy = mouse.y - particles[i].y, 
     angle = Math.atan2(dy, dx); 

    particles[i].vx = Math.cos(angle) * particles[i].speed; 
    particles[i].vy = Math.sin(angle) * particles[i].speed; 
    particles[i].x += particles[i].vx; 
    particles[i].y += particles[i].vy; 
    particles[i].draw(ctx); 
}

粒子跟隨鼠標，但到達光標，並開始在其周圍的閃爍，這是不期望的行爲。我想圍繞光標，如在示例中。有趣的部分是，如果我將particle.speed設置爲像30這樣的東西，並將角度添加1000，粒子圍繞光標旋轉，但真的很快，破壞效果...

這裏你可以看到一個活生生的例子：http://codepen.io/gbnikolov/pen/EwafI

所有的建議都比較歡迎屆時，在此先感謝！

P.S.我知道這個針對性示例的代碼很容易找到，但是我對JavaScript比較陌生，而且我不太擅長閱讀其他人的代碼，並且不太瞭解它背後的邏輯..

來源

2014-10-31 Georgi B. Nikolov

當前你的粒子的目標是鼠標光標。但這不是你想要的目標。你想要一個圍繞你的光標移動的目標。而且你希望每個粒子都有一個不同的目標，所以他們不會把所有的東西都放在同一個地方。

也有一些其他的事情，原來不和你不這樣做：在原來

，顆粒速度取決於到目標
的距離似乎都無法改變即時的方向，但改變他們的運動方向相對較慢。

來源

2014-10-31 10:48:38

因此，我應該生成另一組不可見的目標，圍繞光標旋轉並將它們設置爲粒子的目標？我將盡快解決粒子速度和方向的變化，讓它們繞光標旋轉... – 2014-10-31 10:53:40

是的。目前您的目標是mouse.x/mouse.y。但它應該像mouse.x + Math.cos（時間/因子）* radius/mouse.y + Math.sin（時間/因子）*半徑。你可以從requestAnimationFrame回調中獲得時間，應該是第一個參數。嘗試factor = 2 * Math.PI/4000每4秒輪換一次。我也注意到你根本不用時間，所以實際的速度取決於瀏覽器的刷新率。您應該確定兩次調用之間的時間差，並考慮粒子每幀的速度。 – 2014-10-31 11:03:32

感謝您的評論@Tim，但是您能否更詳細地解釋這個方程式？我爲什麼要使用時間和因素？ – 2014-10-31 11:05:54

繞着鼠標畫布對象光標

回答

相關問題