創建隨機2D凹面多邊形景觀JavaScript

Question

我正在用JavaScript（ http://www.isogenicengine.com/demos/1.1.0/lander/ ）編寫一個簡單的月球着陸器克隆，而不是一個只有高點和低點的基本景觀，我想要一個算法生成隨機洞穴般的空間。 給定與[0,0,1920,1200]一起使用的矩形區域，算法應該能夠生成如下圖所示的內容。 理想情況下，洞穴區域的任何“入口”應具有設定的寬度，以便着陸器可以“進入”它。

我認為這可能是不可能的，而我可以只繪制一堆像上面那樣的圖像並將像素數據轉換為粗糙的多邊形數據，但隨機生成的水平會更酷！

對於超級硬核獎勵積分，能夠指定有多少類似洞穴的結構將會更加令人敬畏。

算法的輸出是一個點數組，每個點都是一個包含x和y屬性{x：val，y：val}的對象，當你在當前點和下一個點之間順序繪制線條時，構成多邊形。

如果某人有一個類似的JavaScript實現，也會有很多幫助！

Answer 1

首先要了解泡泡圖在建築中的用途。 它是一個空間的拓撲圖，氣泡作為空間和線條來代表通道。 我沒有找到任何一個很好的網頁來快速推薦，但進行圖像搜索會產生很多例子。

氣泡圖可以被認為是以氣泡為頂點的圖形。 在您的示例中，將“天空”（包括頂邊的blob）建模為頂點。 洞穴是另一個頂點，入口是邊緣。 從這個角度來看，很容易產生你想要的洞穴般的復雜性。

接下來的技巧是將其變成幾何體。 從本質上講，你想要從圖形的骨架中推出並在玩家可以導航的地方留出空白。 同時，你要確保這些空隙不會向外擠出太薄，否則會消除牆壁。 因此，您還需要對實體區域進行建模，並使用雙圖進行建模 。 雙重圖形在原始的“下方”，在邊緣交叉代表沖突的意義上，有利於空洞而不是固體。

總結：（1）制作具有所需功能的拓撲圖。 （2）為圖形創建幾何體，為每個頂點指定位置以及為每條邊指定路徑。 （3）構造雙圖，並指定其幾何。 （4）通過向外生長，將每個圖形相關的空間充實，解決沖突，而不是阻塞。

您可能想要說服自己，最終幾何體的周邊列表可以通過圖形的半邊緣遍歷生成，就像用一只手在牆上走迷宮一樣。

Answer 2

如果您有興趣，可以使用Marching Squares將標量值的2D場（可能從Perlin或Simplex Noise獲得）轉換為一組邊線。 當然，最終看起來將取決於您如何獲得2D場標量值（如何操縱Perlin或Simplex噪聲）。

這是我能找到的最好的網站。 （它沒有像Marching Cubes那樣有詳細記錄，它是3D雙胞胎）

實際上，它上面的Wiki頁面非常好。