JavaScript图形实例:Levy曲线及其变形    

      Levy曲线是将一条线段不停地分形成两条长度相等且相互垂直的线段而生成的。Levy分形的最后很像一个英文字母C,所以也称它为C曲线。 Levy曲线的生成示意如图1所示。

 JavaScript图形实例:Levy曲线及其变形_JavaScript

图1  Levy曲线的生成

1.Levy曲线

      Levy曲线采用递归过程易于实现,编写如下的HTML代码。





      在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出的Levy曲线,如图2所示。

 JavaScript图形实例:Levy曲线及其变形_JavaScript_02

图2  递归深度depth =12的Levy曲线

      将上面HTML文件中的调用语句“fractal_c(depth,{x:150,y:100},{x:450,y:100});  ”修改为“fractal_c(depth,{x:350,y:100},{x:350,y:300});”,则可在浏览器窗口中绘制出如图3所示的Levy曲线,它很像字母C。

 JavaScript图形实例:Levy曲线及其变形_JavaScript_03

图3  C曲线

2.龙形曲线

      Levy曲线是将一条线段不停地分形成两条长度相等且相互垂直的线段而生成的,分形是对折方向都是沿着同一个方向。如果将分形对折方向进行交替切换会如何呢?绘制出的曲线像龙形,称为龙形曲线。

      龙形曲线的生成方式与Levy曲线相似,也是将线段不停地分形成两条长度相等且相互垂直的线段,不同之处是其对折的方向是一个左一个右,而levy曲线则是始终朝着一边对折。龙形曲线的生成示意如图4所示。

 JavaScript图形实例:Levy曲线及其变形_JavaScript_04

图4  龙形曲线的生成

      龙形曲线采用递归过程易于实现,编写如下的HTML代码。





      在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出的龙形曲线,如图5所示。

 JavaScript图形实例:Levy曲线及其变形_JavaScript_05

图5  递归深度depth =10的龙形曲线

3.变形的Levy曲线

为了绘制Levy曲线,还可以编写如下的HTML代码。





      在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出的Levy曲线,如图6所示。

 JavaScript图形实例:Levy曲线及其变形_JavaScript_06

图6  d=45时的Levy曲线

      上面程序中的d取不同值时,所绘制的曲线会变化。下图7~9分别是d值取75、90和150时绘制的曲线。

JavaScript图形实例:Levy曲线及其变形_JavaScript_07

图7  d=75时的Levy曲线

JavaScript图形实例:Levy曲线及其变形_JavaScript_08

图8  d=90时的Levy曲线

 JavaScript图形实例:Levy曲线及其变形_JavaScript_09

图9  d=150时的Levy曲线