JavaScript图形实例:随机SierPinski三角形    

      在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方法生成SierPinski三角形的方法。下面再介绍两种SierPinski三角形的构造方法,以扩展知识面。

1.随机点法

      采用随机点的方法可以得到SierPinski三角形。具体过程为:

      (1)任意取平面上三点A、B、C,组成一个三角形,并任意取三角形ABC内的一点P;

      (2)求出P和A、B、C三个顶点中任意一个顶点的中点P1;

      (3)描出该中点P1;

      (4)将P1作为新的P点,转步骤(2),直到描出的点数达到规定要求(如10000个点)。

      按上述思想,编写如下的HTML文件。在编程时,为简单计,不保证初始的P点一定在三角形ABC内(有可能在三角形外会描出几个散点,但不影响最后结果),也没有判断A、B、C三点可能共线的情况(此时无法构成三角形)。有兴趣的读者可以自行处理这两种情况,以完善代码。





      在浏览器中打开包含这段HTML代码的html文件,可以看到在浏览器窗口中绘制出一个SierPinski三角形,如图1所示。

 JavaScript图形实例:随机SierPinski三角形_JavaScript

图1  SierPinski三角形

      将程序中的调用语句“draw()”改写为“window.setInterval('draw()', 1500);”,则在浏览器窗口中会每隔1.5秒绘制一个随机SierPinski三角形,如图2所示。

 JavaScript图形实例:随机SierPinski三角形_JavaScript_02

图2  每隔1.5秒绘制一个随机SierPinski三角形

      由图2可以看出,有些三角形太小,甚至有些成一条直线,因此,可以改写上面的程序,要求随机取点A、B、C时,保证三个边长均大于100,且三点不共线。改写的HTML文件内容如下。





      在浏览器中打开包含这段改写后的HTML代码的html文件,在浏览器窗口中也会每隔1.5秒绘制一个随机SierPinski三角形,如图3所示,此时每个随机SierPinski三角形的最小边长均会超过100,三角形不会显得较小。

 JavaScript图形实例:随机SierPinski三角形_SierPinski_03

图3  每隔1.5秒绘制一个较大的随机SierPinski三角形

      上面程序中随机点法构造SierPinski三角形是描点10000个得到的。为展示描点过程,编写如下的HTML文件。





      在浏览器中打开包含这段HTML代码的html文件,在浏览器窗口中呈现出一个随机SierPinski三角形的喷出过程,如图4所示。

JavaScript图形实例:随机SierPinski三角形_JavaScript_04 

图4  随机SierPinski三角形的喷出过程

2.按组合数的奇偶性直接描点构造SierPinski三角形

      设有如下的杨辉三角形,若将杨辉三角形的奇数处画圆点,偶数处留空,则会得到SierPinski三角形。

JavaScript图形实例:随机SierPinski三角形_SierPinski_05 

      由于杨辉三角中第i行第j列的数字正是组合数C(i,j)的结果。因此,对杨辉三角形中各行各列数字的讨论转化为对组合数C(n,m)的讨论。

      组合数的奇偶性判定方法为:

      对于C(n,m),若n&m == m  则C(n,m)为奇数,否则为偶数。

      根据这个结论,直接编写如下的HTML文件。





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

 JavaScript图形实例:随机SierPinski三角形_JavaScript_06

图5  SierPinski三角形