根据svg轨迹动态绘制傅里叶级数
项目地址
GitHub - ruanluyu/FourierCircleDrawing: Use fourier transform to draw any pattern. Preview :
使用步骤
1.需要安装的软件
链接：pan.baidu.com/s/13vXObnFe… 密码：y5ai
包含包含前两个工具，后面两个自己下载
- git （拉取项目文件）
- Processing （运行绘制//解压后不用管了）
- python3 （把svg路径转成Processing能处理的数组）
- adobe illustrator （画svg图使用）
2.拉取项目
- 安装好git后，双击install.bat,会自动执行git指令拉取项目文件，会增加文件夹FourierCircleDrawing（核心！！！）
3.画svg，提取路径
- 打开FourierCircleDrawing\Resource里triangle.ai，删了里面的东西 用钢笔工具画线条
- 之所以建议删除里面的东西而不是新建文件，是因为该项目运行默认10001000，但我新建10001000的生成路径竟然有位置在1500多的点，图个省事，直接在原项目上改最稳妥
- 画完后，选择整个路径（必须是闭合的），右键 建立复合路径
- 文件/导出/导出为svg/svg代码(把
<path d="M....z"从M到z这一部分拷贝出来粘贴到FourierCircleDrawing\FourierMath\rawvertexes.txt文件里)
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<style type="text/css">
.st0{fill:#C9B4FF;}
.st1{font-family:'HYi1gf';}
.st2{font-size:500px;}
.st3{letter-spacing:-19;}
.st4{fill:none;stroke:#000000;stroke-miterlimit:10;}
</style>
<g id="图层_1">
<text transform="matrix(1 0 0 1 258.6743 684.4163)" class="st0 st1 st2 st3">何</text>
</g>
<g id="图层_2">
<path class="st4" d="M411.5,354.5c11,5,23,14,26,16c7,4,15,21,15,24c-7,24-24,39-24,39l-31,32l-4,8l-26,32l22,23l4,19l5,4
c0,0,13-67,17-80s10-25,10-25l27-15l80-35l65-18c0,0,50-8,60-6s16,10,21,16c2.64,3.17-6,20-11,21s-15,0-15,0l-7,4c0,0-32,11-35,13
s-24,14-25,16s20,22,23,29s12,120,11,131s-7,79-12,87c-2,8-22,64-31,65c-10,3-11,4-12,0s12-48,12-52s7-66,7-72s2-130-4-146
c-2-10-3-10-5-11s-12,13-13,17c-1,7,5,27,3,34s-7.32,36.51-12,42c-4,10-17,18-23,17s-20-9-21-14s0-27,2-32s13-33,13-37s-6,2-8,6
s-25,35-26,41s3,44,2,50s-7,19-12,19s-24-19-24-24c0-11-2-15-5-24c0-8-1-24,3-33s8-11,15-16s36-40,41-44s74-59,74-61s-2-3-5-3
s-14,5-22,10c-6,1-6-2-10,1s-4.85,4.23-14,10c-8.06,5.08-10,7-20,14c-29.06,26.05-34,27-34,27c-22.32,4.29-37.64-24.6-51-18
c-6.1,3.02-7,15-10,22s-8,76-8,76s-9,91-10,94s-6,21-10,23c-4,1-5,0-7-2s-13-19-14-21s-4-19-4-19l-1-24l4-43c0,0-0.12-19.91-9-21
c-11-1-18,3-19,4s-12,10-12,10s-3,3-6-2s-4-13-4-20s0-16,2.5-28.5c4.5-9.5,33.15-30.05,49-63c10.5-20.49,30.5-57.5,31.5-61.5
c2-2-8.55-18.42-8-22c0.56-3.65,2.5-5.5,2.5-5.5C397.5,349.5,400.5,349.5,411.5,354.5z"/>
</g>
</svg>
4. 转化路径为Processing能处理的数组
- 用pycharm打开FourierCircleDrawing\FourierMath文件夹 或者 在该文件夹处打开powershell
- 运行FourierMath.py，会把rawvertexes.txt的svg路径数据转换成数组放进datas.txt里
- 可以修改python代码的两个参数
end = 1000 # 圆圈数量 圆圈越多，边勾勒的越精确
center = [500,500] # 中心点位置，例如这里的[500,500]会让1000x1000的矢量图在坐标轴中居中显示。
5. 运行
- FourierCircleDrawing文件夹下找到FourierCircleDrawing.pde，双击运行后，点左上角就能运行了
- 其中一个参数可以改：rotationSpeed 控制旋转速度，0.2f时会速度快的全是点，连不成线
- 最终效果
扩展学习
- 3Blue1Brown的视频牛的一比，当初就是沉迷看他的视频，耽误刷题
【官方双语】微分方程概论-第四章：但什么是傅立叶级数呢？-从热流到画圈圈_哔哩哔哩_bilibili
