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  由李萨如曲线构成的螺线

你可能感兴趣的:(JavaScript图形实例:阿基米德螺线)