javascript - 用三 Angular 形填充平面(三 Angular 测量)

标签 javascript algorithm canvas triangulation triangular

我尝试创建如下图所示的图像作为网站的随机背景,但经过多次尝试后,我找不到能够完成工作的算法。

enter image description here

程序应该做什么?

它应该能够用三 Angular 形随机填充一个平面。这些三 Angular 形应该都是独立的,所以我不想简单地在 Canvas 上绘制长线并为创建的三 Angular 形上色。

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

1.

  • 制作随机点
  • 建立长度低于特定值的随机连接(这可能会导致三 Angular 网出现孔洞)
  • 试着找出什么连接构成三 Angular 形(我在这里失败了)

2.

  • 从一个三 Angular 形开始
  • 在现有连接附近创建一个新点,并从那里添加一个不会导致任何交叉点的三 Angular 形。每当它像这张图片那样留下一个小洞时,就会导致问题:

    enter image description here

3.

  • 做随机点
  • 建立所有可能的联系(每个点都相互联系)
  • 按长度对连接进行排序
  • 对于以最短绘制开始的每个连接,如果它不与任何其他绘制的线相交。否则删除连接。

这实际上是我最好的尝试,即使程序花了很长时间才完成,但只得到了几个点。结果是这样的:

enter image description here

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

希望您知道如何创建像第一张图片那样的漂亮的三 Angular 形填充 Canvas ,并告诉我...

最佳答案

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

关于javascript - 用三 Angular 形填充平面(三 Angular 测量),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44912923/

相关文章:

c - c中使用指针的交换排序算法

javascript - 在 JavaScript 函数中加载图像

javascript - 具有 Neurosky 传感器输入的多个 HTML5 Canvas 无法正常工作

javascript - 从像素数据数组绘制图像

javascript - 为什么使用 JavaScript 更改后链接标题不再换行?

javascript - 如何在 Node.js 中将变量设置为 morgan 的结果(而不是将其记录在控制台上)

algorithm - 素因数计算的费马算法

javascript - 将表单转换为 jquery ajax 时本地 Blobstore 失败

javascript - CKEditor:我想在所见即所得编辑器中禁止 <ul> 标签

algorithm - 如何用Warnsdorff规则改进Knight的巡回赛?