JavaScript图形实例：阿基米德螺线

1．阿基米德螺线

      阿基米德螺线亦称“等速螺线”。当一点P沿动射线OP以等速率运动的同时，该射线又以等角速度绕点O旋转，点P的轨迹称为“阿基米德螺线”。

      阿基米德螺线的笛卡尔坐标方程式为：

r=10*(1+t)

x=r*cos(t * 360)

y=r*sin(t *360)

编写如下的HTML代码。

      将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出一条阿基米德螺线，如图1所示。

图1  阿基米德螺线

2．李萨如曲线

      一个质点同时在X轴和Y轴上作简谐运动形成的图形就是李萨如曲线。

李萨如曲线上的每一个点都可以用如下的公式进行表示：

X=A1sin(ω1t+ψ1)

Y=A2sin(ω2t+ψ2)

为绘制李萨如曲线，编写如下的HTML文件。

在程序中，设定 X=R*SIN(n*θ)，Y= R*SIN(k*θ)  （0≤θ≤2π）

      将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出6种李萨如曲线，如图2所示。

图2  李萨如曲线

      由图2看出，当n=1，k=1时，李萨如曲线为一条直线。如果在Y坐标计算时加上一个相位，如修改为“y=py-b*Math.sin(k*i*dig+Math.PI/4);”，则绘制的李萨如曲线如图3所示。

图3 李萨如曲线

3．可设置参数的李萨如曲线

      设李萨如曲线上的点（x,y）计算式为：

X=A1sin(mθ)

Y=A2sin(nθ) （0≤θ≤2π）

我们可以设置不同的参数A1、A2、m、n，绘制出不同的李萨如曲线。

编写的HTML代码如下。

李萨如曲线上的点（x,y）计算式为：

X=A1sin(mθ)
Y=A2sin(nθ)   （0≤θ≤2π）

A1

A2

M  

N  

      在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中，设置相应的参数后，单击“确定”按钮，可绘制出相应的李萨如曲线，如图4所示。

图4  李萨如曲线

4．由李萨如曲线构成的螺线

      在0~6π的螺线上取72个点，在这72个点的位置绘制72个李萨如曲线，并且李萨如曲线随着R值的变大而逐渐变大。编写HTML文件如下。

      在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图5所示的由李萨如曲线构成的螺线图案。

 

图5  由李萨如曲线构成的螺线