web 毕达哥拉斯分形树

1.目标——SVG分形树（难度：3.9）

本期我们的目标是通过分形算法，利用SVG绘图元素，制作一棵分形树.树可以左右摆动，变大缩小，点击会有颜色的渐变动画.

2.分析需求——庖丁解牛

1.分形的算法都是公开的，问题在于如何将分形的算法变成SVG元素的坐标.  可以通过数学向量的技术实现.

2.分形图形一般都是一层一层的，创建图形也是由上一层计算出下一层，变色动画也可以按照层级来变化

3.分形树的放大，缩小，摆动，通过捕捉鼠标在窗口中的位置，修改树的比例参数，刷新SVG图形坐标即可

4.分型中有大量的计算，我们要控制好分形的迭代次数，保存分形的标签和坐标，用空间换取计算时间

...

4-a 坐标计算

ab向量的单位方向向量为

  abx/ab_mod,aby/ab_mod

向量be的坐标

因为  be的方向 = ab向量方向

但是  be的长度！= ab的长度

所以   向量be = 向量ab / ab长度 * be长度

  bex = abx/ab_mod * be_mod,

  bey = aby/ab_mod * be_mod

...

原代码和详细教程请下载附件:

链接：https://pan.baidu.com/s/1fi9oOmbRwf5voH18ULt6oA 
提取码：vs9t