Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/469.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 用三角形填充平面(三角剖分)_Javascript_Algorithm_Canvas_Triangulation_Triangular - Fatal编程技术网

Javascript 用三角形填充平面(三角剖分)

Javascript 用三角形填充平面(三角剖分),javascript,algorithm,canvas,triangulation,triangular,Javascript,Algorithm,Canvas,Triangulation,Triangular,我试图创建一个像下面这样的图像作为一个网站的随机背景,但经过多次尝试,我找不到一个算法来完成这项工作 程序应该做什么? 它应该能够用三角形随机填充平面。这些三角形都应该是独立的,所以我不想简单地在画布上画一条长线,为创建的三角形添加颜色 到目前为止我尝试过的算法: 1. 乱分 以低于特定值的长度进行随机连接(这可能会导致三角形网络中的孔) 试着找出什么连接构成三角形(我在这里失败了) 2. 从一个三角形开始 在现有连接附近创建一个新点,并从那里添加一个不会导致任何交点的三角形。当它留下一

我试图创建一个像下面这样的图像作为一个网站的随机背景,但经过多次尝试,我找不到一个算法来完成这项工作

程序应该做什么?

它应该能够用三角形随机填充平面。这些三角形都应该是独立的,所以我不想简单地在画布上画一条长线,为创建的三角形添加颜色

到目前为止我尝试过的算法:

1.

  • 乱分
  • 以低于特定值的长度进行随机连接(这可能会导致三角形网络中的孔)
  • 试着找出什么连接构成三角形(我在这里失败了)
2.

  • 从一个三角形开始
  • 在现有连接附近创建一个新点,并从那里添加一个不会导致任何交点的三角形。当它留下一个小洞时,就会出现问题,如图所示:

3.

  • 乱分
  • 建立所有可能的连接(每一点到另一点)
  • 按长度对连接进行排序
  • 对于从最短绘制开始的每个连接,如果它不与任何其他绘制线相交。否则,删除连接
这实际上是我最好的尝试,即使这个程序花了很长时间才完成,只需要几点。结果是这样的:

我没有找到一种方法来找出什么样的连接构成了一个三角形,因此我无法独立地给它们着色


因此,希望您知道一种方法,可以像第一张图片中那样创建一个漂亮的三角形填充画布,并让我知道…

一个好的解决方案是从随机点开始(使用您首选的分布)并应用一些算法。其中,Delaunay三角剖分是一个很好的选择,因为它的计算复杂度和代码可用性都很低。

您不能设置一个点,随机抽取例如4,然后将它们与中间的一个和周围连接起来,然后用更多的点重复。谷歌Delaunay三角剖分。根据@spug的建议:Delaunay三角剖分具有使任何三角形的最小角度最大化的特性——也就是说,它们避免创建“长而细”的三角形(只要有可能)。要学究气,示例图像不是Delauney三角剖分,因此这样做不会生成“如下图所示”的图像important@samgak我只想让它看起来好看。。。对于这一点,Delaunay三角剖分应该是有效的:)我很感谢这个提示,但我认为这并不能解决我将每个三角形保存为一个对象以最终为它们着色的问题…@AntonBallmaier:你这么想是错的。三角剖分算法可以让你列举所有的面,并为每个面创建一个三角形。那么,非常感谢你的建议:)哦,拿这15个代表来说吧