粒子從鼠標「逃跑」

我在畫布上創建了一個簡單的粒子實驗。現在，我希望他們能夠從畫布上的鼠標滾輪「逃跑」。檢測距鼠標的距離不是問題，但是如何編寫它們的行爲？粒子從鼠標「逃跑」

每個粒子被創建爲以下：

var particle = { 
     x: Math.floor(Math.random() * width), 
     y: Math.floor(Math.random() * height), 
     xVel: Math.random() * 10 - 5, 
     yVel: Math.random() * 10 - 5, 
    }

所以我想我也應該保存的方向以某種方式，並且如果從指針的距離爲< X，扭轉方向？也許也保存舊的速度，並在離開時慢慢減少它？

如何檢測的方向？

來源

2013-02-26 mjanisz1

速度（xVel，yVel，一起）是2D矢量。鼠標和粒子之間的距離也是如此。 A vector包含方向和大小。所以你需要一個與鼠標位置和粒子位置不同的矢量。

var posRelativeToMouse = { 
    x: particle.x - mousPosX, 
    y: particle.y - mousPosY 
};

所以少量的x和y意味着粒子接近老鼠，大意味着它很遠。

接下來，我們需要弄清楚這些數字應該是如何影響粒子的速度。所以我們需要2件事。

什麼方向我們推他們？

我們已經有這樣的居多。 posRelativeToMouse是一個有我們想要的方向的向量。我們只是規範化它，這意味着將矢量的長度設置爲1.爲此，我們將每個組件除以矢量的當前長度。該向量的長度始終爲distance，從粒子到鼠標。

var distance = Math.sqrt(
    posRelativeToMouse.x * posRelativeToMouse.x + 
    posRelativeToMouse.y * posRelativeToMouse.y 
); 
var forceDirection = { 
    x: posRelativeToMouse.x/distance, 
    y: posRelativeToMouse.y/distance, 
};

有多難我們推顆粒？

這是距離的倒數。關閉意味着大推動，遠意味着一點點推動。因此，讓我們重新使用我們上面計算出的distance。

// distance past which the force is zero 
var maxDistance = 1000; 

// convert (0...maxDistance) range into a (1...0). 
// Close is near 1, far is near 0 
// for example: 
// 250 => 0.75 
// 100 => 0.9 
// 10 => 0.99 
var force = (maxDistance - distance)/maxDistance; 

// if we went below zero, set it to zero. 
if (force < 0) force = 0;

好的，我們有一個方向，我們有力量。剩下的就是將其應用於粒子速度。

particle.xVel += forceDirection.x * force * timeElapsedSinceLastFrame; 
particle.yVel += forceDirection.y * force * timeElapsedSinceLastFrame;

並假設你是動畫的位置由xVel/yVel每一幀，你現在應該有通過鼠標被推開顆粒。

來源

2013-02-26 19:59:01

很好，但現在我有另一個問題。如何讓粒子「回到」之前的速度？因爲在離開鼠標後，他們開始用新的速度+ force – mjanisz1 2013-02-27 20:20:50

@ mjanisz1開始瘋狂，這取決於你希望他們如何表現。但是這聽起來有點像你想要對粒子產生阻力，這意味着它們隨着時間的推移會自行減速？一個簡單而粗略的方法是在每一幀上使速度變得更小一些。像'particle.xVel * = 0.99'（當然也是'yVel'）。這意味着粒子每幀將失去1％的速度，如果沒有其他力量作用於其上，最終應該接近零。您可以將「0.99」值調整爲任何可以提供所需拖動量的值。 – 2013-02-27 21:56:53

非常感謝很多人沒有想到的乘法（簡單的事情是最好也是最難想象的）。如果'force == 0 && xVel> xVelOriginal'比第一個速度乘以0.99！希望它的作品:)謝謝你很多！ – mjanisz1 2013-02-28 18:48:42

可以通過從鼠標的位置減去粒子的位置獲得一個矢量v，

然後就可以發現這個矢量的大小我的拍攝的sqrt（X^2 + Y^2）

通過將v除以量值，您可以獲得希望粒子走向的單位向量。例如

。

假設我在列表中有U，每個具有x和y場10級的顆粒。

我能得到它的每個粒子V向量通過將v =（xpart - mousepart，ypart - mousepart）

，那麼你需要採取開方找到幅度VMAG（VX^2 + VY^2）

則獲得vunit =（VX/VMAG，VY/VMAG）

這是載體「遠離鼠標」。

剩下的就留給detemining要在移動速度，並確保你反彈的牆壁和這樣的。

我在github上開源一個類似的項目： https://github.com/dmitrymakhnin/JavaParticleSystem/blob/master/Main.java

來源

2013-02-26 19:39:42 Dmitry

粒子從鼠標「逃跑」

回答

相關問題