• 用canvas制作分形树关闭
  • 雪峰 发表于 2016-07-08
  • 今天可以说又继续体验了一把“数学之美”吧,也就是传说中的分形图形。准确的分形的定义不是很清楚,但是由于其图像无论放大多少倍其局部形状都与整体形状一样,所以具有独特魅力。

    做出分形图形的思想并不难,也就是利用递归“无限的”进行重复性的局部图像绘制,然而事实上离屏渲染是不可能达到真正的分形的,除非实时渲染。使用canvas,也就是用js进行递归时会遇到一个麻烦,那就是递归深度很大时(层次并非很深,也许是计算量呈现指数形增长时),会导致内存溢出。这个时候有个解决办法就是利用setTimeout将每层递归定时触发(说白了就是有一定的延迟,而且非瞬间),这样会减缓内存的溢出情况。就这个例子来说,当deep到达11时就会出现数秒的延迟才会出现图形,而且cpu占有率极高,到12时就直接崩溃了。使用了setTimeout(设置50ms延迟)后,12层也不溢出,cpu占用比较大,15层也是可以运行的。而且还意外的可以看到画出的动态效果。

    再说说原理吧,这个分形树是二叉的,也就是说一分为二,树枝呈2的幂次方增长,利用三角函数算出两个分叉点的位置,周而复始,递归就可以了。

    下面说说我所设置的参数的意义吧。

    length:最初的树枝长度,可以理解为主干长度(与之相关的还有一个参数,即树枝与主干的长度比,我设置为1:1.5了)

    angle:相邻树杈间隔的角度

    deep:递归深度,也就是树杈分层级数

    下面使用的就是参数deep为11,angle为60,length为300时得到的分形树。

    分形树

    PS:对了,不得不提起的是。在mathematica(一个数学建模软件),写出相应的效果居然只需要几行代码就可以了,简直无法直视啊。

    查看介绍

    用canvas制作分形树