JavaScript图形实例:Hilbert曲线

      德国数学家David Hilbert在1891年构造了一种曲线,首先把一个正方形等分成四个小正方形,依次从西北角的正方形中心出发往南到西南正方形中心,再往东到东南角的正方形中心,再往北到东北角正方形中心,这是一次迭代;如果对四个小正方形继续上述过程,往下划分,反复进行,最终就得到一条可以填满整个正方形的曲线,这就是Hibert曲线。其生成过程如图1所示。

 JavaScript图形实例:Hilbert曲线_第1张图片

图1  Hilbert曲线的生成

      Hilbert曲线可以采用递归过程实现,在递归处理时,连接中点的方式有4种,如图2所示。

JavaScript图形实例:Hilbert曲线_第2张图片

图2  连接中心点的4种方式

      设正方形左上角的顶点坐标为(x1,y1),右下角顶点坐标为(x2,y2)。若将方式(3)的正方形左上角坐标置为(x2,y2),右下角坐标置为(x1,y1),则方式(3)等同于方式(1),相当于旋转180°;同理,方式(4)等同于方式(2)。因此,4种连接中心点的方式可以看成(1)和(2)两种。

      两种连线方式的连线走向及下一次扩展的方式如图3所示。

JavaScript图形实例:Hilbert曲线_第3张图片

图3  两种连线方式走向及扩展

      其中,方式(1)的四个中心点坐标分别为:

      ①(x1+dx/4,y1+dy/4)           ②(x1+dx/4, y1+3*dy/4)

      ③ (x1+3*dx/4, y1+3*dy/4)     ④(x1+3*dx/4,y1+dy/4)   (dx=x2-1,dy=y2-y1)

      方式(2)的四个中心点坐标分别为:

      ①(x1+dx/4,y1+dy/4)           ②(x1+3*dx/4,y1+dy/4)

      ③ (x1+3*dx/4, y1+3*dy/4)     ④(x1+dx/4,  y1+3*dy/4)

      为此,引入一个标识变量s,s=1表示方式(1),s=-1表示方式(2),这样两种方式的中心点坐标可以统一表示为:

      ①(x1+dx/4,y1+dy/4)        ②(x1+(2-s)*dx/4,  y1+(2+s)*dy/4)

      ③(x1+3*dx/4, y1+3*dy/4)      ④(x1+(2+s)*dx/4,y1+(2-s)*dy/4)

      递归扩展时,方式(1)中4个小正方形的扩展方式分别是:方式(2)、方式(1)、方式(1)和方式(4)(注意:给定两个顶点坐标顺序调整后等同于方式(2));方式(2)中4个小正方形的扩展方式分别是:方式(1)、方式(2)、方式(2)和方式(3)。

编写如下的HTML代码。

Hilbert曲线

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

JavaScript图形实例:Hilbert曲线_第4张图片

图4  递归深度maxdepth =5的Hilbert曲线

      上面的程序需要推出方式(一)和方式(二)的坐标统一形式,还需注意方式(3)和方式(4)与方式(一)和方式(二)的同一性。

      由于Hilbert曲线可以看成是4种方式进行组合,因此可以直接对4种方式编写递归过程。编写如下的HTML文件。

Hilbert曲线

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

 JavaScript图形实例:Hilbert曲线_第5张图片

图5  调用One(depth)时绘制的图形

      将程序中的调用语句“One(depth)”改写成“Two(depth)”,则在浏览器窗口中绘制出如图6所示的Hilbert曲线。这个图形可以看成是图5向左旋转90°得到的。实际上,由图2可知,将方式(一)的图形向左旋转90°得到的就是方式(二)的图形。

 JavaScript图形实例:Hilbert曲线_第6张图片

图6  调用Two(depth)时绘制的图形

      将程序中调用语句“One(depth)”改写成“Three(depth)”,同时修改初始坐标为

“var x = 450-h;   var y = 450-h;”,则在浏览器窗口中绘制出如图7所示的Hilbert曲线。

JavaScript图形实例:Hilbert曲线_第7张图片

图7  调用THree(depth)时绘制的图形

       将程序中调用语句“One(depth)”改写成“Four(depth);”,同时修改初始坐标为

“var x = 450-h;   var y = 450-h;”,则在浏览器窗口中绘制出如图8所示的Hilbert曲线。

JavaScript图形实例:Hilbert曲线_第8张图片

图8  调用Four(depth)时绘制的图形 

      将Hilbert曲线的生成过程进行动画展示,编写如下的HTML代码。

Hilbert曲线

      在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中呈现出如图9所示的Hilbert曲线动态生成效果。

JavaScript图形实例:Hilbert曲线_第9张图片 

图9  Hilbert曲线动态生成

你可能感兴趣的:(JavaScript图形实例:Hilbert曲线)