什么是分形艺术
分形以相似结构在不同尺度上重复出现。计算机绘图不需要生成无限细节，而是用有限层级模拟自相似：每深入一层，形态按固定比例缩小，同时保留相同的构成规则。
学习目标
01
理解分形、自相似、尺度变化与复杂形态之间的关系。
02
使用递归函数、层级参数与终止条件生成有限分形结构。
03
结合 push()、pop()、rotate() 与 scale() 重复绘制同一视觉单元。
04
阅读交互参数如何影响分支数量、曲线伸展与镜像比例。
核心概念
原理解析
递归与终止条件
drawFractalLayers() 每次绘制一层径向图案，再以 level - 1 调用自身；当 level === 0 时停止。终止条件保证递归有限，避免函数持续调用造成运行错误。
固定缩放比形成自相似
每一层把 currentScale 乘以 SCALE_RATIO。外层与内层共享 drawRadialMotif()，形状规则不变、尺寸逐层缩小，因此产生可识别的尺度自相似。
径向重复与变换栈
for 循环把同一曲线按 TAU / branchCount 均匀旋转；push() 与 pop() 隔离每个分支的 rotate() 和 scale()，避免一次变换累积到后续分支。
代码执行路径
draw() 先更新交互参数与半透明背景，再从画布中心调用 drawFractalLayers()；递归层调用 drawRadialMotif()，最后由 drawMirroredCurve() 绘制左右镜像曲线。
- 鼠标 X：镜像横向比例与旋转偏移
- 鼠标 Y：曲线伸展与弯曲位置
- 垂直拖动：6–36 个径向分支
案例演示
实时运行 · 移动鼠标改变曲线形态，垂直拖动调整分支数量
sketch.js打开源码
正在载入源码…核心要点
分形来自规则重复
复杂画面并不依赖大量不同图形，而是让同一个视觉单元在角度和尺度上重复出现。
递归必须有边界
层级参数负责推进过程，level === 0 的终止条件负责结束过程，两者共同保证程序可控。
变换优先于重算坐标
用 translate()、rotate()、scale() 与变换栈复用曲线，比为每个分支单独计算全部坐标更清晰。