【问题标题】:Create a Random 2D Concave Polygon Landscape JavaScript创建一个随机 2D 凹面多边形景观 JavaScript
【发布时间】:2012-11-06 19:12:04
【问题描述】:
我正在用 JavaScript (http://www.isogenicengine.com/demos/1.1.0/lander/) 编写一个简单的月球着陆器克隆,而不是一个只有高点和低点的基本景观,我想要一个生成随机洞穴状空间的算法。给定一个矩形区域以使用 [0, 0, 1920, 1200],该算法应该能够生成如下图所示的内容。理想情况下,洞穴区域的任何“入口”都应具有一定的宽度,以便着陆器能够进入“内部”。
我认为这可能是不可能的,而我可以像上面那样画一堆图像并将像素数据转换为粗糙的多边形数据,但是随机生成的关卡会更酷!
对于超硬核奖励积分,指定有多少类似洞穴的结构的能力会更棒。
算法的输出将是一个点数组,每个点都是一个对象,其中包含一个 x 和 y 属性 {x: val, y: val},当您在当前点和下一个点之间顺序绘制线时,会使向上多边形。
如果有人有类似的 JavaScript 实现,那也会有很大帮助!
【问题讨论】:
标签:
javascript
algorithm
math
terrain
【解决方案1】:
首先了解什么是气泡图,因为它在建筑中使用。这是一个空间的拓扑图,以气泡为空间,以线条代表通道。我没有找到任何一个可以快速推荐的好网页,但是进行图像搜索会产生很多示例。
可以将气泡图视为以气泡为顶点的图形。在您的示例中,将“天空”(包括顶部边缘的斑点)建模为顶点。洞穴是另一个顶点,入口是边缘。从这个角度来看,您可以轻松地生成尽可能多的洞穴般的复杂性。
下一个技巧是把它变成几何图形。本质上,您希望从图形的骨架中推出并在玩家可以导航的地方留出空隙。同时,您要确保这些空隙不会推出太远、变薄或消除墙壁。因此,您还需要对实体区域进行建模,这可以通过dual graph 完成。对偶图位于原始图的“下方”,从某种意义上说,边缘交叉表示冲突,这种冲突已解决,有利于 void 而非实体。
总结:(1)用你想要的特征做一个拓扑图。 (2) 为图创建几何图形,为每个顶点分配一个位置,并为每个边分配一个路径。 (3) 构造一个对偶图,并分配它的几何图形。 (4) 通过向外扩展每个图形来充实与每个图形相关的空间,解决冲突有利于通过而不是阻塞。
您可能想说服自己,最终几何图形的周长列表可以通过图的半边遍历生成,就像一只手扶着墙走迷宫一样。
【解决方案2】:
如果您有兴趣,可以使用行进广场将标量值的 2D 字段(可能从 Perlin 或 Simplex Noise 获取)转换为一组边缘线。当然,最终的结果将取决于您如何获得 2D 场标量值(如何操作 Perlin 或 Simplex Noise)。
This 是我能找到的最好的网站,它很好地介绍了细节。 (它的记录不如它的 3D 双胞胎 Marching Cubes)
其实上面的Wiki页面还不错。