这是一个创建于 1107 天前的主题，其中的信息可能已经有所发展或是发生改变。
 |
1
Quarter 2021-11-18 22:34:18 +08:00 via iPhone
canvas 画一下
|
 |
2
zcf0508 2021-11-18 22:39:23 +08:00 via Android  2
搜索 lowpoly css
|
 |
3
Building 2021-11-18 22:46:48 +08:00 via iPhone
在区间内随机取两个点连成一条直线，在区间随机取第三个点，连成三角形，把第一个点变为第三个点，依次重复直到所有点都在矩形外，根据颜色渐变着色。
|
 |
4
superbiger 2021-11-18 23:34:47 +08:00 1
Barycentric coordinates
|
 |
5
zisen OP @superbiger 查了一下，这个名词的中文翻译是重心坐标。
您的意思是“先画一个大的三角形，然后生成它的重心点，连接三角形的顶点和重心点，将原始三角形一分为三，然后对这三个小三角形重复上面的操作，最后可以生成非常多的小三角形。”？ |
 |
6
thedrwu 2021-11-19 02:53:36 +08:00 via Android
Delaunay
|
|
7
thedrwu 2021-11-19 02:55:46 +08:00 via Android
但仔细一看这不是 delaunay ，尖得太丑了
|
|
8
zisen OP 1
基本上查到了相关信息，如同楼上大佬的回复，这种图片风格被称为 lowpoly ，低多边形，生成 lowpoly 风格图片的算法被称为 delaunay 算法，可以使用 js 实现，具体代码思路我还在研究，不过搜这几个关键词就能找到想要的答案。
再次感谢各位大佬，铜币奉上！ |
|
9
superbiger 2021-11-19 23:55:26 +08:00
@zisen 其实这个效果 lowpoly 就已经可以实现了。看你怎么来做了
|
|
10
superbiger 2021-11-20 00:04:39 +08:00 1
@zisen 其实整个矩形四个顶点 可以分割成 2 个三角形，那么就是就可以随机一些点，判断是不是在这两个三角形内部，三角形的每一个顶点是一个色值，那么重心坐标就将这个三角形分割成三个三角形，进而得出这个点相对于整个大的三角形的面积比例 0 到 1 之间。那么每个顶点的色值 r, g,b 的一维矩阵 [r, g, b]进而乘以这个比例再三个顶点矩阵相加得出这个重心点的色值。这样就实现了三个不同颜色过度。类似 webGL 的第一课画的那个三角。
那么每一个顶点的色值都有了，从矩形分割两个三角形，到随机点连线无限分割其实也一样的。这个算法适配性更高就是了。你给的图是水平渐变的，根本不涉及这么复杂。 |
|
11
superbiger 2021-11-20 00:08:39 +08:00
@zisen 分割是一个，颜色怎么填也是个问题的
|
 |
12
debonexx 2021-11-23 13:27:58 +08:00
|
 |
13
evan6 2021-11-23 18:34:49 +08:00 1
|
 |
14
pagepan 2021-12-15 10:41:12 +08:00
|
Select Language