用 d3-delaunay 打造 Voronoi 艺术：马赛克肖像生成指南
用 d3-delaunay 打造 Voronoi 艺术马赛克肖像生成指南【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunay想不想把一张普通照片变成充满几何美感与科技感的马赛克肖像d3-delaunay正是能帮你轻松完成Voronoi 图计算的高性能 JavaScript 库。它基于 Delaunator 实现二维点集的 Delaunay 三角剖分并快速生成对应的 Voronoi 图——这正是马赛克肖像、蜂巢地图与低多边形艺术的共同几何内核。本文从零开始带你一步步用 d3-delaunay 生成属于自己的 Voronoi 马赛克肖像。 什么是 Voronoi 图马赛克艺术的几何基础Voronoi 图又称维诺图、泰森多边形是计算几何中的经典结构给定平面上的一组点Voronoi 图将平面划分为若干区域每个区域内任意位置到该区域母点的距离都小于到其他任何点的距离。换句话说每个点都圈出一块离自己最近的领地而相邻领地之间的边界正是两点连线的垂直平分线。这种无缝覆盖、互不重叠的特性让 Voronoi 图天然适合做马赛克每个单元就是一块瓷砖无数瓷砖拼合起来就构成一幅完整的画面——这就是 Voronoi 艺术的精髓。⚡ 认识 d3-delaunay高性能 Voronoi 图计算库d3-delaunay 是 D3 生态中计算二维点集 Voronoi 图的极速库出自 D3 之父 Mike Bostock 之手。它的底层基于 mapbox 的 Delaunator——一个使用扫描线算法实现的高性能 Delaunay 三角剖分库。d3-delaunay 通过连接 Delaunay 三角剖分中相邻三角形的外心circumcenter快速构造出 Voronoi 图。Delaunay 三角剖分与 Voronoi 图互为对偶前者连接点形成三角形后者划分区域形成多边形。整个计算封装在src/delaunay.js与src/voronoi.js两个核心模块中接口简洁、性能出众是生成 Voronoi 马赛克与低多边形艺术的首选工具。 五分钟快速上手安装与基础用法安装 d3-delaunay 非常简单npm 一条命令即可npm install d3-delaunay核心用法只有两步先用Delaunay.from()从点集构建三角剖分再调用voronoi()生成 Voronoi 图。import {Delaunay} from d3-delaunay; const points [[0, 0], [100, 0], [50, 80], [20, 40]]; const delaunay Delaunay.from(points); const voronoi delaunay.voronoi([0, 0, 960, 500]); // 裁剪边界其中voronoi()的四个参数是裁剪边界[xmin, ymin, xmax, ymax]默认值为[0, 0, 960, 500]。如果想查看源码或运行示例也可以直接克隆仓库git clone https://gitcode.com/gh_mirrors/d3/d3-delaunay。 核心 API 速查API作用Delaunay.from(points)从点集构建 Delaunay 三角剖分delaunay.voronoi(bounds)生成 Voronoi 图并指定裁剪边界voronoi.renderCell(i, ctx)绘制第 i 个单元的路径voronoi.cellPolygon(i)获取第 i 个单元的多边形顶点voronoi.render(ctx)绘制整个 Voronoi 网格delaunay.update()点集变化时增量更新剖分 马赛克肖像生成实战三大核心步骤第一步按图像亮度采样点马赛克肖像的诀窍是点密则暗、点疏则亮在图片暗部多撒点、亮部少撒点密集处自然形成深色轮廓。通常以图像亮度或边缘强度作为权重进行拒绝采样即可。第二步构建三角剖分与 Voronoi 单元把采样点交给Delaunay.from()再调用voronoi()得到完整的 Voronoi 图。每个单元可用cellPolygon(i)取得多边形顶点或直接用renderCell(i, context)绘制路径配合 Canvas 即可轻松渲染到页面。第三步为每个单元填充平均颜色遍历所有单元取每个单元覆盖区域像素的平均颜色进行填充一幅极具艺术感的 Voronoi 马赛克肖像就诞生了。若只调用render()描边还能得到简洁的网格风格renderBounds()则负责绘制整体边界。✨ 进阶技巧让马赛克作品更出彩加权采样结合亮度与边缘权重让五官、轮廓处的马赛克更细腻。增加密度采样点越多马赛克越接近原图通常几千到上万个点即可获得惊艳效果。动态动画移动点集后调用update()增量更新剖分可实现流动的马赛克动画。配色优化把单元颜色替换为渐变或主题色板瞬间变身波普风、赛博朋克风。 总结d3-delaunay 用极简的 API 把复杂的 Voronoi 图计算变得触手可及理解 Delaunay 三角剖分与 Voronoi 图的对偶关系掌握采样 → 剖分 → 上色三步流程你就能把任意照片变成风格独特的马赛克肖像。无论是数据可视化、游戏地图还是数字艺术创作这项技能都能派上用场。现在就去克隆仓库动手生成你的第一幅 Voronoi 马赛克作品吧【免费下载链接】d3-delaunayCompute the Voronoi diagram of a set of two-dimensional points.项目地址: https://gitcode.com/gh_mirrors/d3/d3-delaunay创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
