请问这种三角形设计是怎么用代码实现的？

[zisen]

[Quarter]

canvas 画一下

[zcf0508]

搜索 lowpoly css

[Building]

在区间内随机取两个点连成一条直线，在区间随机取第三个点，连成三角形，把第一个点变为第三个点，依次重复直到所有点都在矩形外，根据颜色渐变着色。

[superbiger]

Barycentric coordinates

[zisen]

@superbiger 查了一下，这个名词的中文翻译是重心坐标。
您的意思是“先画一个大的三角形，然后生成它的重心点，连接三角形的顶点和重心点，将原始三角形一分为三，然后对这三个小三角形重复上面的操作，最后可以生成非常多的小三角形。”？

[thedrwu]

Delaunay

[thedrwu]

但仔细一看这不是 delaunay ，尖得太丑了

[zisen]

基本上查到了相关信息，如同楼上大佬的回复，这种图片风格被称为 lowpoly ，低多边形，生成 lowpoly 风格图片的算法被称为 delaunay 算法，可以使用 js 实现，具体代码思路我还在研究，不过搜这几个关键词就能找到想要的答案。
再次感谢各位大佬，铜币奉上！

[superbiger]

@zisen 其实这个效果 lowpoly 就已经可以实现了。看你怎么来做了

[superbiger]

@zisen 其实整个矩形四个顶点 可以分割成 2 个三角形，那么就是就可以随机一些点，判断是不是在这两个三角形内部，三角形的每一个顶点是一个色值，那么重心坐标就将这个三角形分割成三个三角形，进而得出这个点相对于整个大的三角形的面积比例 0 到 1 之间。那么每个顶点的色值 r, g,b 的一维矩阵 [r, g, b]进而乘以这个比例再三个顶点矩阵相加得出这个重心点的色值。这样就实现了三个不同颜色过度。类似 webGL 的第一课画的那个三角。

那么每一个顶点的色值都有了，从矩形分割两个三角形，到随机点连线无限分割其实也一样的。这个算法适配性更高就是了。你给的图是水平渐变的，根本不涉及这么复杂。

[superbiger]

@zisen 分割是一个，颜色怎么填也是个问题的

[debonexx]

https://github.com/qrohlf/trianglify

[evan6]

https://trianglify.io/
在线生成～

[pagepan]


https://haikei.app/ 这里还有生成更多图形的