V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
zisen
V2EX  ›  设计

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

  •  3
     
  •   zisen · 2021-11-18 22:17:38 +08:00 · 4139 次点击
    这是一个创建于 1100 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    那么每一个顶点的色值都有了,从矩形分割两个三角形,到随机点连线无限分割其实也一样的。这个算法适配性更高就是了。你给的图是水平渐变的,根本不涉及这么复杂。
    superbiger
        11
    superbiger  
       2021-11-20 00:08:39 +08:00
    @zisen 分割是一个,颜色怎么填也是个问题的
    debonexx
        12
    debonexx  
       2021-11-23 13:27:58 +08:00
    evan6
        13
    evan6  
       2021-11-23 18:34:49 +08:00   ❤️ 1
    https://trianglify.io/
    在线生成~
    pagepan
        14
    pagepan  
       2021-12-15 10:41:12 +08:00
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2606 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 04:53 · PVG 12:53 · LAX 20:53 · JFK 23:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.