JavaScript分離軸定理

Question

我試圖圍繞使用JavaScript中的分離軸定理來檢測兩個正方形碰撞（一個旋轉，一個不是）。盡我所能努力，我無法弄清楚這在JavaScript中會是什麼樣子，我也找不到任何JavaScript示例。請幫助，使用純數字或JavaScript代碼進行解釋會非常有用。

---

更新：大量的研究幾何和數學理論，我已經決定推出在GitHub庫簡化SAT實施後。您可以在JavaScript中找到SAT的工作副本這裏：https://github.com/ashblue/canvas-sat

Answer 1

轉化多邊形

首先，你必須改變你的凸多邊形（在這種情況下，正方形）的所有點，使他們都在同一個空間，通過應用angle的旋轉。

爲了將來對縮放，翻譯等的支持，我建議通過矩陣轉換來實現這一點。你必須編寫你自己的Matrix類，或者找到一些已經具備此功能的庫（我確定有很多選項）。

然後你會的徒勞使用代碼：

var transform = new Matrix(); 
transform.appendRotation(alpha); 
points = transform.transformPoints(points); 

哪裏points是Point對象左右的數組。

碰撞算法概述

所以這就是你得到任何碰撞的東西全部之前。至於衝突算法，這是標準的做法，嘗試和分離2個凸多邊形使用以下步驟（你的情況正方形）：

• 對於每個多邊形邊緣（包括多邊形0和多邊形1的邊緣）：
  • 將兩個polgyons分爲「前面」，「跨越」或「後面」邊緣。
  • 如果兩個多邊形都在不同的側面（前面1英寸和後面1英寸），則不會發生碰撞，您可以停止算法（提前退出）。
• 如果你到達這裏，沒有邊緣能夠分離出多邊形：多邊形相交/碰撞。

請注意，在概念上，「分離軸」是垂直於我們正在分類多邊形的邊緣的軸。

判斷與問候多邊形邊緣

爲了做到這一點，我們將多邊形的點/頂點與問候到邊緣分類。如果所有點都在一邊，那邊的多邊形。否則，多邊形跨越邊緣（部分在一邊，部分在另一邊）。

要分類點，我們首先需要獲取邊緣的正常：

// this code assumes p0 and p1 are instances of some Vector3D class 

var p0 = edge[0]; // first point of edge 
var p1 = edge[1]; // second point of edge 
var v = p1.subtract(p0); 
var normal = new Vector3D(0, 0, 1).crossProduct(v); 
normal.normalize(); 

上面的代碼使用邊緣方向和z矢量來獲得正常的交叉乘積。當然，你應該預先計算每個邊的這個。

注意：法線代表與SAT的分離軸。

接下來，我們可以通過首先製備它相對於邊緣（減去的邊緣點），以及使用所述點積與正常的任意點進行分類：現在

// point is the point to classify as "in front" or "behind" the edge 
var point = point.subtract(p0); 
var distance = point.dotProduct(normal); 
var inFront = distance >= 0; 

，inFront是true如果該點位於前面或邊緣，並且否則爲false。

請注意，當您遍歷多邊形的點來分類多邊形時，如果您至少有1個點位於前面，1個位於後面，則可以提前退出，因爲此時已確定多邊形正在跨越邊緣（而不是在前面或後面）。

所以，你可以看到，你仍然有相當多的編碼要做。找到一些js庫，並且使用Matrix和Vector3D左右的類來實現上述功能。將您的碰撞形狀（多邊形）表示爲Point和Edge實例的序列。

希望這會讓你開始。