万花筒原理
每次旋转角度 = 360° ÷ 对称数量
同一条基本轨迹绕中心复制 N 次，再沿局部坐标轴镜像，得到放射状结构。
学习目标
01
读取当前与上一帧鼠标位置
02
使用 if / else 控制交互状态
03
组合 translate()、rotate() 与 scale()
04
用循环构造多重旋转对称
核心概念
原理解析
状态隔离
每次循环都使用 push() 与 pop()，确保旋转和镜像只作用于当前副本，不影响下一次绘制。
交互提示
按住鼠标才会记录轨迹；按 R 清屏，方向键上/下可以在 3–24 之间调整对称数量。
扩展挑战
- 让颜色随鼠标位置变化
- 增加不同的镜像轴
- 根据移动速度调整线宽
案例演示
实时运行 · 按住鼠标绘制；R 清屏；方向键调整对称数
sketch.js打开源码
正在载入源码…核心要点
重复产生复杂性
一个简单笔触通过旋转复制可形成完整图案。
变换必须局部化
状态栈防止坐标变换在循环中失控。
交互参数可成为构图工具
对称数量直接改变画面的节奏与密度。