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 基本上查到了相关信息,如同楼上大佬的回复,这种图片风格被称为 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
|